Saved views

Pro

Named views of a table, personal or shared: a dot when the filters drift from the open view, with Save, Save as new and Reset, a prompt before leaving unsaved changes, and rename, duplicate, default and delete.

Installs components/ui/saved-views.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/saved-views

#4821Bank feed stopped syncingopen

When to use #

Use it for

Lists people come back to with the same filters: tickets, deals, invoices.
Teams that share a few standard ways of looking at the same data.

Skip it when

One-off filtering; a filter toolbar is enough.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/saved-views

Adds its 8 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { SavedViews } from "@/components/ui/saved-views"

The worked example comes with Pro

The 68-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

SavedViews

component

PropTypeDefaultDescription

views *readonly SavedView<T>[]—

current *string—The open view's id.

value *T—The live filters, which may differ from the open view's saved value.

onSelect *(view: SavedView<T>) => void—Opens a view: apply its value to your filters.

onSave *(id: string, value: T) => void—

onCreate *(input: { name: string; value: T; shared: boolean; }) => void—Creates a view from the live filters and makes it the open one.

onRename *(id: string, name: string) => void—

onDuplicate((id: string) => void)—

onDelete *(id: string) => void—

onReorder((id: string, to: number) => void)—Moves a view to a new position; Alt+Shift+arrows on a tab, or the view's menu.

maxVisiblenumber5Tabs shown before the rest go into More; the open view always shows.

defaultIdstring—

onDefaultChange((id: string) => void)—

equals((a: T, b: T) => boolean)same

labelstring"Views"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.