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.

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.

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.

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

Related

• Density
• useDataTable options
• Column options