Top
DataGrid - Inline edit
DataGrid
The <DataGrid /> supports inline editing, via the editable boolean prop. It's up to you to hook to the onEditComplete({ value, columnId, rowIndex }) callback prop and apply the result of the editing.
Since the <DataGrid /> does not force any method to update the data when onEditComplete is called, editing can be easily customized to support both local and/or remove data persistence.
You can make a certain column not editable via column.editable=false.
column.editable: Fn(editValue, cellProps) (or editable: Fn(editValue, cellProps)) can also be a function, that either returns a boolean value, or a Promise. In case the returned Promise is rejected, or resolved with false, the cell is not editable. Otherwise, it's considered editable.
You can also retrieve the edit value lazily, via columns.getEditStartValue.
You can use the Ctrl+E keyboard shortcut to start editing on the active row (can be changed by specifying the isStartEditKeyPressed({event})).
Notice in the above example that you can also edit the Country column, which has a custom render method. When the value does not have a flag associated, the country name is rendered as-is, otherwise, the country flag is displayed.
By default, when the user double-clicks a cell in an editable DataGrid, the inline edit starts on that cell. When the user hits ESC while in edit, the editing is canceled (onEditCancel({ columnId, rowIndex }) is called).
Also, when an editor is focused, hitting Enter persists the edit and triggers onEditComplete({ value, columnId, rowIndex }). Hitting the Tab key, not only triggers onEditComplete but also starts editing in the next column in the current row (if there is one). Shift+Tab does the same, but goes to the previous column (if one exists).
Editing can also be started programmatically, using startEdit({ columnId, rowIndex }). Also, cancelEdit() cancels the edit, while completeEdit() completes (and confirms) the edit. See the example below for an demo on how to start the edit on single click (using columns.cellDOMProps)
As already mentioned above, the user of the DataGrid is directly responsible for making the edit either locally or remotely.
To edit a cell and persist the data remotely, intercept onEditComplete and make an ajax call to update the data on server side, while also reloading the dataSource.
In an editable grid, you can have columns that are not editable, by specifying column.editable=false.
Inline edit wouldn't be very useful unless you can specify custom editors for each column. The DataGrid supports this feature, so you can specify your own column.editor, which should be a React Component.
Or you can use column.renderEditor(editorProps) function and return a React.Node that describes your editor.
If neither column.editor, nor column.renderEditor are specified, a default text editor is used for editing.
The DataGrid offers some editors you can use, but they are included when you import @zippytech/react-datagrid-pro. The reason behind this is that we don't want to force a heavy bundle size on people not using inline editing or fancy editors like DateField that have large external dependencies (eg: DateField depends on momentjs).
Instead, you have to explicitly import the editors. Here's a list of currently available editors:
  • @zippytech/react-datagrid-pro/BoolEditor
  • @zippytech/react-datagrid-pro/DateEditor
  • @zippytech/react-datagrid-pro/NumericEditor
Have a look at the example below to see all the boolean and numeric editors in action.
In the next code snippet, we'll show how you can use the custom column.renderEditor. Double-click on cells in the Student column
When writing a custom column editor, via column.editor or column.renderEditor(editorProps) it is important that you call editorProps.onChange and editorProps.onComplete accordingly, when the user changes the value in the editor and when it completes/cancels the edit. It's also important that you call editorProps.onTabNavigation(complete: bool, direction) so that the user can navigate from the editor to other editors in the row (either backwards or forwards - direction should be -1 for backwards and 1 for forwards).