Table

A static table built from column definitions.

TableProps<T> generic packages/core/src/extra-controls.ts:625 ↗

Import

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

Usage

Table.tsx

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

const invoices = [
  { id: "INV001", status: "Paid", amount: "$250.00" },
  { id: "INV002", status: "Pending", amount: "$150.00" },
];

<Table
  data={invoices}
  rowKey={(row) => row.id}
  columns={[
    { key: "id", header: "Invoice", accessor: "id" },
    { key: "status", header: "Status", accessor: "status" },
    { key: "amount", header: "Amount", accessor: "amount", align: "end" },
  ]}
/>

Props

Prop	Type	Default
`columns` required	`TableColumn<T>[]`	—
`data` required	`T[]`	—
`empty`	`Child`	`"No results."`
`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"];
}