39 Pro components and page blocks

Get Pro
uibrik

Data Table

Pro

Preview

Customize

10

Usage

import { DataTable } from "@/components/uibrik/data-table/data-table";

<DataTable />

Installation

Pro

Data Table 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/data-table

Props

DataTable
title
Type string
"Customers"
Names the table.
selectable
Type boolean
true
Row checkboxes and the bulk-action bar.
defaultPageSize
Type "10" | "20" | "50"
"10"
Rows per page to start with.
loading
Type boolean
false
Show skeleton rows while data loads.
columns
Type DataTableColumn<T>[]
–
{ id, header, cell(row), sortValue?, align?, width?, hideable?, defaultHidden? }. The first column leads each row and never hides.
rows
Type T[]
–
Rows with a unique id. Defaults to 48 sample customers.
filters
Type DataTableFilter<T>[]
–
{ id, label, kind: "chips" | "select", options, value(row) }.
searchText
Type (row: T) => string
–
Text the search box matches.
rowLabel
Type (row: T) => string
–
Read aloud for a row's checkbox and menu.
pageSizes
Type number[]
[10, 20, 50]
Choices in the rows-per-page select.
rowActions
Type { id: string; label: string; danger?: boolean }[]
–
Each row's ⋯ menu. An action with id "delete" also removes the row.
onRowAction
Type (action: string, row: T) => void
–
Called from a row's menu.
onExport
Type (rows: T[]) => void
–
Export in the bulk-action bar.
onDelete
Type (rows: T[]) => void
–
Called with the rows a delete removes.
className
Type string
–
Classes for the outer shell.