Columns

NOTE

This guide is about the actual column objects that are generated within the table instance and NOT about setting up the column definitions for your table.

Introduction

Column objects are instances generated by the table representing configured columns. The table creates these objects from your column definitions and uses them throughout its internal state management.

Distinguishing Columns from Column Definitions

Column definitions are the configuration objects you provide to the table. Column objects are the runtime instances the table creates from those definitions. Each column object maintains state and provides methods for interacting with that specific column.

Accessing Columns

The table provides several methods to access column objects:

table.getAllColumns() - Returns all columns including parent columns
table.getAllFlatColumns() - Returns all columns in a flat array
table.getAllLeafColumns() - Returns only leaf columns (columns without children)

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

const allColumns = table.getAllColumns()
const flatColumns = table.getAllFlatColumns()
const leafColumns = table.getAllLeafColumns()

Common Properties

Column objects contain several useful properties:

column.id - The unique identifier for the column
column.columnDef - Reference to the original column definition
column.depth - The depth of the column in a column group hierarchy (0-indexed)
column.parent - Reference to the parent column if this column is nested

const column = table.getAllColumns()[0]

console.log(column.id) // "firstName"
console.log(column.depth) // 0
console.log(column.columnDef.header) // Access original definition

Use Headers and Cells for Rendering

When rendering table markup, use APIs that return headers or cells. Column objects are not meant for rendering headers or cells, but header and cell objects contain references to column objects to derive the necessary information for UI rendering.

Headers

Table Sizes