Skip to content
← Inventory

DataGridColumnVisibility

Dropdown of checkbox items that show/hide the hideable columns of a TanStack Table. Only lists columns with an accessor that report getCanHide(), labelling each from columnDef.meta.headerTitle (falling back to the column id). Toggling a column keeps the menu open so several can be flipped at once.

Usage

import { DataGridColumnVisibility } from "@desk/ui/components/data-grid-column-visibility";

Best practices

  • Pass the TanStack table instance directly (this part does NOT read DataGrid context) plus a trigger element rendered via asChild — supply your own Button, it renders none.

  • Only accessor columns reporting getCanHide() appear; set enableHiding: false on a column def to keep it always-visible and out of this menu.

  • Label each column via columnDef.meta.headerTitle — the menu falls back to the raw column id when it's missing.

Props

PropTypeDefaultDescription
table(required)Table<TData>

The TanStack table instance whose column visibility is controlled.

trigger(required)ReactNode

Element that opens the menu (rendered via asChild).

Composition

Builds on

DropdownMenu