Column Visibility Picker

ProNew

A columns menu for tables: real checkboxes in a fieldset, search for long lists, Show all, Hide all and Reset, locked columns that cannot be hidden and a guarantee that at least one column stays visible. Use this when people choose which table columns to show.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

searchFrom8

Guide and examples

When to use it

Use it in the toolbar of any data table with more columns than fit, where people decide what they need and want to get back to the defaults.

Do not use it when people reorder or resize columns too. Use a full column manager with drag handles.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`columns`	`{ id, label, locked? }[]`	-	All columns. A locked column is always visible.
`value`	`string[]`	-	Visible column ids (controlled).
`defaultValue`	`string[]`	all	Initial visible ids.
`onValueChange`	`(ids: string[]) => void`	-	Runs on every change.
`defaultVisible`	`string[]`	`defaultValue`	What Reset restores.
`searchFrom`	`number`	`8`	Show the search box from this many columns on.

Accessibility

The panel is a fieldset named Columns; each column is a native-looking checkbox with its label, and locked ones are disabled and read <name>, always shown.
The last visible column cannot be unticked: it is disabled with at least one column must stay visible.
Show all, Hide all (keeps locked and at least one) and Reset are buttons; Reset is disabled at the default.
A polite status reads 5 of 8 columns visible.

Testing

The pattern ships with a Testing Library test (column-visibility-picker.test.tsx) that covers toggling, locked columns, the one-column minimum, show all, hide all and reset.

Guide and examples

When to use it

Use it in the toolbar of any data table with more columns than fit, where people decide what they need and want to get back to the defaults.

Do not use it when people reorder or resize columns too. Use a full column manager with drag handles.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`columns`	`{ id, label, locked? }[]`	-	All columns. A locked column is always visible.
`value`	`string[]`	-	Visible column ids (controlled).
`defaultValue`	`string[]`	all	Initial visible ids.
`onValueChange`	`(ids: string[]) => void`	-	Runs on every change.
`defaultVisible`	`string[]`	`defaultValue`	What Reset restores.
`searchFrom`	`number`	`8`	Show the search box from this many columns on.

Accessibility

The panel is a fieldset named Columns; each column is a native-looking checkbox with its label, and locked ones are disabled and read <name>, always shown.
The last visible column cannot be unticked: it is disabled with at least one column must stay visible.
Show all, Hide all (keeps locked and at least one) and Reset are buttons; Reset is disabled at the default.
A polite status reads 5 of 8 columns visible.

Testing

The pattern ships with a Testing Library test (column-visibility-picker.test.tsx) that covers toggling, locked columns, the one-column minimum, show all, hide all and reset.