Sortable data table

Compare structured records with sortable columns.

npx shadcn@latest add @silicon-ui/sortable-data-table
datatable
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/sortable-data-table

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/sortable-data-table/sortable-data-table.tsx
    • components/silicon-ui/sortable-data-table/sortable-data-table.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { SortableDataTable } from "@/components/silicon-ui/sortable-data-table/sortable-data-table";

API reference

PropTypeDefault
rows*T[]—
columns*DataColumn<T>[]—
rowKey*keyof T | ((row: T) => string)—
captionstring"Data table"
emptyMessagestring"No rows to show"
defaultSort

Sort applied on the first render.

SortState—
onSortChange(sort: SortState) => void—
selectable

Adds a checkbox column, row click selection, and a count line with a clear action.

booleanfalse
selectedKeysstring[]—
defaultSelectedKeysstring[]—
onSelectionChange(keys: string[]) => void—
itemName

Noun for the count line, as in "6 projects".

{ one: string; other: string }{ one: "row", other: "rows" }

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens