Introduction

gridcn is an editable, high-performance data grid for the shadcn/ui ecosystem: range selection, clipboard paste to and from spreadsheet apps, and a typed column model, using real DOM cells styled entirely with shadcn tokens. Virtualized row rendering (drawing only the rows in view) keeps it smooth at 100k+ rows. See the performance benchmarks. The Terms page defines the words these docs use for grid concepts.

Not an npm package

The shadcn CLI copies the source files from the GitHub registry of this repository directly into your project: npx shadcn add @gridcn/data-grid. There is no dependency to upgrade and no hidden code to work around.

Modular by design

The core data-grid item is the engine: range selection, keyboard, editing, cell types, and the spreadsheet clipboard. Every other feature is a separate registry item (see the navigation), installed with one npx shadcn add. Each item is free and open source under the Apache License 2.0, and depends only on the core.

Project status

gridcn is pre-1.0. See Project status & compatibility for the version policy, the browser and framework support matrix, and how to pull upstream fixes into installed code.

Credits

gridcn builds on and learns from several open-source projects. Thank you.

• shadcn/ui: the registry distribution system (registry.json, the shadcn CLI) that ships gridcn. gridcn's chrome also composes its UI primitives: button, input, select, popover, dropdown-menu, context-menu, calendar, and more.
• Base UI: the headless, accessible primitives underneath the shadcn components gridcn builds on, @base-ui/react.
• diceui (MIT, (c) 2024 Sadman Sakib). gridcn adapts its toolbar, filter, and sort-list UX patterns, and its FPS meter (on the Performance page).
• tablecn (MIT, (c) Sadman Sakib). gridcn adapts the aligned-row layout of its filter and sort popovers, and its join-column pattern.
• @dnd-kit: drag-to-reorder in the filter and sort-list popovers (data-grid-toolbar, data-grid-sort-list). Column drag-to-reorder in the core grid uses native pointer events instead, with no dependency.
• lucide (ISC): the icon set of the grid's chrome: menus, sort indicators, pagination, markers, and dialogs.
• PapaParse (MIT): the CSV parsing behind data-grid-io's import.
• nuqs (MIT): the searchParams-based URL sync that data-grid-url-state builds on.
• Standard Schema (MIT): the vendor-neutral validation interface a cell's validate option accepts: any validator that implements it (zod, valibot, and more).
• Zustand: the state store underneath the core grid and every add-on that needs its own local store, for example data-grid-presence.
• Fumadocs: this documentation site: the content layer, search, and page layout.

Next steps