Data Table
TanStack Table headless bindings with glass table chrome.
Data Table
| Role | Amount | |||
|---|---|---|---|---|
| Olivia Martin | olivia@mail.com | Owner | Active | $1,999.00 |
| Jackson Lee | jackson@mail.com | Member | Active | $39.00 |
| Isabella Nguyen | isabella@mail.com | Member | Pending | $299.00 |
| William Kim | will@mail.com | Admin | Active | $99.00 |
| Sofia Davis | sofia@mail.com | Member | Inactive | $0.00 |
| Liam Brown | liam@mail.com | Member | Active | $149.00 |
| Emma Wilson | emma@mail.com | Admin | Pending | $520.00 |
Installation
1pnpm dlx shadcn@latest add @glasswave/data-tableUsage
1import {2 DataTable,3 dataTableSortHeader,4 type ColumnDef,5} from "glasswave";6 7const columns: ColumnDef<MyRow>[] = [8 {9 accessorKey: "name",10 header: ({ column }) => dataTableSortHeader("Name", column),11 },12];13 14<DataTable columns={columns} data={rows} enableSorting />API Reference
Built on TanStack Table.
DataTable
| Prop | Type | Default |
|---|---|---|
columns | ColumnDef<TData, TValue>[] | — |
data | TData[] | — |
enableSorting | boolean | true |