FlexRender (Alpine) Guide

Alpine column definitions commonly contain strings or functions that return HTML strings for header, cell, footer, and aggregatedCell. The rendering utilities resolve those definitions with the correct table context.

FlexRender vs flexRender#

FlexRender is the recommended table-aware wrapper. Pass exactly one cell, header, or footer object:

<template x-for="header in headerGroup.headers" :key="header.id">
  <th>
    <span x-show="!header.isPlaceholder" x-html="FlexRender({ header })"></span>
  </th>
</template>

<template x-for="cell in row.getVisibleCells()" :key="cell.id">
  <td x-html="FlexRender({ cell })"></td>
</template>

Import FlexRender from @tanstack/alpine-table and expose it to the Alpine data scope, or use table.FlexRender on a table created by the adapter. For footer groups, call FlexRender({ footer: header }).

For cells, FlexRender selects aggregatedCell for aggregated rows, falls back to cell, and returns null for grouping placeholders.

flexRender is the lower-level function for a definition and context:

import { flexRender } from '@tanstack/alpine-table'

flexRender(cell.column.columnDef.cell, cell.getContext())

It invokes function renderers and passes non-functions through unchanged. It does not select grouped-cell renderers or suppress grouping placeholders.

Because x-html inserts HTML, only render markup produced by code you trust. Escape or sanitize untrusted data before including it in a renderer result. Use x-text or normal DOM bindings instead when a renderer only needs to display text.

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