An editable spreadsheet with cell ranges, sorting, filtering, row selection and column resizing.
pnpm dlx shadcn@latest add @latheui/sheetPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Sheet is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Accessible grid name. |
| columns* (required) | SheetColumn[] | — | Unique keys, headers, optional types, widths, editable state and value formatter. |
| rows / defaultRows | SheetRow[] | — | Controlled or initial rows with stable unique ids. |
| onRowsChange | (rows: SheetRow[]) => void | — | Called after edits, range clearing and row deletion. |
| toolbar / rowSelection | boolean | true | Search/actions toolbar and row checkboxes. |
| maxHeight | number | 360 | Grid scroll height in pixels. |
Combine the control with your own layout. Semantic colors follow the active theme.
import { Sheet } from "@/components/ui/sheet"
export default function Demo(){return <Sheet label="Project budget" columns={[{key:"project",header:"Project",width:180},{key:"owner",header:"Owner",width:140},{key:"budget",header:"Budget",type:"number",format:v=>v===""?"":"$"+Number(v).toLocaleString("en-US")}]} defaultRows={[{id:"1",project:"Identity system",owner:"Ada Chen",budget:4800},{id:"2",project:"Website refresh",owner:"Sam Rivera",budget:7200},{id:"3",project:"Product photos",owner:"Lee Morgan",budget:2400},{id:"4",project:"Launch campaign",owner:"Mia Patel",budget:3600}]}/>}