ComponentsData display

Table

Styled semantic table primitives for small and static data — invoice lines, settings lists, chart data. Row height and cell padding follow the density axis (--row-h, --cell-px); numbers align to the end with tabular figures; the header and first column can stick without ever blurring.

Native <table> components/table.tsx, styles/data.csstheme · material · accent · density · font
Invoice INV-2041 · Kadıköy Bistro · due Dec 10, 2026
ItemQtyRateAmount
Brand identity refresh
Logo, colour system, type scale
1$4,500.00$4,500.00
Website build — 8 templates
Next.js, CMS integration
8$650.00$5,200.00
Copywriting
Home, services, about
3$180.00$540.00
Hosting & maintenance
Nov 2026 – Oct 2027
12$40.00$480.00
TotalUnpaid$10,720.00

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow } from "@vamos-ui/react";

<TableContainer aria-label="Invoice lines">
  <Table>
    <TableCaption>Invoice INV-2041</TableCaption>
    <TableHeader>
      <TableRow><TableHead>Item</TableHead><TableHead numeric>Amount</TableHead></TableRow>
    </TableHeader>
    <TableBody>
      <TableRow><TableCell>Design retainer</TableCell><TableCell numeric>$4,500.00</TableCell></TableRow>
    </TableBody>
  </Table>
</TableContainer>

For sorting, filtering, selection and pagination at scale use Data Table — it renders with these primitives.

Glass: sticky header and pinned column use color-mix(var(--surface), var(--scene)) — opaque, so rows never show through, and no extra blur layer.

Examples

Density

compact / comfortable / spacious set --row-h and --cell-px on the table; "inherit" (default) follows the page data-density.

compactRoleTeamSince
Ece DemirProduct designerStudioMar 2023
Meltem AydınAccount managerClientsJan 2022
Can ÖzkanFrontend engineerPlatformSep 2024
comfortableRoleTeamSince
Ece DemirProduct designerStudioMar 2023
Meltem AydınAccount managerClientsJan 2022
Can ÖzkanFrontend engineerPlatformSep 2024
spaciousRoleTeamSince
Ece DemirProduct designerStudioMar 2023
Meltem AydınAccount managerClientsJan 2022
Can ÖzkanFrontend engineerPlatformSep 2024

Sticky header and first column

Give TableContainer a maxHeight. Sticky cells use an opaque surface mix (never blur); the edges fade while there is more to scroll.

PageJanFebMarAprMayJunJulAugSepOctNovDec
/1,4802,1362,7921,9312,5871,7262,3821,5212,1772,8331,9722,628
/menu2,3331,4722,1282,7841,9232,5791,7182,3741,5132,1692,8251,964
/reservations1,6692,3251,4642,1202,7761,9152,5711,7102,3661,5052,1611,300
/blog/qr-menus-guide2,5221,6612,3171,4562,1121,2511,9072,5631,7022,3581,4972,153
/blog/local-seo-20261,8582,5141,6532,3091,4482,1041,2431,8992,5551,6942,3501,489
/contact1,1941,8502,5061,6452,3011,4402,0961,2351,8911,0301,6862,342
/about2,0471,1861,8429811,6372,2931,4322,0881,2271,8831,0221,678
/events1,3832,0391,1781,8349731,6292,2851,4242,0801,2191,8751,014
/gift-cards2,2361,3752,0311,1701,8269651,6217601,4162,0721,2111,867
/careers1,5727111,3672,0231,1621,8189571,6137521,4082,0641,203
/blog/nfc-vs-paper9081,5647031,3592,0151,1541,8109491,6057441,4002,056
/privacy1,7619001,5566951,3514901,1461,8029411,5977361,392

Numbers and sorting (CRM)

numeric end-aligns with tabular mono figures (also in RTL). onSort turns the header into a button with aria-sort.

Monthly recurring revenue by client — click a header to sort.
Northwind Traders48$12,400.00Up 21.4%
Moda Wellness6$1,450.00Up 8.2%
Harbor & Pine4$980.50Down 3.1%
Kadıköy Bistro2$320.00No change

Row states (HR)

highlighted (accent bar on the start edge), selected, disabled — with bordered="grid".

MemberRoleLast active
Can Özkan just invitedEditor—
Meltem AydınAdmin2 hours ago
Ece DemirAuthorYesterday
Ahmet KayaSuspendedOct 2

Empty

TableEmpty spans every column and renders the kit's Empty state; children become its actions.

NumberClientDueAmount

No overdue invoices

Everything issued before Nov 1 has been paid.

API

Table

PropTypeDefault
density
Row height and cell padding via --row-h / --cell-px.
"inherit" | "compact" | "comfortable" | "spacious""inherit"
striped
Zebra rows.
booleanfalse
hover
Row hover tint.
booleantrue
bordered
Hairlines between rows, around every cell, or none.
"rows" | "grid" | "none""rows"
stickyHeader
Header stays visible while the container scrolls (opaque fill).
booleanfalse
stickyFirstColumn
Pins the first column (inset-inline-start, RTL-aware).
booleanfalse
layout
fixed honours the widths you set on TableHead.
"auto" | "fixed""auto"
aria-label
Required unless the table has a TableCaption (dev warning).
string—

TableContainer

PropTypeDefault
aria-label
Names the focusable scroll region (role="region", tabIndex 0).
string—
maxHeight
Vertical scroll limit, e.g. "24rem" — needed for stickyHeader.
string—

TableHead

PropTypeDefault
numeric
End-aligned header for a number column.
booleanfalse
align
Explicit alignment (logical).
"start" | "center" | "end"—
sort
Current sort; sets aria-sort and the icon.
"asc" | "desc" | false—
onSort
Makes the label a sort button.
() => void—
scope
Header scope.
"col" | "colgroup""col"

TableCell

PropTypeDefault
numeric
text-end, tabular, mono, no wrap.
booleanfalse
align
Explicit alignment.
"start" | "center" | "end"—
truncate
true → one line with ellipsis; a number clamps to that many lines.
boolean | number—
rowHeader
Render as <th scope="row">.
booleanfalse

TableRow

PropTypeDefault
selected
data-state="selected" + aria-selected.
boolean—
disabled
Muted row, aria-disabled.
boolean—
highlighted
Accent bar at the start edge.
boolean—

TableCaption

PropTypeDefault
visuallyHidden
Caption for screen readers only.
booleanfalse
side
Caption position.
"top" | "bottom""bottom"

TableEmpty

PropTypeDefault
colSpan
Required. Columns to span.
number—
title
Main line (dictionary table.empty).
ReactNode"No results"
description
Secondary line.
ReactNode—
icon
Replace or hide the icon.
ReactNode | false—
children
Actions (e.g. Clear filters).
ReactNode—

TableHeader / TableBody / TableFooter

PropTypeDefault
...props
thead / tbody / tfoot.
HTMLAttributes—
Previous
Switch
Next
Tabs