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
id: string
id: string
The unique ID for the cell across the entire table.
getValue
getValue: () => any
getValue: () => any
Returns the value for the cell, accessed via the associated column's accessor key or accessor function.
renderValue
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
row: Row<TData>
row: Row<TData>
The associated Row object for the cell.
column
column: Column<TData>
column: Column<TData>
The associated Column object for the cell.
getContext
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:
flexRender(cell.column.columnDef.cell, cell.getContext())
flexRender(cell.column.columnDef.cell, cell.getContext())
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.