# Cell components For any cell whose content is more than a string, use `cell:` with `renderSnippet` or `renderComponent`. ![How a cell is rendered: a row value flows through a text formatter or a cell renderSnippet / renderComponent callback into the rendered table cell.](https://svgrid.com/docs-media/grid-cell-render.svg) > Live demo: Custom cells + themes - https://svgrid.com/demos/10-custom-cells-and-themes/ ## Snippet The examples on this page run against these rows: ```svelte ``` ```svelte {#snippet Pill(p: { value: string })} {p.value} {/snippet} ``` Snippets are the right choice when the renderer is local to the page and small. ## Component ```ts import StatusBadge from './StatusBadge.svelte' import { renderComponent } from '@svgrid/grid' { field: 'status', cell: (ctx) => renderComponent(StatusBadge, { status: ctx.getValue() }), } ``` Components are the right choice when the renderer is reused across multiple grids, has its own state, or needs lifecycle hooks. ## CellContext The argument the grid passes to your `cell` callback: ```ts type CellContext = { cell: Cell row: Row column: Column table: SvGrid getValue: () => unknown } ``` - `getValue()` - the accessed value (post-`field` / `fieldFn`). - `row.original` - the raw `TData` object. - `row.getAllCells()` - every cell in the row, for sibling reads. - `column.columnDef` - the original `ColumnDef`. - `table` - the headless grid instance, with state and actions. ## Inline string If your cell content is a plain string and you just want to format it, use `format` or `formatter` - not `cell`. See [Text formatting](https://svgrid.com/docs/help/cells/text-formatting/). ## Performance Cell renderers run once per visible cell on each grid update. For large virtualized grids, keep them cheap: - avoid `JSON.stringify` - avoid `new Date()` per cell - pre-compute formatters at module scope - avoid creating new objects inside the snippet template ## Common patterns - **Avatar + name** - return a snippet that pulls first/last name from `ctx.row.original`. See demo 10. - **Status pill** - class-derived background. See demo 10. - **Inline progress bar** - `
`. See demo 10. - **Hyperlink** - `{ctx.getValue()}`. ## A cell that reads the whole row `renderSnippet` passes whatever you give it, so the cell can use fields the column does not name. That is the difference between rendering a value and rendering a record. ```svelte {#snippet PersonCell(props: { row: Person })} {props.row.name.split(' ').map((w) => w[0]).join('')} {props.row.name} {props.row.department} {/snippet} ``` ## Falling back when there is nothing to show A renderer runs for every row including the empty ones, so decide what an absent value looks like. A dash reads as "none"; a blank cell reads as a bug. ```svelte {#snippet CityCell(props: { value: string })} {#if props.value} {props.value} {:else} - {/if} {/snippet} ``` ## See also - [Custom header components](https://svgrid.com/docs/help/columns/custom-header-components/) - [demos/10-custom-cells-and-themes.svelte](https://svgrid.com/demos/10-custom-cells-and-themes/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/cell-components/ . All docs: https://svgrid.com/llms.txt