81 Pro components and page blocks

Get Pro
uibrik

Spreadsheet Grid

Pro

Preview

Customize

Rows60
Columns26
Row height32px
Frozen rows1
Frozen columns1
Accent

Installation

Pro

Spreadsheet Grid is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/spreadsheet-grid

Usage

import { SpreadsheetGrid } from "@/components/uibrik/spreadsheet-grid/spreadsheet-grid";​const formats = { E: "currency", F: "currency", G: "percent", H: "currency" };​<SpreadsheetGrid  rows={60}  columns={26}  rowHeight={32}  frozenRows={1}  frozenColumns={1}  formulaBar  statusBar  accent="#2563eb"  formats={formats}  columnWidths={{ A: 88, B: 128, C: 80, D: 72 }}  columnWidth={112}  onChange={(cells) => {}}  // value={{}}  // defaultValue={{}}/>

Props

SpreadsheetGrid
rows
Type number
60
Number of rows. Only those in view render.
columns
Type number
26
Number of columns, up to 52 (AZ).
rowHeight
Type number
32
Height of every row.
frozenRows
Type number
1
Rows pinned to the top while scrolling.
frozenColumns
Type number
1
Columns pinned to the left while scrolling.
formulaBar
Type boolean
true
Cell name, contents and undo above the grid.
statusBar
Type boolean
true
Sum, average and count of the selection below the grid.
accent
Type string
"#2563eb"
Colour of the selection, fill handle and resize line.
value
Type Record<string, string>
–
Cells by key, e.g. { B4: "=SUM(B1:B3)" }. Keys and references use each column's original letter, so they follow a moved column. Controlled when set.
defaultValue
Type Record<string, string>
SAMPLE_CELLS
Cells on mount when uncontrolled.
onChange
Type (cells: Record<string, string>) => void
–
Called with every cell after an edit, paste, fill, clear or undo.
formats
Type Record<string, "number" | "currency" | "percent" | "text">
–
How numbers show in a column, by its original letter.
columnWidths
Type Record<string, number>
–
Starting widths by original letter, px.
columnWidth
Type number
112
Width of a column without its own, px.
className
Type string
–
Classes for the outer shell. It fills its parent's height; give the parent one.