gridcn1.2.2
ExamplesFoundations

Minimal grid

The quick-start minimum (the core item alone, defaultData, zero app-side state).

The smallest working grid: one registry item, defaultData, and no app-side state. The grid owns its rows internally. You only reach for data + onDataChange when you need to persist, fetch, or react to edits.

Name
Age
Active
Ada Lovelace
28
Grace Hopper
34
Margaret Hamilton
31
pnpm dlx shadcn@latest add @gridcn/data-grid-minimal-demo

What's in the demo

  • <DataGrid> convenience wrapper: header, body, and viewport composed for you
  • defineColumns with three built-in types: text, number, checkbox
  • defaultData: seed rows with no data/onDataChange wiring
  • getRowId: stable row identity from the data itself
  • className: the grid takes a CSS box. Here w-full h-[240px]

Foundations

The four starting grids (minimal, hero, every cell type, and a worked custom cell).

Editable hero grid

Every built-in cell type, range selection, the fill handle add-on, and native clipboard.

On this page

What's in the demoRelated