React Inline-Editable Grid

Copy Page

The screen where ops fixes the data without leaving the page. Double-click a cell to edit; each column validates its own input, changed cells are flagged, and nothing is sent until Save — with Revert always one click away.

Installation

Props

Dirty state, validation, and commit

Three behaviours make this trustworthy enough for real edits:

• Dirty tracking is by value, not by touch. A cell is dirty only if its current value differs from the original snapshot — type a new value and type the old one back, and the flag clears. Only genuinely changed rows go to onSave.
• Validation blocks the commit, not the keystroke. You can type freely; on Enter (or blur) the column's validate runs, and a failure keeps the cell in edit mode with the error shown rather than discarding your input. Save is disabled while any error stands.
• Revert restores the snapshot. No undo stack to reason about — one button returns every cell to where it started.

type is text, number, or select; editable: false marks a read-only column (the SKU in the demo). Enter commits, Escape cancels — the two keys people already expect from a spreadsheet.