Docs
CodeRabbit
Cloudflare
Railway
Clerk
AG Grid
OpenRouter
WorkOS
SerpAPI
Netlify
Electric
Prisma
Unkey
Sentry
CodeRabbit
Cloudflare
Railway
Clerk
AG Grid
OpenRouter
WorkOS
SerpAPI
Netlify
Electric
Prisma
Unkey
Sentry
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Legacy API Reference
Table API Reference

FlexRender

Function: FlexRender()

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

Defined in: 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

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

This replaces calling flexRender directly like this:

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