ColumnVisibilityMenu

ColumnVisibilityMenu gives data-heavy screens a consistent column picker without asking every table to reimplement menu state.

#Default usage

<ColumnVisibilityMenu
  columns={[
    { id: "name", label: "Name", disabled: true },
    { id: "owner", label: "Owner" },
    { id: "status", label: "Status" },
    { id: "updated", label: "Updated" },
  ]}
  defaultVisibleColumnIds={["name", "owner", "status"]}
/>

#Import

import { ColumnVisibilityMenu } from "@froggdesign/enter-ui-react";

#Controlled

<ColumnVisibilityMenu
  columns={columns}
  visibleColumnIds={visibleColumnIds}
  onVisibleColumnIdsChange={setVisibleColumnIds}
/>

#Patterns

Pair this with DataTable, DataGrid, DataToolbar, and saved filter views in internal tools where users need to personalize dense operational data.

#Accessibility

The menu uses checkbox menu items with keyboard navigation from the dropdown primitive. Disabled columns remain visible in the menu but cannot be toggled.

#API

• columns: { id, label, disabled? }[].
• visibleColumnIds: controlled visible ids.
• defaultVisibleColumnIds: initial visible ids for uncontrolled usage.
• onVisibleColumnIdsChange: called with ordered visible ids.
• disabled: disables the trigger and menu actions.

#Styling

ColumnVisibilityMenu uses .eui-column-visibility-menu classes and FroggDesign tokens for layout, state, focus, and disabled styling.