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:T92e,"use client"; import type { ReactNode } from "react"; import { DataGridProvider, DataGridRoot, DataGridHeader, DataGridBody, defineColumns, } 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"; import { generateDemoRows, type DemoRow } from "./demo-data"; const columns = defineColumns()([ { id: "name", header: "Name", accessorKey: "name", type: "text", width: 150, flex: 2 }, { id: "role", header: "Role", accessorKey: "role", type: "select", options: { choices: [ { value: "Admin", label: "Admin" }, { value: "User", label: "User" }, { value: "Editor", label: "Editor" }, { value: "Viewer", label: "Viewer" }, { value: "Manager", label: "Manager" }, ], }, width: 120, flex: 1, }, { id: "score", header: "Score", accessorKey: "score", type: "number", width: 90, flex: 1 }, ] as const); /** * `useDataGridState` quick start: wires data + op-based history + `onDataChange` together. * Edit a cell, then use the buttons (or Ctrl+Z / Ctrl+Y) to undo/redo. */ export default function DataGridHistoryDemo(): ReactNode { const grid = useDataGridState(generateDemoRows(6), { getRowId: (row) => row.id }); return (

Edit a cell, then undo/redo with the buttons below or Ctrl+Z / Ctrl+Y (Cmd on Mac).

); } 52:T614,/** Deterministic LCG so SSR/CSR markup match without Math.random(); shared across example rows. */ function createSeededLcg(seed: number) { let state = seed; return () => { state = (state * 1103515245 + 12345) & 0x7fffffff; return state / 0x7fffffff; }; } export type DemoRow = { id: string; name: string; email: string; age: number; active: boolean; role: string; joined: string; score: number; }; const ROLES = ["Admin", "User", "Editor", "Viewer", "Manager"] as const; const ADJECTIVES = ["Eager", "Quick", "Silent", "Bold", "Swift"] as const; const NOUNS = ["Eagle", "Lion", "Tiger", "Bear", "Wolf"] as const; /** Generates `count` deterministic demo rows for example previews (seed 42, stable across renders). */ export function generateDemoRows(count: number, seed = 42): DemoRow[] { const next = createSeededLcg(seed); const rows: DemoRow[] = []; for (let i = 0; i < count; i++) { rows.push({ id: `row-${i}`, name: `${ADJECTIVES[Math.floor(next() * ADJECTIVES.length)]} ${NOUNS[Math.floor(next() * NOUNS.length)]}`, email: `user${i}@example.com`, age: Math.floor(next() * 50) + 18, active: next() > 0.5, role: ROLES[Math.floor(next() * ROLES.length)]!, // ROLES is a fixed non-empty literal array joined: `${2020 + Math.floor(next() * 5)}-${String(Math.floor(next() * 12) + 1).padStart(2, "0")}-${String(Math.floor(next() * 28) + 1).padStart(2, "0")}`, score: Math.floor(next() * 100), }); } return rows; } 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-history-demo.tsx","content":"$51","type":"registry:example","target":"components/data-grid-history-demo.tsx"},{"path":"registry/default/examples/demo-data.ts","content":"$52","type":"registry:example","target":"components/demo-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]