How to use Excel-like editing in your DataGrid

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.

Click on a cell and start typing

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.

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.

When neither the global shouldAcceptEdit nor the column-level column.shouldAcceptEdit are defined, all edits are accepted by default.

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.

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.