---
url: /api/table.md
---
# Table
Data grid display component with column alignment, auto-sizing, and optional box-drawing borders.
## Import
```tsx
import { Table } from "silvery"
```
## Usage
```tsx
const columns = [
{ key: "name", header: "Name", width: 20 },
{ key: "status", header: "Status", width: 10, align: "center" },
{ key: "count", header: "Count", width: 8, align: "right" },
]
const data = [
{ name: "Item 1", status: "active", count: 42 },
{ name: "Item 2", status: "pending", count: 7 },
]
```
## Props
| Prop | Type | Default | Description |
| --------- | -------------------------------- | ---------- | ------------------------------------- |
| `columns` | `TableColumn[]` | *required* | Column definitions |
| `data` | `Array>` | *required* | Data rows to display |
| `border` | `boolean` | `false` | Show box-drawing borders around cells |
### TableColumn
```ts
interface TableColumn {
/** Key in data objects to display */
key: string
/** Header: plain text, or `{ text, node }` rendered as `node` and measured as `text` */
header: MeasuredContent
/** Fixed column width (auto-calculated from content if omitted) */
width?: number
/** Text alignment within the column */
align?: "left" | "center" | "right"
/**
* Plain text the width allocator reads when `render` returns a node. Without
* it a node cell measures as empty and the track collapses to its header.
*/
measure?: (item: T, index: number) => string
}
type MeasuredContent = string | { readonly text: string; readonly node: ReactNode }
```
## Output
Without borders:
```
Name Status Count
Item 1 active 42
Item 2 pending 7
```
With `border`:
```
┌──────────────────────┬────────────┬──────────┐
│ Name │ Status │ Count │
├──────────────────────┼────────────┼──────────┤
│ Item 1 │ active │ 42 │
│ Item 2 │ pending │ 7 │
└──────────────────────┴────────────┴──────────┘
```
Values longer than the column width are truncated with an ellipsis character.
## Examples
### Auto-Sized Columns
```tsx
const columns = [
{ key: "file", header: "File" },
{ key: "size", header: "Size", align: "right" },
]
```
When `width` is omitted, columns auto-size to fit the widest content in each column.
### Bordered Data Table
```tsx
```