Table
Data DisplayStriped, sortable data table with sticky header support.
Semantic <table> with brand-styled cells. TableHead supports sort prop for ascending/descending indicators. density controls cell padding. Use TableHeader with sticky for long tables. Compose from Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableEmptyState.
Usage
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "nosible-ux"
export default function Example() {
return (
<Table aria-label="Signal feed">
<TableHeader>
<TableRow>
<TableHead>Ticker</TableHead>
<TableHead>Signal</TableHead>
<TableHead>Confidence</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>AAPL</TableCell>
<TableCell>Earnings beat</TableCell>
<TableCell>92%</TableCell>
</TableRow>
</TableBody>
</Table>
)
}Examples
Sortable columns
| Ticker | Signal | Confidence |
|---|---|---|
| AAPL | Earnings beat | 92% |
| MSFT | Guidance raised | 88% |
| NVDA | Supply chain alert | 74% |
Compact density
| Ticker | Type | Date |
|---|---|---|
| AAPL | Earnings | 2025-07-28 |
| MSFT | Guidance | 2025-07-29 |
| NVDA | Supply chain | 2025-07-30 |
Accessibility
Semantic <table> with <thead> and <tbody>. Sortable headers use aria-sort. aria-label on the Table describes the data set. Empty state uses TableEmptyState with a descriptive message.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Accessible label for the table. Prefer this over a visible caption for most cases. |
density | "comfortable" | "compact" | null | undefined | — |