ascii.cnlibs.com
GithubX

Data Table

A sortable table with client-side data.

status
web-app
success
48s
api-gateway
success
1m 12s
worker-queue
failed
22s
docs-site
building
—
billing-service
success
2m 03s
mobile-api
success
35s

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/data-table.json

## usage

import { DataTable } from "@/components/ui/data-table";
const columns: DataTableColumn<Deployment>[] = [
  // Every column sorts on header click unless sortable: false.
  { key: "name", header: "name" },
  {
    key: "status",
    header: "status",
    sortable: false,
    render: (row) => <span className={statusColor[row.status]}>{row.status}</span>,
  },
  // Sorts by the raw durationMs, displays the formatted duration.
  { key: "durationMs", header: "duration", align: "right", render: (row) => row.duration },
]

<DataTable
  data={deployments}
  columns={columns}
  widths={[16, 10, 10]}
  getRowKey={(row) => row.name}
/>