caliper uidocs
DemoSign inGet Pro

Record grid

Pro

A spreadsheet-grade table for records: pin and resize columns, group with subtotals, totals in a sticky footer, edit cells in place with undo and redo, export what you see to CSV and save the arrangement as a view.

Installs components/ui/record-grid.tsxDepends on @radix-ui/react-dropdown-menu, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/record-grid

Accounts

NorthwindMaya ChenEMEAStarter4€120382027-01-01
Lumen LabsTomás FerreiraNorth AmericaBusiness17€520672027-02-12
BrightwavePriya RamanAPACTeam30€910962027-03-23
Cobalt & CoAmara OkaforEMEAStarter43€1,310642027-04-07
FernhillMaya ChenNorth AmericaBusiness56€1,710932027-05-18
Orbital FreightTomás FerreiraAPACTeam9€2,110612027-06-02
QuaysidePriya RamanEMEAStarter22€2,500902027-07-13
Redwood ClinicsAmara OkaforNorth AmericaBusiness35€2,900582027-08-24
SaltmarshMaya ChenAPACTeam48€3,300872027-09-08
TidewaterTomás FerreiraEMEAStarter61€3,690552027-01-19
Umbra StudioPriya RamanNorth AmericaBusiness14€290842027-02-03
Vantage LegalAmara OkaforAPACTeam27€690522027-03-14
Willow HealthMaya ChenEMEAStarter40€1,080812027-04-25
Yarrow FoodsTomás FerreiraNorth AmericaBusiness53€1,480492027-05-09
Zephyr AirPriya RamanAPACTeam6€1,880782027-06-20
Atlas MiningAmara OkaforEMEAStarter19€2,280462027-07-04
Beacon SchoolsMaya ChenNorth AmericaBusiness32€2,670752027-08-15
Cinder GamesTomás FerreiraAPACTeam45€3,070432027-09-26
18 rowsTotal 561Total €32,510Average 68

Arrow keys move between cells · Enter edits · Ctrl or ⌘ + Z undoes · drag a column edge to resize

1 pinned column

When to use #

Use it for

  • Operations, finance and admin tools where people work in the table.
  • Large lists that need grouping and totals.

Skip it when

  • A short read-only list; use the data table.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/record-grid

Adds its 9 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 { RecordGrid } from "@/components/ui/record-grid"

The worked example comes with Pro

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

Checking your licence…

API reference #

RecordGrid

component
PropTypeDefaultDescription
label *string—
rows *readonly T[]—
columns *readonly RecordColumn<T>[]—
rowKey *(row: T) => string—
onEdit((key: string, columnId: string, value: string | number) => void)—Apply an edit (or its undo). Throw to refuse it; the message is shown.
viewsreadonly GridView[][]
onViewsChange((views: GridView[]) => void)—
search((row: T) => string)—Text matched by the search box. Omit to hide it.
exportNamestring"export"
classNamestring—

Accessibility #

It exposes alert, region, grid, separator and status semantics, with aria-labelledby, aria-label, aria-hidden, aria-rowcount, aria-sort and aria-orientation kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EnterActivates the focused control.
←Moves to the previous item or value.
EscapeCloses or cancels, then returns focus to where it came from.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.