Skip to content

Table

A data table with headers, column alignment, and auto-calculated column widths.

Import

tsx
import { Table } from "silvery"

Props

PropTypeDefaultDescription
columnsTableColumn[]requiredColumn definitions
dataArray<Record<string, unknown> | unknown[]>requiredData rows
showHeaderbooleantrueShow header row
separatorstring" | "Border between columns
headerBoldbooleantrueBold header text

TableColumn

ts
interface TableColumn {
  header: string
  key?: string // Key to extract from data row
  width?: number // Column width (auto if omitted)
  align?: "left" | "right" | "center"
}

Usage

tsx
<Table
  columns={[
    { header: "Name", key: "name" },
    { header: "Age", key: "age", align: "right" },
  ]}
  data={[
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
  ]}
/>

Output:

Name  | Age
------+----
Alice |  30
Bob   |  25

See Also

  • Box -- layout container

Released under the MIT License.