Column-visibility addon

Let users choose the columns they need

A content operations table gives reviewers a compact view without turning the semantic table into a data-grid widget.

Scenario

Reviewers need a focused table

The user goal is to hide fields that are not relevant right now, keep sorting available, and still know how many columns are visible.

column-visibility native checkboxes hidden columns

Try it

Hide and restore columns

Uncheck Audience or Owner and confirm the column disappears.
Sort by Due date while some columns are hidden.
Try to hide every column and notice that one column remains available.
Use Show all columns to restore the full table.

Example

Editorial review board

Visible columns

Asset Owner Audience Due date Risk

Column status will appear after initialization.

Editorial review board

Launch checklist	Mina	Customers	9 Jul 2026	Medium
Incident template	Owen	Support	11 Jul 2026	High
Quarterly recap	Rhea	Leadership	18 Jul 2026	Low

Accessibility notes

What the helper changes

Column controls are native checkboxes with visible labels.
Hidden columns use the HTML hidden attribute.
The helper prevents hiding every column by default.
Column-count changes are announced through a polite status region.
The sortable table remains semantic and keyboard-sortable.

Developer notes

Copy points

Use data-a11y-sortable-table-column on checkbox controls.
Match checkbox values to data-sort-key or data-column-key.
Call columns.reset() for custom restore controls.
Destroy the controller when tearing down the table.

Import path

Column visibility setup

import { createSortableTable } from "../../dist/index.js";
import { createSortableTableColumnVisibility } from "../../dist/column-visibility.js";

const instance = createSortableTable(table);

const columns = createSortableTableColumnVisibility(instance, {
  table,
  controls: "#column-controls",
  statusElement: "#column-status"
});