<DataGrid />component props/state and restore them later. In the example below, we demo saving and restoring the column order, column size and sortInfo.
<DataGrid />configured with a checkbox column for selection.
checkboxColumn.renderCheckboxprop, you have a custom render function for all checkboxes (both the header and row checkboxes). Overriding just the header checkbox is done via a check for the
<DataGrid />you can build an Excel-like experience pretty easily. The example below demonstrates how you can use the
Tabkey to navigate between cells (arrow keys also work). To enter edit mode, hit
<DataGrid />you can retrieve the edit value lazily, by using
columns.getEditStartValue. In the snippet bellow, the
NAMEcolumn retrieves the edit value lazily (with a delay of 250 ms).
renderfunction) - see the
COUNTRYcolumn in the example.
<DataGrid />you can have columns that use their
renderfunction to render an already visible editor. In this case, make sure you specify
rendersInlineEditor=truefor the column. When the column editor is focused, it starts the edit (so it saves the user a double click on the cell in order to start editing). The editor also participates in the edit keyboard navigation flow.
<DataGrid />contents as a CSV file. It keeps the sort order and the column order.
onRenderRow(rowProps)you can attach custom DOM events to grid rows.
rowPropsargument passed to
onRenderRow) contains information about the rowIndex, the row data object and more.
onCllickprop on this
rowPropsobject, make sure you still call the default onClick that
rowPropsalready has (similarly, you should do this will all other event handlers).