TanStackTable v8
Auto
Framework
Version
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples

Cell APIs

These are core options and API properties for all cells. More options and API properties are available for other table features.

Cell API

All cell objects have the following properties:

id
tsx
id: string

id: string

The unique ID for the cell across the entire table.

getValue
tsx
getValue: () => any

getValue: () => any

Returns the value for the cell, accessed via the associated column's accessor key or accessor function.

renderValue
tsx
renderValue: () => any

renderValue: () => any

Renders the value for a cell the same as getValue, but will return the renderFallbackValue if no value is found.

row
tsx
row: Row<TData>

row: Row<TData>

The associated Row object for the cell.

column
tsx
column: Column<TData>

column: Column<TData>

The associated Column object for the cell.

getContext
tsx
getContext: () => {
  table: Table<TData>
  column: Column<TData, TValue>
  row: Row<TData>
  cell: Cell<TData, TValue>
  getValue: <TTValue = TValue,>() => TTValue
  renderValue: <TTValue = TValue,>() => TTValue | null
}

getContext: () => {
  table: Table<TData>
  column: Column<TData, TValue>
  row: Row<TData>
  cell: Cell<TData, TValue>
  getValue: <TTValue = TValue,>() => TTValue
  renderValue: <TTValue = TValue,>() => TTValue | null
}

Returns the rendering context (or props) for cell-based components like cells and aggregated cells. Use these props with your framework's flexRender utility to render these using the template of your choice:

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

flexRender(cell.column.columnDef.cell, cell.getContext())
Edit on GitHub
Row
Column Filtering
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.