# Cell renderer patterns Every supported shape for the `cell:` slot on a `ColumnDef`, with the trade-offs for each. ## The four shapes `cell:` accepts one of: | Shape | When to use | | ---------------------------------- | -------------------------------------------------------------- | | `string` | A literal placeholder ("TBD"). Rare. | | `(ctx) => string \| number` | Computed text, no DOM control. | | `(ctx) => renderSnippet(...)` | Inline Svelte 5 snippet defined in the same file. | | `(ctx) => renderComponent(...)` | Mount a real Svelte component imported from another file. | `ctx` is `{ row: Row, column, table, getValue }` - the same context TanStack-style tables emit. Everywhere below `ctx.row.original` is your `TData` row. ## 1. Literal string The examples on this page run against these rows: ```svelte ``` ```ts { field: 'amount', header: 'Amount', cell: 'TBD' } ``` Used when bootstrapping. The cell renders the literal across every row. ## 2. Computed function ```ts { field: 'amount', header: 'Amount', align: 'right', cell: (ctx) => { const n = ctx.row.original.amount if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M` if (n >= 1_000) return `$${Math.round(n / 1_000)}k` return `$${n}` }, } ``` Cheapest custom renderer. No DOM control - the grid wraps the return value in its own ``. Use for formatted text, status acronyms, computed totals. For built-in formats (currency, percent, date, units) prefer the declarative [`format:`](https://github.com/sv-grid/sv-grid/blob/main/docs/reference/ColumnDef.md#format) field - it runs through `Intl.NumberFormat` cached per locale. ## 3. Inline snippet ```svelte {#snippet Pill(props: { sale: Sale })} {props.sale.up ? '▲' : '▼'} ${props.sale.amount.toLocaleString()} {/snippet} ``` The snippet is local to the component, with access to its scope. Best for one-off renderers that need DOM control but don't merit their own file. The styles need `:global` because the snippet renders into the grid's body, not the consumer's component subtree. ## 4. Imported component ```svelte ``` ```svelte {label} ``` Use when the renderer is reused across columns or grids, or when it carries its own non-trivial state. ## Headers, footers, editors - same shapes The `header:` and `footer:` fields on `ColumnDef` accept the same four shapes - any function-valued header is rendered via the same path. So you can plug your own `` component without forking ``. Custom inline editors use `cellEditor:` and follow the `(ctx) => renderSnippet(...)` pattern - see the [`84-editor-types` demo](https://svgrid.com/demos/84-editor-types/). ## Try it `renderSnippet(snippet, params)` is the whole custom-cell API. The snippet gets whatever you pass it, so a cell can read the row rather than just the value - which is what a status pill or a coloured figure needs. ```svelte {#snippet Money(props: { row: Person })} {props.row.salary.toLocaleString('en-US', { style: 'currency', currency: 'USD' })} {/snippet} {#snippet Dept(props: { row: Person })} {props.row.department} {/snippet} renderSnippet(Dept, { row: ctx.row.original }) }, { field: 'salary', header: 'Salary', width: 140, cell: (ctx) => renderSnippet(Money, { row: ctx.row.original }) }, ] satisfies GridColumns} /> ``` ## See also - [Sparkline-cells recipe](https://svgrid.com/docs/recipes/sparkline-cells/) - a non-trivial component cell - [Heatmap-cells recipe](https://svgrid.com/docs/recipes/heatmap-cells/) - computed-function cell with conditional formatting - [Barcode-cells recipe](https://svgrid.com/docs/recipes/barcode-cells/) - real SVG rendered per row - [Conditional row coloring](https://svgrid.com/docs/recipes/conditional-row-coloring/) - styling without a custom renderer - [`` reference](https://github.com/sv-grid/sv-grid/blob/main/docs/reference/SvGrid.md) - `renderSnippet` / `renderComponent` helpers --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/cell-renderer-patterns/ . All docs: https://svgrid.com/llms.txt