Components/Data Display/Table

Table

Data Display

Striped, 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

TickerSignalConfidence
AAPLEarnings beat92%
MSFTGuidance raised88%
NVDASupply chain alert74%

Compact density

TickerTypeDate
AAPLEarnings2025-07-28
MSFTGuidance2025-07-29
NVDASupply chain2025-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 TypeDefaultDescription
aria-label
string | undefinedAccessible label for the table. Prefer this over a visible caption for most cases.
density
"comfortable" | "compact" | null | undefined