Column visibility

Every data column can be hidden and shown again from the toolbar’s View popover or from its own header menu. Start with some hidden, keep one always on, and let persist remember the choice.

Open in playground ↗ GitHub


Noah Müller	Data	Lead	Invited	Free	$0.00	1	Jan 30, 2026
Arjun Okafor	Growth	Lead	Paused	Enterprise	$3,950.00	50	Nov 13, 2024
Vihaan Bose	Sales	Lead	Churned	Free	$0.00	1	Mar 2, 2026
Olivia Nair	Growth	Manager	Churned	Enterprise	$0.00	43	Jun 9, 2023
Meera Okafor	Research	Director	Active	Team	$841.00	29	Sep 27, 2026
Omar Rossi	Platform	PM	Churned	Enterprise	$0.00	51	Aug 22, 2026
Leila Iyer	Platform	PM	Paused	Team	$1,711.00	59	Jan 4, 2026
Omar Garcia	Finance	Lead	Active	Free	$0.00	1	Sep 11, 2024
Kavya Okafor	Design	Intern	Active	Free	$0.00	1	Dec 8, 2023
Ananya Bose	Finance	Director	Invited	Free	$0.00	1	Jan 12, 2025

60 rows

Rows per page

Page 1 of 6

import { DataGrid, createDataGridColumns } from "@/components/ui/data-grid";

import {
  makePeople,
  PLAN_OPTIONS,
  STATUS_OPTIONS,
  type Person,
} from "@/lib/data-grid-demo-data";

const col = createDataGridColumns<Person>();

const columns = col.columns([
  // Always shown: no "Hide column" in its menu and no entry in the View list.
  col.text("name", { header: "Name", enableHiding: false, size: 180 }),
  col.text("email", { header: "Email", size: 220 }),
  col.text("team", { header: "Team", size: 120 }),
  col.text("role", { header: "Role", size: 120 }),
  col.enum("status", { header: "Status", options: STATUS_OPTIONS, size: 120 }),
  col.enum("plan", { header: "Plan", options: PLAN_OPTIONS, size: 110 }),
  col.currency("mrr", { header: "MRR", currency: "USD", size: 120 }),
  col.number("seats", { header: "Seats", size: 90 }),
  col.date("joinedAt", { header: "Joined", size: 130 }),
  col.text("country", { header: "Country", size: 130 }),
  col.text("notes", { header: "Notes", size: 220 }),
]);

const data = makePeople(60, 18);

/** Three columns start hidden. Open View to search and tick them back on, or hide more from a header menu. */
export default function DataGridVisibility() {
  return (
    <DataGrid
      data={data}
      columns={columns}
      getRowId={(row) => row.id}
      selection={false}
      initialState={{ columnVisibility: { email: false, country: false, notes: false } }}
      toolbar={{ grouping: false, density: false, export: false, fullscreen: false }}
    />
  );
}

Use it

View in the toolbar opens DataGridViewOptions: a search box, a checkbox per column, Show all and Reset view. The button carries an “n hidden” badge while anything is hidden. Each row shows the column’s label, a pin icon if it is pinned, and an eye for its state. Only columns that can be hidden are listed; the utility columns (select, expander, rowNumber, actions) never are.

Reset view does more than visibility: without persist it resets visibility, order, sizes and pinning to the column definitions; with persist it calls grid.views.reset(), which also restores sorting, grouping, density and page size, and drops the active saved view.

The ⋮ menu on a header ends with Hide column. Get it back from View.

Start hidden

<DataGrid initialState={{ columnVisibility: { notes: false, country: false } }} />

columnVisibility maps column ids to booleans; anything not listed is visible. With persist on, the user’s last choice wins over initialState.

Always visible

col.text("name", { header: "Name", enableHiding: false })

The column disappears from the View list and loses the Hide column item.

In code

grid.table.state.columnVisibility             // { notes: false }
grid.table.getColumn("notes")?.toggleVisibility()
grid.table.setColumnVisibility({ notes: false, country: false })
grid.table.toggleAllColumnsVisible(true)
grid.table.getVisibleLeafColumns()

How it behaves

A hidden column keeps its filter and its place in a sort, and the chip stays in the toolbar; clear it from the chip or show the column again.
Exports take visible columns by default (visibleOnly: true); pass grid.exportCsv(name, { visibleOnly: false }) for every exportable column.
Hiding every child of a group header hides the group.
Visibility is part of the persisted view and of saved views, so with persist the choice comes back on the next visit and can be named; see persistence.
The grouping bar, filter chips and View list all use the column’s label (or header string), so give a column with a function header a label.

Options

Option	Type	Default	What it does
`enableHiding` (column)	boolean	`true`	`false` keeps the column always on.
`initialState.columnVisibility`	object	`{}`	Column ids mapped to `false` start hidden.
`columns`	the toolbar	`true`	Show the View button: `toolbar={{ columns: false }}` hides it.
`persist`	boolean, string or object	off	Remember visibility (and the rest of the view).
`table.enableHiding`	boolean	`true`	Hiding for the whole grid.
Labels	strings	English	`view`, `searchColumns`, `hidden`, `showAll`, `resetView` and `hideColumn` in `labels`; see internationalisation.