How to use Excel-like editing in your DataGrid
By adminยท
Excel-like editing is a very popular request we had. In this short article, we show you how to configure Excel-like editing in the Infinite React DataGrid.
This behavior is achieved by using the Instant Edit keyboard shorcut.
Configuring keyboard shortcuts
import {
DataSource,
InfiniteTable,
keyboardShortcuts
} from '@infinite-table/infinite-react';
function App() {
return <DataSource<Developer> primaryKey="id" data={dataSource}>
<InfiniteTable<Developer>
columns={columns}
keyboardShortcuts={[
keyboardShortcuts.instantEdit
]}
/>
</DataSource>
The instantEdit
keyboard shorcut is configured (by default) to respond to any key (via the special *
identifier which matches anything) and will start editing the cell as soon as a key is pressed. This behavior is the same as in Excel, Google Sheets, Numbers or other spreadsheet software.
Note
To enable editing globally, you can use the columnDefaultEditable
boolean prop on the InfiniteTable
DataGrid component. This will make all columns editable.
Or you can be more specific and choose to make individual columns editable via the column.defaultEditable
prop. This overrides the global columnDefaultEditable
.
Column Editors
Read about how you can configure various editors for your columns.
Editing Flow Chart
A picture is worth a thousand words - see a chart for the editing flow.
Finishing an Edit
An edit is generally finished by user interaction - either the user confirms the edit by pressing the Enter
key or cancels it by pressing the Escape
key.
As soon as the edit is confirmed by the user, InfiniteTable
needs to decide whether the edit should be accepted or not.
In order to decide (either synchronously or asynchronously) whether an edit should be accepted or not, you can use the global shouldAcceptEdit
prop or the column-level column.shouldAcceptEdit
alternative.
Note
When neither the global shouldAcceptEdit
nor the column-level column.shouldAcceptEdit
are defined, all edits are accepted by default.
Note
Once an edit is accepted, the onEditAccepted
callback prop is called, if defined.
When an edit is rejected, the onEditRejected
callback prop is called instead.
The accept/reject status of an edit is decided by using the shouldAcceptEdit
props described above. However an edit can also be cancelled by the user pressing the Escape
key in the cell editor - to be notified of this, use the onEditCancelled
callback prop.
Using shouldAcceptEdit to decide whether a value is acceptable or not
In this example, the salary
column is configured with a shouldAcceptEdit
function property that rejects non-numeric values.
Persisting an Edit
By default, accepted edits are persisted to the DataSource
via the DataSourceAPI.updateData
method.
To change how you persist values (which might include persisting to remote locations), use the persistEdit
function prop on the InfiniteTable
component.
Note
The persistEdit
function prop can return a Promise
for async persistence. To signal that the persisting failed, reject the promise or resolve it with an Error
object.
After persisting the edit, if all went well, the onEditPersistSuccess
callback prop is called. If the persisting failed (was rejected), the onEditPersistError
callback prop is called instead.