Data display

Table

A structured data table with typed column definitions.

TableView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Name	Status
Worker 1	Active
Worker 2	Paused
Worker 3	Active

tsx

import { Table, type TableColumn } from "innate-ui";
import classes from "../docs.module.css";

interface WorkerRow {
  id: string;
  name: string;
  status: "Active" | "Paused";
}

const columns: ReadonlyArray<TableColumn<WorkerRow>> = [
  { id: "name", header: "Name", cell: (row) => row.name },
  { id: "status", header: "Status", cell: (row) => row.status },
];
const rows: ReadonlyArray<WorkerRow> = [
  { id: "one", name: "Worker 1", status: "Active" },
  { id: "two", name: "Worker 2", status: "Paused" },
  { id: "three", name: "Worker 3", status: "Active" },
];

export function TableDemo() {
  return (
    <div class={classes.tablePreview}>
      <Table columns={columns} rows={rows} rowKey="id" />
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

TableProps

Prop	Type	Default
`columns`required Column definitions used to render headers and row cells.	`ReadonlyArray<TableColumn<Row>>`	`—`
`rows`required Rows rendered by the table.	`JSX.ValueOrCell<ReadonlyArray<Row>>`	`—`
`rowKey`required Row property whose value uniquely identifies each row.	`RowKey`	`—`
`caption` Optional table caption.	`JSX.Children`	`—`
`empty` Content rendered when `rows` is empty.	`JSX.Children`	`"No rows"`

Inspect the typed source →