FlexRender (Octane) Guide

Column definitions can contain Octane nodes or renderer components for header, cell, footer, and aggregatedCell. Use TanStack Table's rendering utilities so function components become Octane element descriptors with the correct typed context.

FlexRender vs flexRender#

FlexRender is the recommended TSRX component. Give it exactly one table object: cell, header, or footer.

<table.FlexRender header={header} />
<table.FlexRender cell={cell} />
<table.FlexRender footer={header} />

The table instance exposes FlexRender, and the component can also be imported directly from @tanstack/octane-table. Rendering it as a component gives Octane the correct component scope while preserving strings, numbers (including 0), and pre-created descriptors.

For cells, FlexRender selects aggregatedCell when appropriate, falls back to cell, and suppresses grouping placeholder cells.

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

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

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

Octane function components are converted with createElement; non-function nodes pass through unchanged. Unlike React, Octane has no class-component, forwardRef, or exotic-component branch. The lower-level function also does not select grouped-cell renderers or suppress grouping placeholders.

Use FlexRender in normal TSRX table markup. Check header.isPlaceholder before rendering a header unless a spanning layout intentionally uses the placeholder, and pass footer-group Header objects through the footer prop.