DataGrid - Inline edit

Inline edit

The <ReactDataGrid /> supports inline editing, via the editable boolean prop. It's up to you to hook to the onEditComplete({ value, columnId, rowId }) callback prop and apply the result of the editing.

Since the <ReactDataGrid /> 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, rowId }) is called).

Also, when an editor is focused, hitting Enter triggers onEditComplete({ value, columnId, rowId }) and start editing the same column but on the next row (if there is one). Shift+Enter does the same thing to the previous row (if one exist). 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, rowId }). 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)

Remote editing

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.

Disable column editing

In an editable grid, you can have columns that are not editable, by specifying column.editable=false.

Column editors

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 not included when you import @inovua/reactdatagrid-community. 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:

@inovua/reactdatagrid-community/BoolEditor
@inovua/reactdatagrid-community/DateEditor
@inovua/reactdatagrid-community/NumericEditor

Have a look at the example below to see all the boolean and numeric editors in action.

Additionally, editors can be rendered by the column render function, by using columns.rendersInlineEditor - see next section below for details .

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).

Rendering already visible editors

There are cases when you want the column editors to be visible initially - that can be achived by using columns.rendersInlineEditor for the columns that need this.

When you specify this prop, you need to make your column.render function renders the editor correctly - see below for an example.

Keyboard navigation in edit

You can use the Ctrl+E keyboard shortcut to start editing on the active row (can be changed by specifying the isStartEditKeyPressed({event})).

The keyboard navigation available while editing has been improved - hitting TAB while editing a cell on a row, will complete the edit and start editing the next cell in the row. If there is no other editable cell in the row, it will move to the first editable cell in the next row. The same is valid for SHIFT+TAB but in the opposite direction.

The code below shows a customized shortcut for starting grid editing - Ctrl+K instead of the default Ctrl+E,

Render cell editor conditionally

Inline editing on TreeGrid

For inline editing on TreeGrid use the editedTreeData method.

Grouping

Filtering

e: contact@reactdatagrid.io

Top