ExamplesFoundations
Built-in cell types
Each built-in type in one grid, plus read-only, a validate rule, and a renderCell override.
One column per built-in cell type, plus the three most common column-level overrides: readOnly,
a sync validate rule, and a renderCell display override that keeps the type's full
edit/sort/clipboard pipeline.
Try each column's editor: Read-only refuses edits, Validated rejects an age under 18, Currency edits the raw number behind its locale format, Link opens with alt+Enter (its javascript: row stays plain text), Notes opens a multi-line editor, and renderCell shows a progress bar.
pnpm dlx shadcn@latest add @gridcn/data-grid-cell-types-demo
What's in the demo
text: plain strings, the default typetext+readOnly: true: displays, refuses editsnumber+options: { min, max }: clamped inputnumber+validate: rejects values under 18, keeps the editor open with the messagecheckbox,select(choices),date(displayFormat)number+renderCell: renders a progress bar. Editing, pasting, and sorting still run the number type's pipeline
Related
- Editing cell types: the full guide: types, validation, async rules
- Custom cell types: when a built-in type doesn't fit