Display Menu

Install

pnpm exec vegastack-design verify display-menu

pnpm dlx shadcn@4.21.0 add @vegastack/display-menu

Usage

import { DisplayMenu } from "@/components/ui/display-menu";

<ListToolbar
  display={
    <DisplayMenu
      rowHeight={{
        value: density,
        options: [
          { value: "compact", label: "Compact" },
          { value: "comfortable", label: "Comfortable" },
        ],
        onValueChange: setDensity,
      }}
      columns={{ items: columns, onToggle: toggleColumn, onShowAll: showAll }}
      toggles={[
        {
          id: "subtasks",
          label: "Show subtasks",
          checked: subtasks,
          onCheckedChange: setSubtasks,
        },
        {
          id: "closed",
          label: "Show closed",
          checked: closed,
          onCheckedChange: setClosed,
        },
      ]}
      isDefault={isDefault}
      onReset={reset}
    />
  }
/>;

Display says how rows look and which lifecycle states are included. It is named Display, not View, so it is never confused with a table's saved views. Its sections appear only when filled, always in this order:

1. Layout — once the toolbar has folded Layout in (or when you pass layout): labelled options.
2. Sort by — once the toolbar has folded Sort in: one row with the order's summary that drills into the same sort content.
3. Rows — Row height (text-labelled options: "Compact · Comfortable", "Short · Medium · Tall"), Group by (a GroupByPicker), and Columns or Fields ("5 of 7 ›", drilling into an eye per column, reorderable when onReorder is set; a long list scrolls inside the menu).
4. Show — one switch per lifecycle state the page supports: Show subtasks, Show closed, Show archived, Show disabled, Show empty groups. One rule everywhere: a state hidden by default is included from here, never from a default filter chip.
5. Reset — "Reset to default" (or resetLabel, "Reset to saved view" on a table), shown only while isDefault is false. The tool carries a dot then too.

It is one surface: no filled rows, no control tracks, no card inside it. Every row is 32px from the 8px inset, sections divided by a hairline. A drill-in replaces the page in place with a ‹ back header; a reopen always starts on the main page. On a phone it is a bottom sheet.

Actions on the view (Rename, Delete, Save view, Export) never live here: they go in the view tab's own ⋯ or the toolbar's ListToolbarMenu.

Examples

A table's display

Group by with a GroupByPicker, three row heights, "Show empty groups" and "Reset to saved view".

API Reference

Columns

Toggle

Accessibility

• The tool is named "Display" ("Display, changed" with its dot) and opens a surface named Display.
• Row height and Layout are groups of toggle buttons labelled by their row; each Show row is a switch labelled by its text.
• Drill-in rows are buttons that carry their summary; the drill-in's back button is named "Back".
• Each column's eye is a toggle button ("Hide Due" / "Show Due") with aria-pressed.

Do / Don't