Editable hero grid

The hero grid: an editable table with every built-in cell type in one composition. It uses the split composition (DataGridProvider + DataGridRoot + header/body parts) to show the parts. The data-grid-fill add-on is passed through the provider's plugins prop; the plugin's own Mount member renders inside DataGridRoot, so no extra child is needed.

pnpm dlx shadcn@latest add @gridcn/data-grid-demo

What's in the demo

• text, number (with min/max options), checkbox, select (choices), date (displayFormat): all seven columns, flex-sized
• Range selection: click-drag to select a rectangular range
• useDataGridFill: the fill-handle plugin (overlay + drag engine)
• Native clipboard: Ctrl/Cmd+C/V over the selection
• defaultData via generateDemoRows(12): seed rows, zero app-side state

Related

• Fill handle: the add-on this demo wires
• Clipboard: copy/paste behavior and its overrides
• Built-in cell types: one column per type