Cell components

For any cell whose content is more than a string, use cell: with renderSnippet or renderComponent.

Snippet

<script lang="ts">
  import { renderSnippet, type ColumnDef } from 'sv-grid-community'

  const columns: ColumnDef<{}, Person>[] = [
    {
      field: 'status',
      header: 'Status',
      cell: (ctx) => renderSnippet(Pill, { value: String(ctx.getValue()) }),
    },
  ]
</script>

{#snippet Pill(p: { value: string })}
  <span class="pill pill-{p.value}">{p.value}</span>
{/snippet}

Snippets are the right choice when the renderer is local to the page and small.

Component

import StatusBadge from './StatusBadge.svelte'
import { renderComponent } from 'sv-grid-community'

{
  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:

type CellContext<TData> = {
  cell: Cell<TData>
  row: Row<TData>
  column: Column<TData>
  table: SvGrid<TData>
  getValue: () => unknown
}

getValue() - the accessed value (post-field / accessorFn).
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.

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 - <div role="progressbar" aria-valuenow>. See demo 10.
Hyperlink - <a href="/people/{ctx.row.original.id}">{ctx.getValue()}</a>.