the grid will store column configuration in browser local storage (based off of stateKey, so the key must be unique across all grids in a single application)
height
oneOfType([number, string, bool])
the height of the grid container, if false, then no height will be set
the placeholder that will be used for the editor input
validator
func
a func that should return a boolean, to determine if the newly input value is valid
change
func
a func that should return an object where keys are the dataIndex of affected columns, and the values will be the new values associated with that dataIndex.
editable
oneOfType([func, bool])
whether the field should be disabled while in edit mode.
will set all columns to resizable. This parameter will not override columns that have declared they are not resizable from the columns array
defaultColumnWidth
int
if no column width is provided, columns will be divided equally. this can be overwritten by providing a new string template
minColumnWidth
int
the minimum width a column can be dragged to
moveable
bool
whether the columns can be reordered by drag
headerActionItemBuilder
func
build a custom jsx component to be used as the header action items
sortable
object
an object that describes whether columns can be sorted
sortable.enabled
bool
an object that describes whether columns can be sorted
sortable.method
oneOf(['local', 'remote'])
whether sorting will execute locally, or remotely
sortable.sortingSource
string
where sorting data will be retrieved (a required parameter for remote sorting)
Pagination
exportconstplugins={PAGER: {enabled: true,pagingType: "remote",toolbarRenderer: (pageIndex,pageSize,total,currentRecords,recordType)=>{return`${pageIndex*pageSize} through ${pageIndex*pageSize+currentRecords} of ${total}${recordType} Displayed`;},pagerComponent: false,},};
Prop
Type
Description
enabled
bool
whether a pager will be used, defaults to true
pagingType
oneOf(['local', 'remote'])
defaults to local
toolbarRenderer
func
a function which which returns the description of the current pager state, ex: 'Viewing Records 10 of 100'
pagerComponent
jsx
if you'd like to pass your own pager in, you can supply a jsx element which will replace the pager entirely
Grid Actions
exportconstplugins={GRID_ACTIONS: {iconCls: "action-icon",onMenuShow: ({ columns, rowData })=>{console.log("This event fires before menushow");if(rowData.isDisabled){return["menu-item-key"];// this field will now be disabled}},menu: [{text: "Menu Item",key: "menu-item-key",EVENT_HANDLER: ()=>{alert("Im a menu Item Action");},},],},};
Prop
Type
Description
iconCls
string
class to be used for the action icon
menu
arrayOf(object)
menuItems, with text, key, EVENT_HANDLER properties. each object must contain a unique key relative to it's parent array. These keys will be used as the JSX element key.
onMenuShow
func
a method that fires upon menu action click. @return an array of keys to disable menu items that correspond with these keys.
Each function is passed two arguments, the first is a context object which will contain metadata about the event, and the second argument is the browser event if applicable.
All core components and plugins have corresponding .styl files that can be extended or overwritten. Class names have also been modularized and are available to modify or extend within src/constants/gridConstants.js
To update CLASS_NAMES or the CSS_PREFIX dynamically, you can use the applyGridConfig function. More information is available here.
