Columns Guide

Header API

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.

This quick guide will discuss the different ways you can retrieve and interact with column objects in TanStack Table.

You can find the column objects in many places. They are often attached

Before you reach for one of the table instance APIs, consider if you actually need to retrieve either headers or cells instead of columns. If you are rending out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the header and cell objects will contain references to these column objects from which they can derive the necessary information to render their UI.

const column = cell.column; // get column from cell
const column = header.column; // get column from header

const column = cell.column; // get column from cell
const column = header.column; // get column from header

There are dozens of table instance APIs you can use to retrieve columns from the table instance. Which APIs you will use will depend entirely on which features you are using in your table and your use-case.

If you need to just get a single column by its ID, you can use the table.getColumn API.

const column = table.getColumn('firstName');

const column = table.getColumn('firstName');

The simplest column API is table.getAllColumns, which will return a list of all columns in the table. There are dozens of other column APIs that are affected by other features and the state of the table that come alongside this API though. table.getAllFlatColumns, table.getAllLeafColumns, getCenterLeafColumns, table.getLeftVisibleLeafColumns are just some examples of other column APIs that you might use in tandem with the column visibility or column pinning features.

Column objects are not actually meant to be used to render out the table UI directly, so they are not associated 1-to-1 with any <th> or <td> elements in your table, but they contain a lot of useful properties and methods that you can use to interact with the table state.

Every column must have a unique id defined in their associated Column Definition. Usually, you define this id yourself, or it is derived from the accessorKey or header properties in the column definition.

A reference to the original columnDef object that was used to created the column is always available on the column object.

There are a few properties on column objects that are only useful if the column is part of a nested or grouped column structure. These properties include:

• columns: An array of child columns that belong to a group column.
• depth: The header group "row index" that the column group belongs to.
• parent: The parent column of the column. If the column is a top-level column, this will be undefined.

There are dozens of Column APIs that you can use to interact with the table state and extract cell values from the table based on the state of the table. See each features column API documentation for more information.

Don't necessarily use column objects to render headers or cells directly. Instead, use the header and cell objects, as discussed above.

But if you are just rendering a list of columns somewhere else in your UI for something like a column visibility menu or something similar, you can just map over a columns array and render out the UI as you normally would.