Table

Usage#

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "neelam-ui";
 
<Table>
  <TableCaption>Recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableHead scope="row">INV-001</TableHead>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

The parts#

Scrolling, not reflowing#

Table wraps itself in an overflow-x-auto container. A table's columns do not reflow the way text wraps, so on a narrow viewport the wrapper scrolls rather than the table overflowing the page.

Row headers#

TableHead defaults to scope="col", which is right in TableHeader. For the cell that identifies a row — an invoice number, a person's name — use TableHead scope="row" rather than a TableCell:

<TableHead scope="row">INV-001</TableHead>

This is what lets a screen reader announce "INV-001, Amount, $250.00" as it moves across the row, instead of reading bare values with no anchor.

Table or DataTable?#

Table is presentational — you render the rows. Reach for DataTable when you want sorting, filtering, and pagination over a set of rows without wiring them yourself. DataTable is built on these same parts.

Keyboard#

A table is content, not a composite widget, so there is no grid-style arrow-key navigation between cells. Screen readers provide their own table-navigation commands, which work because the markup is a real <table>.

Accessibility#

• Real <table> markup throughout, so header/cell associations, row and column counts, and table navigation come from the platform rather than from ARIA.
• TableCaption renders a real <caption>, which names the table for assistive tech. It is visually placed below via caption-bottom but remains the first thing announced.
• scope is set on every TableHead — "col" by default, "row" when you say so — which is what makes cell announcements meaningful.
• Alignment is done with utility classes on cells rather than the deprecated align attribute.

API reference#

The table parts add no props of their own beyond TableHead's scope default — each is a styled wrapper around its native element, and every attribute passes straight through. See the table above for which element each renders.