FlexRender (Svelte) Guide

Svelte column definitions can contain strings or renderer functions that return primitive values, component configurations, or snippet configurations. The FlexRender component resolves those forms reactively with the correct cell or header context.

FlexRender and the Lower-Level Form#

Svelte exports the FlexRender component, not a separate lowercase flexRender function. For normal table markup, import the component and pass exactly one cell, header, or footer object:

<script lang="ts">
  import { FlexRender } from '@tanstack/svelte-table'
</script>

{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
  <tr>
    {#each headerGroup.headers as header (header.id)}
      <th>
        {#if !header.isPlaceholder}
          <FlexRender {header} />
        {/if}
      </th>
    {/each}
  </tr>
{/each}

{#each table.getRowModel().rows as row (row.id)}
  <tr>
    {#each row.getVisibleCells() as cell (cell.id)}
      <td><FlexRender {cell} /></td>
    {/each}
  </tr>
{/each}

For cells, FlexRender selects aggregatedCell for aggregated rows, falls back to cell, and renders nothing for grouping placeholders. Use <FlexRender footer={header} /> for a footer-group header object.

App tables created with createTableHook also expose FlexRender through the table and context-bound app components. The direct import shown above works for both ordinary and app tables.

The older lower-level component form accepts content and context explicitly:

<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />

Prefer the table-object shorthand because it makes the grouped-cell decisions for you.

Components and Snippets in Column Definitions#

Wrap Svelte components with renderComponent() and snippets with renderSnippet() before returning them from a column renderer:

<script lang="ts">
  import { renderComponent, renderSnippet } from '@tanstack/svelte-table'
  import StatusCell from './StatusCell.svelte'
  import { nameSnippet } from './snippets.svelte'

  const columns = columnHelper.columns([
    columnHelper.accessor('status', {
      cell: ({ getValue }) =>
        renderComponent(StatusCell, { status: getValue() }),
    }),
    columnHelper.accessor('name', {
      cell: ({ getValue }) => renderSnippet(nameSnippet, getValue()),
    }),
  ])
</script>

A snippet used with renderSnippet must accept one parameter. FlexRender mounts the resulting component or invokes the snippet with the supplied props or parameter.

Placeholder headers remain the template's layout decision. Check header.isPlaceholder unless a spanning-header layout intentionally renders the placeholder.