DataTable

A Table with clickable rows and an empty state.

DataTableProps<T> generic packages/core/src/extra-controls.ts:702 ↗

Import

import { DataTable } from "@tarve/core";

Usage

DataTable.tsx

import { Badge, DataTable } from "@tarve/core";

const users = [
  { id: 1, name: "Ada", role: "Owner" },
  { id: 2, name: "Grace", role: "Member" },
];

<DataTable
  data={users}
  rowKey={(row) => row.id}
  empty="No users."
  columns={[
    { key: "name", header: "Name", accessor: "name" },
    { key: "role", header: "Role", render: (row) => <Badge variant="secondary">{row.role}</Badge> },
  ]}
  onRowClick={(row) => console.log(row.name)}
/>

Props

DataTable has no props of its own beyond the inherited and common props below.

Inherited from TableProps 5 props

Prop	Type	Default
`columns` required	`TableColumn<T>[]`	—
`data` required	`T[]`	—
`empty`	`Child`	—
`onRowClick`	`(row: T, index: number) => void`	—
`rowKey`	`(row: T, index: number) => string \| number`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

TableColumn

interface TableColumn<T> {
  key: string;
  header: Child;
  accessor?: keyof T | ((row: T, index: number) => Child);
  render?: (row: T, index: number) => Child;
  width?: Style["width"];
  align?: Style["align"];
}