ComponentsEnterpriseSavedViews

SavedViews

SavedViews selects and manages reusable query, filter, and layout configurations.

Controlled selectionSearchDefaultsSharingManagement actions

Overview

Use SavedViews when people repeatedly return to named combinations of filters, sorting, columns, and layout in data-heavy enterprise workflows.

Project views

Live preview

Choose a saved configuration, search the collection, or open its management actions.

Saved views

3 views

ProjectViews.tsx
tsx
import { SavedViews } from 'omverse-ui'
 
<SavedViews views={projectViews} value={activeView} onValueChange={setActiveView}
onCreate={openCreateView} onRename={openRenameView} onDelete={confirmDelete} />

Anatomy

SavedViews combines collection-level discovery and creation with identifiable, selectable, and manageable view rows.

Saved views3 views
♧My open workAssigned to me · OpenDefault
12345
  1. 1
    Collection header

    Names the saved-view set and states its count.

  2. 2
    Create action

    Starts a new saved configuration workflow.

  3. 3
    Search

    Filters saved views by name.

  4. 4
    View row

    Shows identity, scope, ownership, and recency.

  5. 5
    Management action

    Opens allowed operations for one view.

When to use

Use when configurations are valuable enough to name, revisit, share, or govern.

Recommended

  • Reuse complex configurations

    Restore filters, sorting, columns, and layout together.

  • Support personal and shared workflows

    Distinguish ownership and shared availability.

  • Establish a default lens

    Let a team or person choose the view opened first.

When not to use

Prefer direct controls when configuration is temporary, trivial, or not persistable.

Avoid

  • Do not replace active filters

    Use FilterBar to show and edit current conditions.

  • Do not save one simple choice

    Use Select or SegmentedControl.

  • Do not imply persistence

    Avoid saved views when the product cannot reliably restore state.

Variants

Surface treatment and density adapt SavedViews to side panels, embedded workspaces, and standalone management pages.

Outlined

Default bounded collection.

Filled

Tonal collection inside a larger surface.

Raised

Independent view switcher surface.

Density

Small, medium, and large row spacing.

States

Selection communicates the active configuration; availability and management are represented separately.

StateTriggerVisual responseInteraction
DefaultNo interactionAvailable rowsChoose a view
SelectedView activatedPrimary row and bookmarkCurrent configuration
Search resultQuery enteredMatching names onlySelect or clear query
EmptyNo views or matchesEmpty-state contentCreate or revise search
LoadingViews resolvingProgress statusSelection disabled
DisabledView unavailableReduced emphasisCannot select or manage

Behavior

SavedViews owns collection interaction while the application owns serialization, persistence, authorization, routing, and destructive confirmation.

Activation

Selecting a row requests restoration of its configuration.

Discovery

Search filters names without changing the active view.

Management

Only supplied operations appear in each action menu.

Governance

Applications decide ownership and permitted mutations.

Accessibility

Native controls, current-page semantics, explicit menu names, and status text make selection and management independently understandable.

KeyAction
TabMoves through search, creation, views, and management controls.
EnterSpaceActivates the focused view or action.
EscCloses an open management menu when implemented by the host.
  • Give the collection a visible heading.
  • Expose the active view with aria-current.
  • Name management buttons with the associated view.
  • Represent shared and default status in text, not icon alone.
  • Keep selection separate from row management actions.
  • Announce loading and empty results.

Content guidelines

Names and metadata should help people recognize the restored configuration before activating it.

Name the outcome

Describe the records people will see.

ExampleProjects at risk

Summarize conditions

Use concise readable filter language.

ExampleHealth is at risk or blocked

Identify scope

State owner or shared availability.

ExampleProgram office · Shared

Use direct actions

Name management operations with verbs.

ExampleRename, Duplicate, Delete

Examples

Controlled selection can synchronize a saved view with routing, deep links, and browser history.

Shared operations views

Live preview
Operations views2 shared views
RoutedViews.tsx
tsx
<SavedViews views={views} value={route.viewId} onValueChange={(id) => navigate({ viewId: id })} variant="filled" />

Props / API

SavedViews extends section attributes; each SavedView defines identity, descriptive metadata, status, and availability.

Props

PropTypeDefaultDescription
viewsreadonly SavedView[]requiredGoverned saved-view collection.
valuestringundefinedControlled active view identifier.
defaultValuestringundefinedInitial active view.
onValueChange(id: string) => voidundefinedRuns when a view becomes active.
titleReactNode'Saved views'Visible collection heading.
searchablebooleantrueEnables local name filtering.
onCreate() => voidundefinedShows and handles create view.
onRename(view) => voidundefinedHandles rename.
onDuplicate(view) => voidundefinedHandles duplication.
onDelete(view) => voidundefinedHandles deletion.
onSetDefault(view) => voidundefinedHandles default assignment.
disabledbooleanfalseDisables the collection.
loadingbooleanfalseShows view resolution progress.
emptyStateReactNode'No saved views'No-result content.
variant'outlined' | 'filled' | 'raised''outlined'Controls surface treatment.
size'sm' | 'md' | 'lg''md'Controls row density.