Table
Data tables display structured information in rows and columns. They support sortable headers, alternating row backgrounds, and row hover highlights.
Sortable Table
Click the Name, Views, or Date column headers to sort. The arrow indicates direction.
| Name | Status | Views | Date |
|---|
| Getting Started with AI | Published | 12400 | 2026-03-20 |
| Building a Feed System | Published | 8900 | 2026-03-15 |
| Performance Monitoring | Published | 5600 | 2026-03-10 |
| Component Architecture | In Review | 3200 | 2026-03-18 |
| Design Token Guide | Draft | 0 | 2026-03-22 |
| Notion Integration | Scheduled | 0 | 2026-03-25 |
<Table
columns={[
{ key: "name", label: "Name", sortable: true },
{ key: "status", label: "Status" },
{ key: "views", label: "Views", sortable: true },
]}
data={data}
sortKey={sortKey}
sortDir={sortDir}
onSort={handleSort}
/>
Row Hover
Hover over any row to see the highlight effect. Alternating backgrounds improve scannability.
| Component | Props | Status |
|---|
| Button | 7 | Stable |
| Badge | 1 | Stable |
| Card | 6 | Stable |
| Modal | 5 | Beta |
Props
| Prop | Type | Default | Description | Required |
|---|
| columns | Array<{ key, label, sortable? }> | - | Column definitions | No |
| data | Array<Record<string, any>> | - | Row data keyed by column key | No |
| sortKey | string | - | Currently sorted column key | No |
| sortDir | "asc" | "desc" | - | Sort direction | No |
| onSort | (key: string) => void | - | Callback when a sortable header is clicked | No |
Usage Guidelines
- Use tables for data sets where comparison across rows is important.
- Mark only columns with meaningful sort order as
sortable. - Alternating row colors and hover highlights improve readability for large data sets.
- Right-align numeric columns for better visual scanning.