Table

A table composed from parts that map one-to-one onto the HTML elements, with four looks and color token support.

Every part renders its own element, so the markup you write is the markup you get: TableHeader is <thead>, TableHead is <th>, and TableData is <td>. Table stays a bare <table> rather than wrapping itself in a scroll container — see Scrollable.

variant and color live on Table alone; the parts draw nothing themselves, so the look has exactly one source of truth. Table is also the only component whose variants are not solid/ghost/outline/subtle — those names describe nothing useful about a table.

Name	Role
Jane Doe	Admin
Alex Stone	Editor

Usage

table-demo.tsx

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableData,
} from 'trivela-ui';

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableData>Jane Doe</TableData>
          <TableData>Admin</TableData>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Examples

Variants

Four looks. Hover any body row — the tint follows the color token, and on a striped table it still wins over the stripe.

default

Name	Role	Amount
Jane Doe	Admin	$120.00
Alex Stone	Editor	$80.00
Mia Kern	Viewer	$40.00

striped

Name	Role	Amount
Jane Doe	Admin	$120.00
Alex Stone	Editor	$80.00
Mia Kern	Viewer	$40.00

bordered

Name	Role	Amount
Jane Doe	Admin	$120.00
Alex Stone	Editor	$80.00
Mia Kern	Viewer	$40.00

plain

Name	Role	Amount
Jane Doe	Admin	$120.00
Alex Stone	Editor	$80.00
Mia Kern	Viewer	$40.00

Colors

The color token tints the stripes, dividers, borders, and hover — all from one prop. It combines with any variant.

striped · primary

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

striped · success

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

striped · danger

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

striped · info

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

bordered · primary

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

Anatomy

TableHeader draws the divider, TableBody drops the border off the last row, and TableRow tints on hover.

Name	Role	Status
Jane Doe	Admin	Active
Alex Stone	Editor	Active
Mia Kern	Viewer	Invited

With a footer

TableFooter renders <tfoot> with a top border and a tinted fill. colSpan passes straight through to the cell.

Name	Role	Amount
Jane Doe	Admin	$120.00
Alex Stone	Editor	$80.00
Mia Kern	Viewer	$40.00
Total		$240.00

With a caption

A caption names the table for screen readers with no ARIA at all. It must be the table's first child, so it renders above — add caption-bottom on Table to move it below.

Workspace members and their roles
Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

Row headers

TableHead works inside TableBody too. Give it scope="row" so screen readers announce the row's name with each cell.

Name	Role
Jane Doe	Admin
Alex Stone	Editor
Mia Kern	Viewer

Scrollable on narrow screens

Table is w-full and does not wrap itself, so add an overflow container when the columns outgrow the space.

Name	Role	Status	Last seen
Jane Doe	Admin	Active	2 hours ago
Alex Stone	Editor	Active	2 hours ago
Mia Kern	Viewer	Invited	2 hours ago

API Reference

Prop	Type	Default	Description
variant	'default' \| 'striped' \| 'bordered' \| 'plain'	'default'	Table only — the look. Not the shared solid/ghost/outline/subtle.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Table only — tints the stripes, dividers, borders, and hover together.
className	string	—	Merged with the generated classes via cn().
Table	HTMLAttributes<HTMLTableElement>	—	<table>. w-full, border-collapse, text-left, text-sm.
TableHeader	HTMLAttributes<HTMLTableSectionElement>	—	<thead>. Structural only — the variant styles it.
TableBody	HTMLAttributes<HTMLTableSectionElement>	—	<tbody>. Structural only — the variant styles it.
TableFooter	HTMLAttributes<HTMLTableSectionElement>	—	<tfoot>. Top border and tinted fill, both from the color token.
TableRow	HTMLAttributes<HTMLTableRowElement>	—	<tr>. Draws nothing itself; the variant gives it borders and hover.
TableHead	ThHTMLAttributes<HTMLTableCellElement>	—	<th>. A header cell — pass scope="col" or scope="row".
TableData	TdHTMLAttributes<HTMLTableCellElement>	—	<td>. A data cell — colSpan and rowSpan pass through.
TableCaption	HTMLAttributes<HTMLTableCaptionElement>	—	<caption>. Names the table for assistive tech.