ExamplesFoundations
Custom cell type
A worked currency type (plain-number storage, cached locale display, symbol-stripping input).
The worked example from the custom-cell-types guide: a currency type registered via the
cellTypes prop. Storage is a plain number | null (a serializable primitive, the same lesson
the built-in date type follows with ISO strings). Display runs through a cached
Intl.NumberFormat. fromText strips currency symbols and normalizes decimal separators.
Edit a USD or EUR price cell and type a value with a currency symbol (e.g. "$1,234.56") and press Enter: the custom cell type strips the symbol back to a plain number before it commits.
pnpm dlx shadcn@latest add @gridcn/data-grid-custom-cell-demo
What's in the demo
CellTypecontract:Cell,Editor,toText,toDisplayText,fromText(never throws),clearValue,isEmpty,compare,alignuseCellEditor: the grid's text-editor primitive: draft state, end-caret focus, one-shot commit guard, and the Enter/Escape/blur bindings, so the custom editor behaves identically to the built-ins- The typed
optionsprop onCellandEditor: no cast oncolumn.options - Formatter cache keyed on serialized
options:optionsliterals are re-created every render, so identity keying misses cellTypes={{ currency }}: the prop merges over the built-ins, which keep working unnamed- Two locale variants (
en-US/USD,de-DE/EUR) from one type viaoptions
Related
- Custom cell types: the full contract, member by member
- Built-in cell types: the types this one extends