Data displayGenerated from the public API

ColumnVisibilityMenu

Show and hide columns without losing the user's arrangement.

@luc/ui/data-table

Examples

Default

Shown inside a real table, which is the only context the component renders in.

Six prepared research runs with performance and metadata columns.

BTC-USD	Volatility carry	Paused	Range	2.00	41.7%	-29.1%	341	56.7%	Sep 13
AAPL	Cross-sectional momentum	Live	Stress	1.73	-3.8%	-32.4%	394	40.2%	Aug 24
NDX	Volatility carry	Live	Stress	1.55	23.0%	-26.0%	423	45.5%	Sep 9
NVDA	Mean reversion	Paused	Stress	1.32	-2.0%	-15.0%	532	93.3%	Aug 19
NDX	Mean reversion	Failed	Trend	0.48	25.4%	-13.7%	297	59.9%	Sep 9
MSFT	Trend breakout	Failed	Range	0.33	9.4%	-26.8%	223	23.3%	Sep 21

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  enableColumnVisibility
  toolbar={<DataTableToolbar actions={<ColumnVisibilityMenu />} />}
/>

Usage

import { ColumnVisibilityMenu } from "@luc/ui/data-table";

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  enableColumnVisibility
  toolbar={<DataTableToolbar actions={<ColumnVisibilityMenu />} />}
/>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`ColumnVisibilityMenu`	2 documented props	`({ label, className }: ColumnVisibilityMenuProps) => import("@types/react").JSX.Element`

ColumnVisibilityMenu props

Type: ColumnVisibilityMenuProps

Values the compiler reads from the declaration.

ColumnVisibilityMenu props
Prop	Type	Default	Notes
`className?`	`string \| undefined`	`—`
`label?`	`string \| undefined`	`—`

Guidelines

Reach for it when a table has more columns than the viewport shows and the reader decides which ones matter.
Keep the identifying column pinned through `columnPinning`, so hiding a column never removes the row's name.

Don't

Use it to hide the column the table is sorted or filtered by; hide optional metadata, not the key.

Accessibility

It is a menu button inside the table toolbar. The table keeps the name it was given (`ariaLabel` or `caption`), and the header row it changes stays a real header row.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index