Skip to content
Compositions

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 "@instruments/materia-ui/compositions/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 render - 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)ReactElement<unknown, string | import("react").JSXElementConstructor<any>>

Element that opens the menu.

Composition

Builds on

DropdownMenu