navigation / stable

DisplayOptions

Everything about how a list looks in one control: layout (Board / List), grouping, ordering, visible properties and options; a dot marks a customised view.

LIVE PREVIEW

Loading preview…

When to use

The single Display control of every list page's ViewToolbar, right next to Filter — layout, grouping and ordering live here, not in separate buttons.

Consider an alternative

Filtering — use FilterBar.
App-wide preferences — put them in settings.
A view switch that is the page's main control (calendar Day / Week) — use SegmentedControl.

Import

import { DisplayOptions } from '@revido-llc/kit';

Keyboard interaction

Enter / Space — open
Tab — move through the layout, the grouping and ordering selects, the direction button, switches and property pills
Enter / Space on a select — open its options
Escape — close

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


defaultValue (required)	DisplayValue	—	The view's defaults: the button shows a dot when customised, and "Reset" returns here.
onChange (required)	(next: DisplayValue) => void	—
value (required)	DisplayValue	—
className	string	—
groupingRequired	boolean	false	The view is always grouped: no "No grouping" choice.
groupOptions	readonly DisplayChoice[]	—	Fields a list can be grouped by ("No grouping" is offered unless `groupingRequired`).
label	string	"Display"
layoutLabel	string	"Layout"	Label of the layout row when the choices aren't layouts (e.g. "View" for report types).
layouts	readonly DisplayChoice[]	—	Layouts of the same data (Board / List): the first setting row, with each layout's icon.
orderings	readonly DisplayChoice[]	—	Fields a list can be ordered by; a button beside the select flips the direction.
properties	readonly DisplayChoice[]	[]	Row / card properties the user can show or hide.
settings	readonly DisplaySetting[]	[]	Extra one-of-many settings, each a dropdown row after Ordering (e.g. Zoom).
toggles	readonly DisplayChoice[]	[]	On/off view options, e.g. "Show archived".

Examples

Layout, grouping, ordering and options

One Display control for a list page: Board / List across the top, then Grouping, Ordering (with direction), Properties and Options.

<DisplayOptions
  layouts={[{ id: "board", label: "Board", leading: { kind: "icon", icon: <LayoutGrid /> } }, { id: "list", label: "List", leading: { kind: "icon", icon: <List /> } }]}
  groupOptions={groups}
  orderings={[{ id: "updated", label: "Updated" }, { id: "value", label: "Value" }]}
  properties={properties}
  toggles={[{ id: "archived", label: "Show archived" }]}
  value={display}
  defaultValue={defaults}
  onChange={setDisplay}
/>

Default vs customised

The dot and cobalt tint say the view no longer matches its defaults.

<DisplayOptions … value={display} defaultValue={DEFAULT_DISPLAY} onChange={setDisplay} />

In the view toolbar

Group by assignee, hide properties, show empty groups — the list follows.

<DisplayOptions groupOptions={groups} properties={properties} value={display} defaultValue={DEFAULT_DISPLAY} onChange={setDisplay} />

Literal anatomy

Static component anatomy; bind events in the consuming app.

<DisplayOptions value={{ properties: ["owner"] }} defaultValue={{ properties: ["owner"] }} properties={[{ id: "owner", label: "Owner" }]} />