All components (244)

Saved views

Management · SavedViewsManager

What it is and when to use it

The saved views of a screen: choose one, save what is shown as a new view or over the active one, rename, mark the default one and delete with confirmation.

When to use it

A listing with filters people repeat: "Pending collection", "This month", "My incidents".
What each view saves (value) belongs to the application: filters, order, columns. The library does not look at it; it returns it on choosing (onSelect).
activeId says which one is shown and modified whether what is shown is no longer what it saves: then saving the changes to it is offered (onUpdate).
Each action appears only if its function is passed: onSave, onRename, onMakeDefault, onDelete.

When not to

A single one-click filter: a quick filter of SmartFilterBar.
Sharing views between users or with permissions: the server that saves them decides that.

Keyboard: the button opens the panel with focus inside; each view and each action are buttons, and the name is saved with Enter.

Accessibility: the active view carries aria-current, the default one says so with text, deleting asks for confirmation and two views with the same name are not accepted (ignoring case and accents). Saving and deleting are announced.

Fine appearance: the active one carries the soft accent background; the actions go in small text under each view.

What it looks like

Active view: none.

<SavedViewsManager
  label="Order views"
  views={vistas}
  activeId={activa}
  onSelect={(vista) => aplicar(vista.value)}
  onSave={guardarVistaNueva}
  onRename={renombrar}
  onMakeDefault={marcarPorDefecto}
  onDelete={borrar}
/>

Props

Import it with import { SavedViewsManager } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`activeId`required	`string \| null`	The view being shown, or `null` if none.
`label`required	`string`	Which views they are («Invoice views»). Required.
`onSelect`required	`(view: SavedView<T>) => void`	—
`views`required	`readonly SavedView<T>[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`modified`	`boolean`	What is shown now is no longer what the active view saves: saving the changes to it is offered.
`onDelete`	`(id: string) => void \| Promise<void>`	—
`onMakeDefault`	`(id: string) => void \| Promise<void>`	—
`onRename`	`(id: string, name: string) => void \| Promise<void>`	—
`onSave`	`(name: string) => void \| Promise<void>`	Save what is shown now as a new view. Without this, views cannot be created.
`onUpdate`	`(id: string) => void \| Promise<void>`	Save what is shown now into the active view.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: