feat(table): column visibility dropdown in table top bar

[kirangadhave]

Problem

Hidden table columns could only be restored through the column explorer panel. The VS Code embedding omits that panel, so once a column was hidden there it could not be brought back from the table UI. The "(n hidden)" button in the bottom bar also opened that panel, making it a dead end in VS Code.

Solution

Adds a searchable "Columns" dropdown to the table top bar:

• Lists all user columns (select/index/nameless columns excluded), hidden ones first with a separator. The order is frozen while the menu is open so toggling a row does not reorder the list under the cursor; reopening re-sorts.
• Per-column show/hide toggle with eye icons (eye-off in primary color for hidden columns). Non-hideable columns render disabled without a toggle.
• "Show all" action, disabled when nothing is hidden.
• While searching, "Hide N matching" / "Show N matching" bulk rows toggle the whole matching set at once (e.g. a prefix query like "shipping" hides the column group).

The list is driven by the shared useSelectList core from ui/select-core, with selection modeling the hidden set: pinSelected provides the hidden-first frozen ordering and select-matching/deselect-matching provide the bulk actions. Search uses smartMatch, consistent with the column explorer.

The "(n hidden)" suffix in the bottom bar becomes plain text since the dropdown replaces it as the recovery affordance, and TableBottomBar no longer takes togglePanel.

Behavior note

TableTopBar previously returned null when search, chart builder, table explorer, and export were all disabled. The dropdown is always available, so that gate is removed: minimal tables now always render the top bar.

Testing

• New column-visibility-dropdown.test.tsx (11 tests): column filtering/exclusion, hidden-first ordering, frozen order while open + re-sort on reopen, smartMatch search, "Show all", bulk hide/show matching, non-hideable columns.
• Updated TableBottomBar.test.tsx: "(n hidden)" renders as inert text.
• Full src/components/data-table/ suite passes; make fe-check clean.
• Manually verified against a 32-column dataframe: sections, search, bulk actions, Show all, inert bottom-bar text, and the web column explorer staying in sync.

Screen.Recording.2026-06-11.at.12.43.16.PM.mov

Closes MO-6448
Closes #9419

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Jun 11, 2026 7:46pm

[cubic-dev-ai]

No issues found across 6 files

Architecture diagram

sequenceDiagram
    participant DataTable as DataTableInternal
    participant TopBar as TableTopBar
    participant Dropdown as ColumnVisibilityDropdown
    participant SelectCore as useSelectList
    participant TableRoot as TanStack Table
    participant BottomBar as TableBottomBar

    Note over DataTable,BottomBar: PR introduces column visibility dropdown in top bar

    DataTable->>TopBar: renders with { table, ...otherProps }

    TopBar->>Dropdown: renders <ColumnVisibilityDropdown table={table} />

    Note over Dropdown: NEW: always rendered (top bar no longer returns null)

    User->>Dropdown: clicks "Columns" button

    Dropdown->>SelectCore: useSelectList({ options, value, multiple, pinSelected, filterFn: smartMatchFilter })

    Note over SelectCore: options built from user columns (excludes select/index/nameless)

    SelectCore-->>Dropdown: list API (visibleOptions, searchQuery, toggle, isChecked, bulkActions)

    Dropdown->>TableRoot: read column visibility state (getIsVisible, getCanHide)

    TableRoot-->>Dropdown: column visibilities

    Dropdown->>Dropdown: builds hiddenIds set

    Note over Dropdown: pinSelected floats hidden columns to top and freezes order while open

    alt User clicks column toggle
        User->>Dropdown: clicks column item
        Dropdown->>SelectCore: list.toggle(columnId)
        SelectCore->>TableRoot: applyHidden(newSet)
        TableRoot-->>Dropdown: column visibility updated
    else User searches
        User->>Dropdown: types in search input
        Dropdown->>SelectCore: list.setSearchQuery(query)
        SelectCore->>SelectCore: filters via smartMatchFilter
        SelectCore-->>Dropdown: matching bulk actions (select-matching / deselect-matching)
        alt User clicks bulk action
            User->>Dropdown: clicks "Hide N matching" or "Show N matching"
            Dropdown->>SelectCore: action.run()
            SelectCore->>TableRoot: applyHidden(updatedSet)
        else No matches
            Dropdown-->>User: "No results."
        end
    else User clicks "Show all"
        User->>Dropdown: clicks "Show all"
        Dropdown->>SelectCore: applyHidden([])
        SelectCore-->>TableRoot: shows all columns
    end

    Note over BottomBar: CHANGED: "(n hidden)" now renders as inert text

    DataTable->>BottomBar: renders without togglePanel prop

    BottomBar->>BottomBar: renders hiddenSuffix as plain <span> instead of clickable <button>

    Note over Dropdown: Reopen re-sorts according to current pinned state

Loading

_{Re-trigger cubic}

[Copilot]

Pull request overview

Adds a first-class column visibility recovery affordance to the data table UI (especially important for the VS Code embed, where the column explorer panel is not available), by introducing a searchable “Columns” dropdown in the top bar and making the bottom-bar hidden-count suffix non-interactive.

Changes:

• Add ColumnVisibilityDropdown to the table top bar to show/hide columns (including smartMatch search + bulk hide/show matching + “Show all”).
• Remove the clickable “(n hidden)” bottom-bar button behavior and drop togglePanel from TableBottomBar’s API.
• Add comprehensive tests for the new dropdown and update bottom-bar tests accordingly.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/src/components/data-table/TableTopBar.tsx	Always renders the top bar and adds the new column visibility dropdown (requires table prop).
frontend/src/components/data-table/TableBottomBar.tsx	Makes “(n hidden)” inert text and removes the togglePanel prop dependency.
frontend/src/components/data-table/data-table.tsx	Wires table into TableTopBar and removes togglePanel from TableBottomBar usage.
frontend/src/components/data-table/column-visibility-dropdown.tsx	Implements the searchable column visibility dropdown using useSelectList with pinned/frozen ordering.
frontend/src/components/data-table/tests/TableBottomBar.test.tsx	Updates expectations to verify hidden suffix is rendered as inert text.
frontend/src/components/data-table/tests/column-visibility-dropdown.test.tsx	Adds coverage for filtering/exclusions, ordering/freeze behavior, bulk actions, show-all, and non-hideable columns.