Tanstack table dynamic columns

Examples

Want to skip to the implementation?

Tanstack table hide column by default

Check out these examples:

Other Examples

API

Column Visibility API

Column Visibility Guide

The column visibility feature allows table columns to be hidden or shown dynamically. In previous versions of react-table, this feature was a static property on a column, but in v8, there is a dedicated columnVisibility state and APIs for managing column visibility dynamically.

Column Visibility State

The columnVisibility state is a map of column IDs to boolean values.

A column will be hidden if its ID is present in the map and the value is false. If the column ID is not present in the map, or the value is true, the column will be shown.

Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the initialState option.

Note: If columnVisibility is provided to both initialState and state, the state initialization will take precedence and initialState will be ignored.

Do not provide columnVisibility