# How to use Excel-like editing in your DataGrid

Published: 2024-06-13  
Author: admin  
Tags: editing

Canonical page: https://infinite-table.com/blog/2024/06/13/how-to-use-excel-like-editing-in-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 a cell and start typing](https://codesandbox.io/s/excel-like-editing-infinite-datagrid-y6xtw6)

This behavior is achieved by using the [Instant Edit keyboard shorcut](https://infinite-table.com/docs/learn/keyboard-navigation/keyboard-shortcuts.md#instant-edit).

## Configuring keyboard shortcuts

```ts {4,12}
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](https://infinite-table.com/docs/learn/keyboard-navigation/keyboard-shortcuts.md) 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`](https://infinite-table.com/docs/reference/infinite-table-props.md#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](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) prop. This overrides the global [`columnDefaultEditable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultEditable).

Read about how you can configure various editors for your columns.

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`](https://infinite-table.com/docs/reference/infinite-table-props.md#shouldAcceptEdit) prop or the column-level [column.shouldAcceptEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) alternative.

When neither the global [`shouldAcceptEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#shouldAcceptEdit) nor the column-level [column.shouldAcceptEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) are defined, all edits are accepted by default.

Once an edit is accepted, the [`onEditAccepted`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditAccepted) callback prop is called, if defined.

When an edit is rejected, the [`onEditRejected`](https://infinite-table.com/docs/reference/infinite-table-props.md#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`](https://infinite-table.com/docs/reference/infinite-table-props.md#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](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) function property that rejects non-numeric values.

[CodeSandbox demo](https://codesandbox.io/s/infinite-table-editing-custom-edit-value-2x7nrw)

## Persisting an Edit

By default, accepted edits are persisted to the `DataSource` via the [DataSourceAPI.updateData](https://infinite-table.com/docs/reference/datasource-api/index.md#updateData) method.

To change how you persist values (which might include persisting to remote locations), use the [`persistEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#persistEdit) function prop on the `InfiniteTable` component.

The [`persistEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#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`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditPersistSuccess) callback prop is called. If the persisting failed (was rejected), the [`onEditPersistError`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditPersistError) callback prop is called instead.