Chapter 19: Columns Guide

Core Idea

column objects (not to be confused with column definitions, the config you write) hold state-derived metadata but aren't meant to render markup directly — for actual rendering, use the header/cell objects that reference them, not the column object itself.

Key Concepts

• Access a column from wherever you already are: cell.column, header.column, or via table APIs: table.getColumn('id') (single, by id), table.getAllColumns() (all), plus feature-specific variants (getAllFlatColumns, getAllLeafColumns, getCenterLeafColumns, getStartVisibleLeafColumns, ...) that come into play with column visibility/pinning.
• column.id is always defined (explicitly, or derived from accessorKey/header — see Column Definitions Guide) and unique.
• column.columnDef is a live reference back to the original column definition object used to create it.
• Grouped-column properties: column.columns (child columns, for a group column), column.depth (header-row index the group belongs to), column.parent (parent column, undefined for top-level columns).
• Don't reach for column objects to render headers/cells — that's what header/cell objects are for. Do reach for column objects when building something like a column-visibility toggle menu, where you just need to list/iterate columns.

Code Examples

const column = table.getColumn('firstName')
const allColumns = table.getAllColumns()

// a visibility-toggle menu is a legitimate direct use of column objects:
allColumns.map((col) => (
  <label key={col.id}>
    <input type="checkbox" checked={col.getIsVisible()} onChange={col.getToggleVisibilityHandler()} />
    {col.id}
  </label>
))

• What it demonstrates: the one common case where you do map over raw column objects directly — a settings/visibility UI, as opposed to the table body itself.

Key Takeaways

1. Render header/cell objects, not column objects — columns describe structure/state, not markup.
2. table.getColumn(id) for a single lookup beats filtering getAllColumns() yourself.
3. column.parent/column.columns/column.depth only matter once you use grouped (columnHelper.group) column definitions.

Connects To

• Column Definitions Guide: how a column's id and columnDef are actually set up.
• Column Visibility (React) Guide: the toggle-menu pattern above, in full.
• Headers Guide / Cells Guide: the objects you actually render from.