Data Table

When to use

Reach for DataTable when you need to render a list of records with consistent column structure. It is intentionally unopinionated about sorting, filtering, and pagination — those concerns compose on top via the column accessor and parent state.

Basic example

import { DataTable, type DataTableColumn } from "@/components/data-table"

type User = { id: string; name: string; email: string }

const columns: DataTableColumn<User>[] = [
  { id: "name",  header: "Name",  accessor: (r) => r.name },
  { id: "email", header: "Email", accessor: (r) => r.email },
]

export function Example({ users }: { users: User[] }) {
  return (
    <DataTable
      columns={columns}
      rows={users}
      rowKey={(r) => r.id}
    />
  )
}

Notes

• accessor can return any ReactNode, so composing badges, avatars, or actions per cell is the intended path.
• Column align applies to both header and cells; use width for fixed-width columns (e.g. action menus).
• Pass an emptyState node to override the default empty message.