4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T13ef,"use client"; import { useRef, type ReactNode } from "react"; import { DataGridBody, DataGridHeader, DataGridProvider, DataGridRoot, defineColumns, useDataGridActions, useDataGridCellErrors, type DataChange, type DataGridActions, type DataOp, } from "@/registry/default/components/data-grid/data-grid"; import { useDataGridState } from "@/registry/default/components/data-grid-history/data-grid-history"; import { Button } from "@/components/ui/button"; type Order = { id: string; item: string; quantity: number; status: string }; const columns = defineColumns()([ { id: "item", header: "Item", accessorKey: "item", type: "text", width: 150, flex: 2 }, { id: "quantity", header: "Quantity", accessorKey: "quantity", type: "number", width: 110, flex: 1 }, { id: "status", header: "Status", accessorKey: "status", type: "text", width: 100, flex: 1 }, ] as const); function initialRows(): Order[] { return [ { id: "row-0", item: "Widget", quantity: 12, status: "ok" }, { id: "row-1", item: "Gadget", quantity: 40, status: "ok" }, { id: "row-2", item: "Gizmo", quantity: 8, status: "ok" }, { id: "row-3", item: "Doohickey", quantity: 25, status: "ok" }, { id: "row-4", item: "Thingamajig", quantity: 60, status: "ok" }, ]; } const getRowId = (row: Order) => row.id; type RejectedCell = { rowId: string; columnId: string }; function isUpdateWithCells(op: DataOp): op is Extract, { type: "update" }> & { cells: NonNullable, { type: "update" }>["cells"]>; } { return op.type === "update" && Boolean(op.cells); } /** Fake server call: rejects any committed quantity over 100, after ~600ms. */ function saveOrders(ops: DataChange["ops"]): Promise { return new Promise((resolve, reject) => { setTimeout(() => { const tooMany: RejectedCell[] = ops .filter(isUpdateWithCells) .flatMap((op) => op.cells .filter((cell) => cell.columnId === "quantity" && typeof cell.value === "number" && cell.value > 100) .map((cell) => ({ rowId: op.rowId, columnId: cell.columnId })), ); if (tooMany.length > 0) reject(tooMany); else resolve(); }, 600); }); } /** Publishes the provider's actions to a ref so the parent's onDataChange handler (outside the provider) can call setCellErrors. */ function ActionsCapture({ onReady }: { onReady: (actions: DataGridActions) => void }): ReactNode { const actions = useDataGridActions(); const readyRef = useRef(false); if (!readyRef.current) { readyRef.current = true; onReady(actions); } return null; } /** Reads the live cellErrors map from inside the provider and drives the badge + clear button. */ function CellErrorsBar(): ReactNode { const actions = useDataGridActions(); const cellErrors = useDataGridCellErrors(); return (

Server errors: {cellErrors.size}

); } /** * Edit a Quantity cell past 100 and commit: `onDataChange` calls a fake `saveOrders` that rejects * after ~600ms, and the `.catch()` handler calls `actions.setCellErrors` to paint the exact cell — * the same ring/tint/aria-invalid a pre-commit `validate` rejection uses, but after the value already * committed. Editing that cell again, with any value, clears its error on the next successful commit. */ export default function DataGridCellErrorsDemo(): ReactNode { const grid = useDataGridState(initialRows(), { getRowId }); const actionsRef = useRef(null); function handleDataChange(next: readonly Order[], change: DataChange): void { grid.onDataChange(next, change); saveOrders(change.ops).catch((tooMany: RejectedCell[]) => { actionsRef.current?.setCellErrors(tooMany.map((cell) => ({ ...cell, message: "Quantity cannot exceed 100" }))); }); } return (

(actionsRef.current = actions)} />

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.

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@gridcn","registryDependencies":["DammersCode/gridcn/data-grid","DammersCode/gridcn/data-grid-history"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/examples/data-grid-cell-errors-demo.tsx","content":"$51","type":"registry:example","target":"components/data-grid-cell-errors-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]