Components

Table

The workhorse of a data tool. Dense rows, tabular figures on numeric columns, status by badge, no glassmorphism.

When to useto render structured rows of the same shape — the primary surface of a data tool. If you need sort, filter, and pagination, reach for Data table.

Import

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@ravnhq/efni/table"

Mission ops table

ID	Operator	Status	Progress	ETA
MB-4472	NANora Adell	In flight	x 62%	00:14:22
MB-4468	RCRavi Chandra	Queued	x 0%	—
MB-4451	JPJules Park	Completed	x 100%	00:00:00
MB-4432	IMIris Molinari	Aborted	x 34%	—
MB-4421	KOKito Odum	In flight	x 88%	00:03:41
MB-4415	SVSena Voss	Completed	x 100%	00:00:00

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>ID</TableHead>
      <TableHead>Operator</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-mono tabular-nums">MB-4472</TableCell>
      <TableCell>Nora Adell</TableCell>
      <TableCell><Badge>In flight</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Do & don't

ID	Operator	ETA
MB-01	Nora Adell	00:14:22
MB-02	Ravi Chandra	00:03:41

Right-align numbers, use tabular-nums, and let ID / duration columns share the mono family.

ID	Operator	ETA
MB-01	Nora Adell	00:14:22
MB-02	Ravi Chandra	00:03:41

Don't left-align numbers with proportional fonts — the digits don't stack.

Guidelines

Right-align numbers, left-align text.
Use font-mono + tabular-nums for IDs, timestamps, durations, percentages.
Represent status with a Badge or Tag — status is not a row color.
Reach for Data table when you need sort, filter, or pagination.

Don't

Don't zebra-stripe rows — spacing does the same work without noise.
Don't tint whole rows for status — it fights any semantic color you add later.
Don't nest interactive controls in every cell — put row actions in a Dropdown menu.

Props

Prop	Type	Default	Description
`…props (Table)`	`React.ComponentProps<"table">`	—	Everything Table passes to the element it renders.
`…props (TableHeader)`	`React.ComponentProps<"thead">`	—	Everything TableHeader passes to the element it renders.
`…props (TableBody)`	`React.ComponentProps<"tbody">`	—	Everything TableBody passes to the element it renders.
`…props (TableRow)`	`React.ComponentProps<"tr">`	—	Everything TableRow passes to the element it renders.
`…props (TableHead)`	`React.ComponentProps<"th">`	—	Everything TableHead passes to the element it renders.
`…props (TableCell)`	`React.ComponentProps<"td">`	—	Everything TableCell passes to the element it renders.