Chapter 16: Cells Guide

Core Idea

Cells come from rows (row.getAllCells() / row.getVisibleCells()), each maps to one <td>, and rendering custom cell column defs always goes through flexRender, never a manual type-check on the column def.

Key Concepts

• cell.id = ${row.id}_${column.id} (with extra characters appended during grouping/aggregation).
• Every cell holds a reference to its parent row and column.
• Value access mirrors rows: cell.getValue() (value or undefined) and cell.renderValue() (value or renderFallbackValue) are shortcuts for row.getValue()/row.renderValue(), bound to the cell's own column, taking no arguments. To read a different column's value from inside a cell, go through the row: cell.row.getValue('otherColumnId').
• cell.row.original reaches the untouched source row object from any cell, regardless of which column that cell belongs to.
• Rendering custom cells: a cell column option that returns JSX/a component must be rendered with flexRender(cell.column.columnDef.cell, cell.getContext()) — calling cell.getValue() alone only gets you the raw accessed value, not custom markup.
• Cell Spanning (optional cellSpanningFeature): adjacent cells can merge into one rendered cell; a cell reporting span === 0 is covered by another cell's span and must be skipped in the render loop, not rendered as an empty <td> (see Cell Spanning Guide for the full pattern).

Code Examples

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

<tr>
  {row.getVisibleCells().map((cell) => (
    <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
  ))}
</tr>

• What it demonstrates: the one correct way to render any cell, whether its cell option is a plain accessor, a string, or a component — flexRender handles all three uniformly.

Key Takeaways

1. Always render through flexRender(cell.column.columnDef.cell, cell.getContext()), not cell.getValue() alone, once a column defines a custom cell renderer.
2. cell.getValue()/renderValue() are column-bound and take no args — cross-column reads go through cell.row.getValue(otherId).
3. With cell spanning enabled, skip any cell whose span is 0 in the render loop.

Connects To

• Rows Guide: row.getValue/renderValue, which cell APIs shortcut.
• Headers Guide: the <thead> equivalent of this chapter.
• Cell Spanning (React) Guide: the full merged-cell rendering pattern.