Server errors
Painting post-commit rejections with setCellErrors / clearCellErrors when the value committed and the server disagrees.
validate only runs before commit. A server can still reject an already-committed value:
a 422 that names the field, for example. actions.setCellErrors paints that rejection on the
exact cell. The demo wires a fake saveOrders call into onDataChange that rejects any
Quantity above 100 after ~600 ms.
Set a Quantity above 100 and press Enter: the fake server rejects it after ~600ms and the cell is marked with a red ring — hover it to read the message.
pnpm dlx shadcn@latest add @gridcn/data-grid-cell-errors-demo
Wiring
const [data, setData] = useState<readonly Order[]>(initialOrders);
function handleDataChange(next: readonly Order[], change: DataChange<Order>) {
setData(next);
saveOrders(change.ops).catch((error) => {
actions.setCellErrors(parseFieldErrors(error)); // [{ rowId, columnId, message }]
});
}The marked cell gets the same ring, tint, and aria-invalid treatment as a pre-commit
rejection. Hovering it shows the message. Opening the cell for editing shows it the same
way a live rejection does.
The API
type CellErrorEntry = { rowId: string; columnId: string; message: string };
actions.setCellErrors(errors: readonly CellErrorEntry[]): void; // merges in, per cell
actions.clearCellErrors(targets?: readonly { rowId: string; columnId: string }[]): void; // omit to clear all- Auto-clear: the moment the user commits a new value to that cell, through any write path
(edit, paste, fill,
updateCells), the error clears on its own. The server can set it again if the new value is still wrong. useDataGridCellErrors()reads the full map for a summary view. The demo's bar shows the count plus a Clear-all button.
Not a data change
setCellErrors/clearCellErrors never touch data: they fire no onDataChange, and
data-grid-history never records them. A server error is metadata about a
cell, not an edit the user made. Undo must not walk past it.
Behavior reference
- Server errors: the full contract, including
cellErrorKey - Validation: the pre-commit side of the same display treatment