Components

Table

Semantic table in Barlow: heavy header rule, hairline rows, tabular right-aligned figures.

Stories filed this week, by desk.
Desk	Stories	Words
Politics	42	51,230
Business	37	44,105
Culture	19	23,870
Science	11	15,402
Total	109	134,607

Install

bash

npx shadcn add @eloquent/table

Usage

tsx

import {
  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";

<Table scrollLabel="Stories by desk">
  <TableCaption>Stories filed this week, by desk.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Desk</TableHead>
      <TableHead numeric>Stories</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Politics</TableCell>
      <TableCell numeric>42</TableCell>
    </TableRow>
  </TableBody>
</Table>

Mark figure columns numeric. Pass scrollLabel when the table may be wider than its container, so keyboard users can scroll it.

States

Story	Status
Budget passes second reading	Published
Port strike enters third day	Selected
Museum reopens its east wing	Draft

State	Treatment
Header	Kicker capitals between a 3px ink rule and a hairline
Rows	Hairline between rows, 44px high; no hover fill
Selected row	`data-state="selected"`: `tint-1` fill
Scroll region focus	2px ink outline, 2px offset

Keyboard

Key	Action
Tab	With `scrollLabel`, focuses the table's scroll region; without it, the table is skipped
Arrow Left / Right	Scroll a focused, wide table sideways

Vietnamese

Số bài nộp trong tuần, theo ban.
Ban	Số bài	Số chữ
Chính trị	42	51.230
Kinh doanh	37	44.105
Văn hoá	19	23.870
Khoa học	11	15.402
Tổng	109	134.607

Ink adaptation

Upstream shadcn's grey row borders, muted header and hover fill are replaced by ink rules: a heavy rule over the header, hairlines between rows and no hover effect. Figures are right-aligned and tabular. Native HTML, no Base UI part (Base UI has no table).