Table Column Visibility Toggle Menu — Real Dynamic Show/Hide Columns

A "columns" menu is only useful if unchecking a box genuinely removes that column from the table — header and every row's matching cell together — rather than just visually greying out a menu item with no real effect. This snippet implements the real behavior: each checkbox is wired to a shared data-col identifier that both the header cell and every body cell in that column carry, so one toggle hides or reveals an entire column consistently across the whole table.

One data attribute links a checkbox to its entire column, header included

Every column that can be hidden has a data-col value — email, role, status, and so on — applied to *both* its <th> and every <td> in that column across every row. The checkbox controlling it carries the same value in its own data-col attribute. applyVisibility() reads each checkbox's data-col, then runs a single table.querySelectorAll([data-col="${col}"]) scoped to the whole table — which matches the header cell *and* every row's cell for that column in one query, applying the same .col-hidden toggle to all of them together, so a column can never end up with its header hidden but its body cells still showing, or vice versa.

The "Name" column is intentionally not toggleable

The first column (Name) has no data-col attribute and no matching checkbox — it's structurally exempt from the hide/show system entirely, modeling the realistic constraint that a table needs at least one identifying column always visible to remain meaningful; hiding every other column while keeping Name visible still leaves a usable, if minimal, table.

The visible-column counter accounts for that always-visible column explicitly

colCount.textContent computes ${visibleCount + 1}/${totalCount + 1} — adding 1 to both the numerator and denominator specifically to account for the always-visible Name column, which isn't represented in the checkboxes array at all. Getting this off-by-one right matters for the badge to honestly report "6/6" when everything is visible, rather than under-reporting "5/5" and omitting the one column that was never optional in the first place.

Dropdown menu behavior follows the same conventions as this library's other menus

The columns button toggles aria-expanded and a .open class on the dropdown, and a document-level click listener closes the menu whenever a click lands outside .col-menu-wrap — standard, predictable dropdown-menu behavior that doesn't require re-learning for anyone who's used a similar menu elsewhere in a product.