Table
A data table component for displaying structured information.
Display tabular data with sorting and filtering capabilities.
Usage
import {
Table,
TableHeader,
TableBody,
TableRow,
TableHead,
TableCell,
} from "@delphi/ui";
export function Example() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>[email protected]</TableCell>
</TableRow>
</TableBody>
</Table>
);
}API Reference
| Component | Description |
|---|---|
Table | The root table container |
TableHeader | Groups header rows |
TableBody | Groups body rows |
TableRow | A single table row |
TableHead | Header cell (uses <th>) |
TableCell | Data cell (uses <td>) |
TableCaption | Optional table caption |
Use semantic table elements for proper accessibility
Include a
TableCaption for screen reader contextRight-align numeric data for easier scanning
Use consistent formatting within columns
Consider horizontal scroll for tables with many columns
Use tables for layout — they're for tabular data only
Nest interactive elements that break row click patterns
Hide important columns on mobile without alternative access
Make tables wider than the viewport without scroll indication