Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Menu Column Visibility

ProNew

The Columns menu of a table: checkbox items that keep the menu open, a protected last column, a reset and a trigger that says how many columns are shown.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this above any table whose columns people want to show or hide. Keeping the menu open turns a five-click task into one visit.

Do not use it to reorder columns (use drag and drop) or for fewer than four columns, which are better all visible.

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.

Log in Get Pro for $35

Props

MenuColumnVisibility

Prop	Type	Default	Description
`columns`	`{ id, label }[]`	-	All columns.
`visible`	`string[]`	-	Ids currently shown.
`onVisibleChange`	`(visible: string[]) => void`	-	Called with the new list in column order.
`defaults`	`string[]`	`all`	Ids restored by Reset to default.

Accessibility

Items are menuitemcheckbox with aria-checked; toggling prevents the default close so several columns can be changed in one visit.
The only visible column is disabled, so the table can never end up with no columns.
The trigger states the count ("Columns (3/4)") in its accessible name.

Keyboard

Key	Action
Enter or Space on the trigger	opens the menu
Arrow keys	move between columns
Space or Enter	toggles a column (the menu stays open)
Escape	closes

Testing

The pattern ships a Testing Library test (menu-column-visibility.test.tsx) that covers the count, staying open while toggling, the protected last column and reset.