Demo · real data · free

Five ways to edit a table, all in the free grid

Edit one cell at a time, collect many changes and save them together, open a whole row, or edit the record as a form under the row or in a dialog. Switch the mode, change a few order lines, and the panel underneath shows what the save handed to the app.

Built with the free DataGrid only: no Enterprise package and no licence key on this page.

How it is built

One option picks the mode. In cell mode the grid writes each committed value into the row and calls onSave with that one change. In batch, row, form and popup it writes nothing into your rows: the changes wait until Save, go to onSave, and the app writes them into its data.

<DataGrid
  dataSource={rows}
  rowKey="id"
  columns={columns}
  editing={{
    mode: 'popup', // 'cell' | 'batch' | 'row' | 'form' | 'popup'
    onSave: async (changes) => {
      await api.save(changes);
      setRows((current) =>
        current.map((row) => {
          const change = changes.find((c) => c.rowKey === row.id);
          return change ? { ...row, ...change.values } : row;
        }),
      );
    },
  }}
/>

Each change carries the row key, the changed columns only (values) and their previous values (oldValues). Columns with editable: false stay read-only in every mode.

What is not on this page

Validation rules, adding and deleting rows, per-row permissions, lookup and custom editors, undo and redo, and range selection with fill and paste are in the Enterprise edition. The order editing demo shows validation and undo on the same rows.

Next