Data Grid — change tracking & persistence
niko-table/data-table-grid-changesFreeComponent
Opt-in useGridChanges hook that observes the uncontrolled grid engine and turns edits into a create/update/delete change-set — for staging saves, autosave, and full CRUD with per-row reconcile. Plain React, no dependency. Requires data-table-grid.
Install it
npx shadcn@latest add https://niko-table.com/r/data-table-grid-changes.jsonSource
1"use client"23/**4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.5 *6 * Before reporting anything: please check the changelog first.7 * - In-repo: ./CHANGELOG.md8 * - Docs site: https://niko-table.com/changelog9 *10 * Found a bug or have a fix? Open an issue or PR on GitHub so other11 * users (and future LLMs reading this code) benefit:12 * https://github.com/Semkoo/niko-table-registry13 */14/**15 * niko-table grid — change tracking & persistence (opt-in).16 *17 * The engine (`useDataGrid`) is UNCONTROLLED — it owns the rows. This hook18 * OBSERVES it (via the `lastCommit` signal) and turns local edits into a CRUD19 * change-set, so a consumer can stage, autosave, or do full create/update/delete20 * against a backend. Install/import it ONLY on a grid that persists; grids that21 * don't pay nothing. Plain React, no dependency.22 *23 * Three patterns, one hook:24 * - Staging: edit → on Save read `getChangeSet().created` → one bulk mutation25 * → `reconcile({ succeededIds, failedIds })` → highlight failures.26 * - Autosave: `useEffect([dirtyRowIds])` + debounce → `getChangeSet()`27 * → batch upsert → `reconcile`.28 * - Full CRUD: create/update/delete all fall out of the change-set.29 */30import * as React from "react"3132import type { UseDataGrid } from "./use-data-grid"33import type { GridRow } from "../types/grid-cell"3435export interface UseGridChangesOptions<TRow extends GridRow> {36 /**37 * The server/pre-existing baseline. These rows' ids are "existing" (edits to38 * them are UPDATEs; removing them is a DELETE). Omit / pass `[]` for a fresh39 * import where everything the user enters is a CREATE. For a live-edit surface,40 * pass the SAME loaded rows you seeded `useDataGrid({ initialRows })` with.41 */42 initialRows?: readonly TRow[]43 /** Row identity. Default `(r) => r.id`. */44 getRowId?: (row: TRow) => string45 /**46 * Compare a current row to its baseline snapshot to filter reverts out of47 * `getChangeSet().updated` (a row edited back to its original value isn't a48 * real update). Default: reference equality — pair it with the engine's49 * structural sharing (unchanged rows keep their reference).50 */51 isEqual?: (current: TRow, baseline: TRow) => boolean52}5354/** The precise CRUD delta to send to a backend. */55export interface GridChangeSet<TRow extends GridRow> {56 /** New rows (not in the baseline). */57 created: TRow[]58// … truncated
What it pulls in
Other registry items
Files it writes
More from niko-table
All 31 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| DataTable Asidedata-table-aside | niko-table | Components | Free | 1 dep | |
| DataTable Clear Filterdata-table-clear-filter | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Auto-fitdata-table-column-auto-fit | niko-table | Components | Free | no deps · 2 files | |
| DataTable Column Date Filterdata-table-column-date-filter | niko-table | Components | Free | 2 deps · 2 files | |
| DataTable Column DnDdata-table-column-dnd | niko-table | Components | Free | 4 deps · 3 files | |
| DataTable Column Faceted Filterdata-table-column-faceted-filter | niko-table | Components | Free | 1 dep · 3 files | |
| DataTable Column Hidedata-table-column-hide | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Pindata-table-column-pin | niko-table | Components | Free | 1 dep · 2 files |
