shadcn.io is not affiliated with official shadcn/ui
Column Visibility Table Block for React
A shipment table with a Columns popover of checkboxes: tick a column to show or drop it, one always stays on, a badge counts what is hidden, and Reset restores the default six of eight.
Installation
Overview
Let people choose which columns they see, with this column visibility table for React with Base UI. A compact header holds a Columns Button with a Badge that says how many columns are hidden. It opens a Popover with a Checkbox for each of eight columns (reference, origin, destination, carrier, weight, ETA, status and cost), a count ("6 of 8 shown") and a Reset. Inside a hairline frame with a plus mark on each corner, a band names the table and says in words what changed ("Carrier on, 7 of 8 columns shown."), over a native table of eight consignments. Ticking a box adds or drops that column at once, and the rows never change height, so nothing below the table moves. One column always stays on. On a phone the three most useful of the ticked columns fit, and the popover marks the rest as waiting for a wider screen. It's built from Popover, Checkbox, Button, Badge and Guides, with a CSS entrance only. For shipment lists, admin tables and any grid with more columns than most people need.
FAQ
How do I use my own columns and rows?
Edit COLUMNS (each column's key, label, whether its numbers sit at the end and a phone rank for narrow screens), SHIPMENTS and the Value helper that draws a cell for each key. START is the set that shows first and what Reset returns to. The first ticked column is drawn as the row header, so a row is always named by something, whichever columns are on. Dates are ISO strings in UTC, formatted by day, so they read the same for every visitor.
What stops someone hiding every column?
The last ticked checkbox is disabled, with its box still shown ticked, and toggle refuses an empty set as well, so the table can never be left without a column. As soon as a second column is ticked the box is available again. Reset is always in the popover; when the columns are already the default it says so by being quiet (aria-disabled) and a press does nothing.
What happens on a phone?
A phone fits three columns, so the table shows the three most important of the ones ticked, ranked by each column's phone number (reference, status and ETA to begin with), in the table's own order. Ticking a column that doesn't fit still counts and the popover says "Wider screens" beside it, so nothing seems broken. The popover lists all eight columns at every width, and the three that fit never need a sideways scroll.
Does the table change height when columns come and go?
No. Every cell has the same fixed height, so a row is the same size with one column or eight, and the status line under the title has its own reserved line. Columns do change the table's width, so the cells you can see shift sideways as columns appear. If a column can hold long text, give it truncate and a width so a row never grows a second line.
Is the popover usable from the keyboard?
Yes. The Columns button opens with Enter or Space and focus moves into the popover; Tab and Space tick boxes, Escape closes it and focus returns to the button. Each box is named by its column ("Carrier"), the popover is not modal, so the table behind it stays readable, and the polite line under the table title announces each change.
What stays local, and how do I remember the choice?
The choice lives in one useState of column keys: nothing is saved or sent. To keep it, store that array (in local storage, or with the user's settings) and pass it as the initial state; the rest, including the badge, the count, the phone ranking and the status line, follows from it. To load only the columns that are on, send the array with your request for rows.
Related
- Pro
Column Reorder Table
Columns and pagingA pipeline table with a Column order list beside it: Move earlier and Move later buttons reorder the columns and announce the move, a grip drags as an extra, and Reset restores the default order.
- Pro
Resizable Columns Table
Columns and pagingA translation workbench table whose column dividers are focusable separators: drag them or use the arrow keys (Shift for bigger steps, Home to reset), with minimum and maximum widths, truncated cells and a Reset widths button.
- Pro
Density Table
Columns and pagingA page list with a three-way density toggle (Compact, Comfortable, Spacious) that sets row height and text size together, in a fixed-height region so the block never changes height, with a line that says what the mode does.
- Pro
Pinned Columns Table
Columns and pagingA vehicle log of ten columns whose first and last stay pinned while the rest scroll under them, with a shadow that appears only when there is something to scroll under and a switch that turns the pins off.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Chip Filters Table
Sort and searchA bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.