---
name: "@gridcn"
slug: "gridcn"
description: "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."
category: "Forms"
tags: ["cards", "forms", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "Apache-2.0"
author: "DammersCode"
website: "https://gridcn.vercel.app"
github: "https://github.com/DammersCode/gridcn"
registry: "https://gridcn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 60
generated_at: "2026-10-10T06:32:55.998Z"
---

# @gridcn

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.

## Links

- Website: https://gridcn.vercel.app
- GitHub: https://github.com/DammersCode/gridcn
- Registry JSON: https://gridcn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/gridcn
- This file: https://sh4dcn.vercel.app/md/gridcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://gridcn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://gridcn.vercel.app/r/registry.json
bunx shadcn@latest add https://gridcn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/DammersCode/gridcn.git
# fetch the raw registry index
curl -s https://gridcn.vercel.app/r/registry.json
```

## Components (60)

| name | type | description | install |
| --- | --- | --- | --- |
| data-grid | registry:block | An editable data grid: range selection, spreadsheet clipboard, editing engine, validation, sorting, filtering, pinning, streaming updates. Real DOM cells, shad… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid.json` |
| data-grid-presence | registry:block | Multiplayer presence add-on for the gridcn data grid: useDataGridPresence registers an overlay plugin that paints remote users' live selections as named, color… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-presence.json` |
| data-grid-fill | registry:block | 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 ke… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-fill.json` |
| data-grid-pinned-rows | registry:block | Pinned top/bottom row bands add-on for the gridcn data grid: useDataGridPinnedRows registers a rowBands spec (e.g. a totals row) that stays sticky under the he… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pinned-rows.json` |
| data-grid-history | registry:block | Undo/redo add-on for the gridcn data grid: op-based, id-keyed history plus a useDataGridState quick-start wrapper. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-history.json` |
| data-grid-toolbar | registry:block | Toolbar add-on for the gridcn data grid: quick-search with match navigation, a per-column filter menu (aligned rows, join column, drag-to-reorder via @dnd-kit/… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-toolbar.json` |
| data-grid-context-menu | registry:block | Right-click context menus for the gridcn data grid: cut/copy/paste/clear/row operations on cells, sort/pin/hide/autosize on headers. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-context-menu.json` |
| data-grid-keybindings | registry:block | 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; o… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-keybindings.json` |
| data-grid-url-state | registry:block | Syncs the gridcn data grid's sort/filter/search state with the URL via nuqs (router-agnostic — requires a NuqsAdapter above it). Mount <DataGridUrlState prefix… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-url-state.json` |
| dropzone | registry:block | Dependency-free file dropzone: drag and drop or click to choose, with accept, size, and count checks and a compact variant. Used by the data-grid-io import dia… | `npx shadcn@latest add https://gridcn.vercel.app/r/dropzone.json` |
| data-grid-io | registry:block | 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/labe… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-io.json` |
| data-grid-lazy | registry:block | Virtual data fetching add-on for the gridcn data grid: useDataGridLazyRows maintains a sparse data array and fetches row windows on demand from onRowWindowChan… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-lazy.json` |
| data-grid-pagination | registry:block | Pagination add-on for the gridcn data grid: useDataGridPagination (client mode slices data; server mode is fully controlled) plus a composable <DataGridPaginat… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pagination.json` |
| data-grid-sort-list | registry:block | Toolbar sort add-on for the gridcn data grid: a sort button + popover listing applied sorts as editable, aligned rows (column / direction / remove / drag handl… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-sort-list.json` |
| data-grid-minimal-demo | registry:example | The quick-start minimum: the core item alone, `defaultData`, zero app-side state. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-minimal-demo.json` |
| data-grid-streaming-demo | registry:example | A live ticker: `updateCells` streams values in place. An auto-sort switch toggles between defer (rows hold position, re-sort on demand) and immediate (correct … | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-streaming-demo.json` |
| data-grid-demo | registry:example | 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… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-demo.json` |
| data-grid-cell-types-demo | registry:example | Every built-in cell type in one grid, plus a read-only column, a validate rule, and a custom renderCell override. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-cell-types-demo.json` |
| data-grid-custom-cell-demo | registry:example | A worked custom cell type: currency storage as a plain number, cached locale-formatted display, and a symbol-stripping fromText, registered via the cellTypes p… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-custom-cell-demo.json` |
| data-grid-sorting-filtering-demo | registry:example | Toolbar quick-search with match navigation, a per-column filter menu, and click-to-sort headers with multi-column sort. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-sorting-filtering-demo.json` |
| data-grid-filter-operators-demo | registry:example | Per-column filter operator overrides via operatorsForColumn and ColumnDef.filterOperators, plus a full column list (including hidden columns) in the sort popov… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-filter-operators-demo.json` |
| data-grid-history-demo | registry:example | Undo/redo via the useDataGridState quick start, with toolbar buttons wired to the returned history object. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-history-demo.json` |
| data-grid-context-menu-demo | registry:example | Right-click cell menu (cut/copy/paste/clear, row operations) and header menu (sort/pin/hide/autosize) via the header dropdown. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-context-menu-demo.json` |
| data-grid-context-menu-slots-demo | registry:example | Custom context menu items via renderCellMenuItems and renderHeaderMenuItems, replacing the built-in item sets. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-context-menu-slots-demo.json` |
| data-grid-keybindings-demo | registry:example | A shortcuts dialog generated at runtime from the grid's effective keymap, opened via a toolbar button or the '?' shortcut. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-keybindings-demo.json` |
| data-grid-io-demo | registry:example | 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. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-io-demo.json` |
| data-grid-url-state-demo | registry:example | Sort/filter/search/pagination state synced to the URL via nuqs; wrapped in the Next.js app-router NuqsAdapter (swap for your framework's adapter). | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-url-state-demo.json` |
| data-grid-row-markers-demo | registry:example | rowMarkers modes (none/number/checkbox/both): a pinned-left marker column outside the data index space, switchable at runtime. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-row-markers-demo.json` |
| data-grid-custom-headers-demo | registry:example | 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… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-custom-headers-demo.json` |
| data-grid-custom-markers-demo | registry:example | Custom row marker renderers (renderMarker/renderMarkerHeader): a lucide icon marker reflecting the row selection state, and a select-all header button, while t… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-custom-markers-demo.json` |
| data-grid-pinning-all-sides-demo | registry:example | All four pin zones at once: Name pinned left, Score pinned right, plus an averages row pinned to the top band and a totals row pinned to the bottom band via th… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pinning-all-sides-demo.json` |
| data-grid-pinning-demo | registry:example | Column pinning (left/right), resize (incl. a resizable:false column and a flex:1 long-content column for double-click autosize), and drag-to-reorder, with the … | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pinning-demo.json` |
| data-grid-column-drag-demo | registry:example | 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 … | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-column-drag-demo.json` |
| data-grid-column-layout-demo | registry:example | Column layout persistence: defaultColumnLayout seeds widths/order/pins/hidden from a localStorage snapshot at mount, onColumnLayoutChange writes every resize c… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-column-layout-demo.json` |
| data-grid-actions-demo | registry:example | Action-buttons column pattern: a pinned-right readOnly column whose renderCell composes shadcn Buttons over store actions (startEditing on the row's first edit… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-actions-demo.json` |
| data-grid-row-ops-demo | registry:example | Row operations from two surfaces: toolbar buttons (insert above/below, duplicate, delete on the current selection) and the right-click context menu, with a sid… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-row-ops-demo.json` |
| data-grid-large-data-demo | registry:example | 100k generated rows proving row virtualization: only the windowed rows around the viewport ever mount. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-large-data-demo.json` |
| data-grid-performance-demo | registry:example | 100k generated rows with a top-left FPS meter overlay so the scroll-performance claim is checkable live. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-performance-demo.json` |
| data-grid-pinned-rows-demo | registry:example | Totals and averages rows pinned under the header, recomputed live from the grid's data on every edit, and filter-aware via a toolbar filter menu on the Role co… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pinned-rows-demo.json` |
| data-grid-conditional-styling-demo | registry:example | An HR dataset showing all four value-driven styling surfaces: grid-level getRowClassName/getCellClassName plus per-column cellClassName/headerClassName, all us… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-conditional-styling-demo.json` |
| data-grid-styling-patterns-demo | registry:example | A fully-styled brand column (per-column cellClassName/headerClassName), a fully-styled at-risk row (getRowClassName beyond a bg tint), and a live density/rowHe… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-styling-patterns-demo.json` |
| data-grid-lazy-demo | registry:example | 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… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-lazy-demo.json` |
| data-grid-pagination-demo | registry:example | Client-mode pagination: useDataGridPagination slices a generated dataset and <DataGridPaginationBar /> renders the default footer (first/prev/pages/next/last, … | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pagination-demo.json` |
| data-grid-sort-list-demo | registry:example | Toolbar sort button + popover: add/remove sorts, toggle ascending/descending, and reorder precedence via drag handle or ArrowUp/ArrowDown keyboard. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-sort-list-demo.json` |
| data-grid-presence-demo | registry:example | 3 simulated users move cell/range selections on a timer via useDataGridPresence's setPresenceHighlights (2 in view-space range form, 1 rowId-native), with tool… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-presence-demo.json` |
| data-grid-events-demo | registry:example | Grid with a live inspector panel pretty-printing the latest payload per event: onDataChange, onSelectionChange, onSortChange, onFilterChange/join, onFill, onRo… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-events-demo.json` |
| data-grid-validation-demo | registry:example | Nine rejection paths in one grid: a sync function (Age), hand-rolled sync/async/coercing Standard Schemas (Email, SKU, Price), a soft onInvalid rule (Notes), a… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-validation-demo.json` |
| data-grid-cross-field-demo | registry:example | 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 fla… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-cross-field-demo.json` |
| data-grid-cell-errors-demo | registry:example | A fake saveOrders rejects any committed Quantity over 100 after ~600ms; the onDataChange handler calls actions.setCellErrors to paint the exact cell with the s… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-cell-errors-demo.json` |
| data-grid-i18n-demo | registry:example | 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… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-i18n-demo.json` |
| data-grid-fill-patterns-demo | registry:example | 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 … | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-fill-patterns-demo.json` |
| data-grid-loading-demo | registry:example | Two Switches (loading, rows present) reach all three states of the loading prop: zero rows + loading = viewport-filling skeleton, rows present + loading = a sl… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-loading-demo.json` |
| data-grid-playground-demo | registry:example | Every add-on composed in one grid: toolbar, context menu, fill, undo/redo, keybindings, sort list, import/export, plus independent toggles (row markers, pinned… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-playground-demo.json` |
| data-grid-lazy-react-query-demo | registry:example | 10k rows fetched through a TanStack Query cache: each scrolled window becomes a fetchQuery (deduped, cached for the session, scrolling back never refetches). | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-lazy-react-query-demo.json` |
| data-grid-lazy-swr-demo | registry:example | 10k rows fetched through SWR's global cache via preload: each scrolled window is fetched once per key and shared with any useSWR consumer. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-lazy-swr-demo.json` |
| data-grid-pagination-react-query-demo | registry:example | 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. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pagination-react-query-demo.json` |
| data-grid-pagination-swr-demo | registry:example | 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. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-pagination-swr-demo.json` |
| data-grid-server-side-demo | registry:example | The full remote contract: header-click sort, filter menu, quick search and pagination are all sent to the fake server in one useQuery per view state; edits wri… | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-server-side-demo.json` |
| data-grid-global-shortcuts-demo | registry:example | Undo and redo keep working while focus sits on a custom toolbar - the opt-in useDataGridGlobalShortcuts hook, with the editable-target guard shown live. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-global-shortcuts-demo.json` |
| data-grid-row-reorder-demo | registry:example | Drag rows by the reorder grip or move the active row with reorderRows - both emit one id-keyed move op (a single undo step), and row selection remaps by row id. | `npx shadcn@latest add https://gridcn.vercel.app/r/data-grid-row-reorder-demo.json` |

## For AI agents

```text
You are adding components from @gridcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/gridcn.md) for the component list.
2. Fetch the machine-readable index: https://gridcn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: gridcn).
```