Markdown Open in ChatGPT Open in Claude Edit on GitHub

Column visibility

A "Columns" toggle in the toolbar lets users show or hide columns. Each column-actions menu also has a Hide item for the same effect.

Column visibilityToggle columns from the toolbar or the column-actions menu.

GitHub


Ava	Thompson	Owner	Engineering	active	22	$45,000
Liam	Nguyen	Admin	Marketing	inactive	25	$47,137
Noah	Silva	Editor	Design	pending	28	$49,274
Emma	Carter	Viewer	Sales	active	31	$51,411
Olivia	Rossi	Owner	Support	inactive	34	$53,548
William	Walker	Admin	Engineering	pending	37	$55,685
Sophia	Patel	Editor	Marketing	active	40	$57,822
James	Muller	Viewer	Design	inactive	43	$59,959
Isabella	Park	Owner	Sales	pending	46	$62,096
Lucas	Reyes	Admin	Support	active	49	$64,233
						$4,120,536

tsx

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
})

return <DataTable table={table} />

Initial hidden columns

Hide columns from the start with initialState.columnVisibility, mapping a column id to false.

tsx

const table = useDataTable({
  data,
  columns,
  initialState: {
    columnVisibility: { startDate: false },
  },
})

Prevent hiding a column

Use TanStack's enableHiding: false on a column definition to keep it always visible. It will not appear in the toggle or expose a Hide item.

tsx

const columns = [
  { accessorKey: "firstName", enableHiding: false },
]

Always-on columns

Columns with enableHiding: false stay rendered regardless of toolbar or menu actions.

Set meta.visibleInShowHideMenu: false to keep a column out of the show / hide columns menu while still letting it be hidden from code (column.toggleVisibility).

DensityDensity controls the vertical padding of table rows and the padding around the toolbars.useDataTable optionsuseDataTable(options) accepts everything TanStack's TableOptions accepts (controlled state, on*Change, manual* flags, getRowId, getSubRows, initialState, …; column pinning in state/initialState keeps the left/right shape) plus the data-table options below.Column optionsPer-column configuration lives on the standard TanStack columnDef.meta object, which the table augments with the fields below (fully typed wherever meta is read).

← PreviousAdvanced filterSet enableAdvancedFilter: true to add a toolbar button that opens a dialog where users build compound filter rules — multiple conditions joined by All (AND) or Any (OR) logic.Next →Column orderingSet enableColumnOrdering: true to add a drag grip to each header.

Column visibility

Initial hidden columns

Prevent hiding a column

Leaving a column out of the menu

Related