An editable, composable data grid for the shadcn/ui ecosystem: range selection, spreadsheet clipboard, fill handle, pinning, undo/redo, and streaming updates. Real DOM cells, shadcn styling.
An editable data grid: range selection, spreadsheet clipboard, editing engine, validation, sorting, filtering, pinning, streaming updates. Real DOM cells, shadcn styling.
Action-buttons column pattern: a pinned-right readOnly column whose renderCell composes shadcn Buttons over store actions (startEditing on the row's first editable cell, deleteRows/duplicateRows by view index) plus a more dropdown (Edit, Duplicate, Delete).
The live region announces checked rows and, with announceResults, the result count; a line on the page mirrors the spoken text.
A fake saveOrders rejects any committed Quantity over 100 after ~600ms; the onDataChange handler calls actions.setCellErrors to paint the exact cell with the same ring/tint/aria-invalid treatment as a live validate rejection, after commit. A badge reads the count via useDataGridCellErrors(), and a Clear all button calls clearCellErrors().
Every built-in cell type in one grid, plus a read-only column, a validate rule, and a custom renderCell override.
Checked rows survive a filter with keepCheckedRows and keepHiddenCheckedRows; the status bar counts the hidden checked rows.
Drag a header to reorder columns within its pin zone (enableColumnReorder, per-column reorderable opt-out, pinned-right column), plus a column picker wired to the programmatic setColumnOrder(id, targetId, position) path.
Column groups: Contact, Work with a nested History group, and Standing sit above their columns. Click a group header to select its columns, drag a group header to move the block, and use the columns menu to hide members.
Column layout persistence: defaultColumnLayout seeds widths/order/pins/hidden from a localStorage snapshot at mount, onColumnLayoutChange writes every resize commit, reorder, pin, and hide back; a Reset button clears the snapshot and re-seeds.
An HR dataset showing all four value-driven styling surfaces: grid-level getRowClassName/getCellClassName plus per-column cellClassName/headerClassName, all using shadcn theme tokens.
Right-click context menus for the gridcn data grid: cut/copy/paste/clear/row operations on cells, sort/pin/hide/autosize on headers.
Right-click cell menu (cut/copy/paste/clear, row operations) and header menu (sort/pin/hide/autosize) via the header dropdown.
Custom context menu items via getCellMenuItems and getHeaderMenuItems, replacing the built-in item sets.
Cross-field validation with validateRow: an End time must stay at or after its Start. The row is judged after a whole write gesture commits; a rejected row flags the named cell like a server error (the value still commits, no rollback) and the flag clears once the row is consistent again.
A worked custom cell type: currency storage as a plain number, cached locale-formatted display, and a symbol-stripping fromText, registered via the cellTypes prop.
Column header as a React component: a three-state sort icon (minus / up / down) driven by useDataGridSortState(); header click sorts in sort mode, and a custom header owns its display.
Custom row marker renderers (renderMarker/renderMarkerHeader): a lucide icon marker reflecting the row selection state, and a select-all header button, while the marker cell's own press/drag gestures still select rows.
A date column that opens its calendar at edit start next to one with a typed input and a calendar button.
onBeforeDeleteRows returns a promise from a confirm dialog; Cancel keeps the checked rows and Delete removes them.
The hero demo: an editable grid with every built-in cell type, range selection, the free data-grid-fill add-on, and native clipboard, via defaultData with zero state wiring.
Show the active row in a non-modal side panel opened from onCellClick or a custom Ctrl+Shift+Enter command.
Grid with a live inspector panel pretty-printing the latest payload per event: onDataChange, onSelectionChange, onSortChange, onFilterChange/join, onFill, onRenderedRowsChange, onColumnLayoutChange, and a presence read-back button.
Fill-handle add-on for the gridcn data grid: drag-to-tile with series inference (arithmetic runs, zero-padded numbers, prefix+number sequences), mod+D/mod+R keyboard fill, via the overlay-plugin seam, with zero core re-renders.
A staged dataset with a numeric series (1,2,3), a zero-padded series (001,002), a text-plus-number series (Item 1,2,3), and a plain-text column — dragging the fill handle down each shows series extrapolation vs. plain tiling; Alt/Option forces a copy and Ctrl/Cmd+D/R do the same from the keyboard.
Per-column filter operator overrides via operatorsForColumn and ColumnDef.filterOperators, plus a full column list (including hidden columns) in the sort popover via allColumns.
Find-and-replace add-on for the gridcn data grid: useDataGridFindReplace returns a plugin that adds a panel (Mod+F finds, Ctrl+H replaces) sharing the quick search, with match case and whole cell options. Replace and Replace all write through each column's text codec and validation as one undoable change; planReplace is the pure planner behind them. Strings live under labels.findReplace.
Open the find-and-replace panel with Ctrl+H, replace one match or all of them, and undo the whole replace in one step.
Undo and redo keep working while focus sits on a custom toolbar - the opt-in useDataGridGlobalShortcuts hook, with the editable-target guard shown live.
Header filter button on each column: search the distinct values, check the ones to keep, and apply.
Undo/redo add-on for the gridcn data grid: op-based, id-keyed history plus a useDataGridState quick-start wrapper.
Undo/redo via the useDataGridState quick start, with toolbar buttons wired to the returned history object.
A locale Select (English/Deutsch/Arabic) where each locale carries its strings and its text direction: labels, column headers, and hint text translate via deep-merged overrides, and the Arabic locale flips the grid to RTL through the direction prop.
Import/export add-on for the gridcn data grid: xlsx and csv, with delimiter detection and preview. New user-facing strings live under `labels.io` (see lib/labels.ts DataGridIOLabels) — export button/menu, import dialog (file picker, header-row toggle, delimiter select, column mapping, preview, errors).
Import/export toolbar buttons: export downloads the current view as xlsx or csv; import parses a file and replaces the grid's data through onDataChange.
Keyboard shortcuts dialog for the gridcn data grid, generated at runtime from the grid's effective keymap, grouped by category with platform-aware key chips; opens via '?' or a trigger.
A shortcuts dialog generated at runtime from the grid's effective keymap, opened via a toolbar button or the '?' shortcut.
100k generated rows proving row virtualization: only the virtualized rows around the viewport ever mount.
Virtual data fetching add-on for the gridcn data grid: useDataGridLazyRows maintains a sparse data array and fetches row windows on demand from onRenderedRowsChange, with range coalescing, in-flight dedup, abort-on-unmount, and error revert/refetch. A dev-only DataGridLazyGuard warns when uncontrolled sort/filter/search fires while rows are still unloaded.
100k rows, only a handful loaded up front; a simulated-latency in-memory API fetches each scrolled-into window on demand, with skeleton rows filling in as data lands.
10k rows fetched through a TanStack Query cache: each scrolled window becomes a fetchQuery (deduped, cached for the session, scrolling back never refetches).
10k rows fetched through SWR's global cache via preload: each scrolled window is fetched once per key and shared with any useSWR consumer.
Two Switches (loading, rows present) reach all three states of the loading prop: zero rows + loading = viewport-filling skeleton, rows present + loading = a slim indeterminate bar under the header, zero rows + not loading = the ordinary empty state.
The quick-start minimum: the core item alone, `defaultData`, zero app-side state.
Pagination add-on for the gridcn data grid: useDataGridPagination (client mode slices data; server mode is fully controlled) plus a composable <DataGridPaginationBar /> footer (range, page-size select, first/prev/pages/next/last parts) — shadcn-Pagination style, renders a default layout with no children or a custom composition of parts. New user-facing strings live under labels.pagination (see data-grid/labels.ts DataGridPaginationLabels). Zero core changes — purely additive.
Client-mode pagination: useDataGridPagination slices a generated dataset and <DataGridPaginationBar /> renders the default footer (first/prev/pages/next/last, page-size select, range label).
Server-mode pagination backed by useQuery: the current page/pageSize is the query key, edits write through to the fake server then invalidate the cached pages.
Server-mode pagination backed by useSWR: the page is cached by key so paging back is instant, and edits revalidate the current key after writing through.
100k generated rows with a top-left FPS meter overlay so the scroll-performance claim is checkable live.