FlexRender

function FlexRender<TFeatures, TData, TValue>(props):
  | string
  | number
  | bigint
  | boolean
  | Iterable<ReactNode, any, any>
  | Promise<AwaitedReactNode>
  | Element
  | null
  | undefined;

Defined in: src/FlexRender.tsx:97

Simplified component wrapper of flexRender. Use this utility component to render headers, cells, or footers with custom markup. Only one prop (cell, header, or footer) may be passed.

Type Parameters#

TFeatures#

TFeatures extends TableFeatures

TData#

TData extends RowData

TValue#

TValue extends unknown = unknown

Parameters#

props#

FlexRenderProps<TFeatures, TData, TValue>

Returns#

| string | number | bigint | boolean | Iterable<ReactNode, any, any> | Promise<AwaitedReactNode> | Element | null | undefined

Example#

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

This replaces calling flexRender directly like this:

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