Primitive / Moleculebeta

Table

Composable data table with semantic sections and glass variant support.

@glinui/uiComponent: table

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add table

Usage

Basic

Project	Status	MRR
Glin UI	Shipping	$18,400
Glin Docs	Active	$7,920

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Table>
6      <TableHeader>
7        <TableRow>
8          <TableHead>Project</TableHead>
9          <TableHead>Status</TableHead>
10          <TableHead align="right">MRR</TableHead>
11        </TableRow>
12      </TableHeader>
13      <TableBody>
14        <TableRow>
15          <TableCell>Glin UI</TableCell>
16          <TableCell>Shipping</TableCell>
17          <TableCell align="right">$18,400</TableCell>
18        </TableRow>
19        <TableRow>
20          <TableCell>Glin Docs</TableCell>
21          <TableCell>Active</TableCell>
22          <TableCell align="right">$7,920</TableCell>
23        </TableRow>
24      </TableBody>
25    </Table>
26  )
27}

Sticky Header + Striped

Region	Users	Conversion
North America	12,400	8.2%
Europe	9,280	7.5%
APAC	15,032	6.9%
LATAM	4,310	5.8%
Middle East	2,980	6.2%
Africa	1,740	4.7%

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"
2
3const rows = [
4  { region: "North America", users: "12,400", conversion: "8.2%" },
5  { region: "Europe", users: "9,280", conversion: "7.5%" },
6  { region: "APAC", users: "15,032", conversion: "6.9%" },
7  { region: "LATAM", users: "4,310", conversion: "5.8%" }
8]
9
10export function Demo() {
11  return (
12    <Table stickyHeader striped containerClassName="max-h-52">
13      <TableHeader>
14        <TableRow>
15          <TableHead>Region</TableHead>
16          <TableHead align="right">Users</TableHead>
17          <TableHead align="right">Conversion</TableHead>
18        </TableRow>
19      </TableHeader>
20      <TableBody>
21        {rows.map((row) => (
22          <TableRow key={row.region}>
23            <TableCell>{row.region}</TableCell>
24            <TableCell align="right">{row.users}</TableCell>
25            <TableCell align="right">{row.conversion}</TableCell>
26          </TableRow>
27        ))}
28      </TableBody>
29    </Table>
30  )
31}

Glass Metric Grid

Feature	Owner	Velocity	Status
Interactive docs search + semantic indexing	Core	+18%	On Track
Registry artifact validation pipeline	Infra	+9%	Monitoring

TSX

1import { Badge, Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Table variant="glass" grid>
6      <TableHeader>
7        <TableRow>
8          <TableHead>Feature</TableHead>
9          <TableHead align="center">Owner</TableHead>
10          <TableHead align="right">Velocity</TableHead>
11          <TableHead align="right">Status</TableHead>
12        </TableRow>
13      </TableHeader>
14      <TableBody>
15        <TableRow>
16          <TableCell truncate>Interactive docs search + semantic indexing</TableCell>
17          <TableCell align="center">Core</TableCell>
18          <TableCell align="right">+18%</TableCell>
19          <TableCell align="right"><Badge variant="glass">On Track</Badge></TableCell>
20        </TableRow>
21        <TableRow>
22          <TableCell truncate>Registry artifact validation pipeline</TableCell>
23          <TableCell align="center">Infra</TableCell>
24          <TableCell align="right">+9%</TableCell>
25          <TableCell align="right"><Badge variant="outline">Monitoring</Badge></TableCell>
26        </TableRow>
27      </TableBody>
28    </Table>
29  )
30}

Sticky First Column

Keep identifiers visible in horizontally scrollable comparison tables.

Feature	Jan	Feb	Mar	Apr	May
Active Teams	89	94	102	108	113
Release Velocity	+8%	+11%	+14%	+16%	+19%

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Table stickyFirstColumn noWrap variant="matte">
6      <TableHeader>
7        <TableRow>
8          <TableHead>Feature</TableHead>
9          <TableHead align="right">Jan</TableHead>
10          <TableHead align="right">Feb</TableHead>
11          <TableHead align="right">Mar</TableHead>
12          <TableHead align="right">Apr</TableHead>
13          <TableHead align="right">May</TableHead>
14        </TableRow>
15      </TableHeader>
16      <TableBody>
17        <TableRow>
18          <TableCell>Active Teams</TableCell>
19          <TableCell align="right">89</TableCell>
20          <TableCell align="right">94</TableCell>
21          <TableCell align="right">102</TableCell>
22          <TableCell align="right">108</TableCell>
23          <TableCell align="right">113</TableCell>
24        </TableRow>
25        <TableRow tone="success">
26          <TableCell>Release Velocity</TableCell>
27          <TableCell align="right">+8%</TableCell>
28          <TableCell align="right">+11%</TableCell>
29          <TableCell align="right">+14%</TableCell>
30          <TableCell align="right">+16%</TableCell>
31          <TableCell align="right">+19%</TableCell>
32        </TableRow>
33      </TableBody>
34    </Table>
35  )
36}

Accessibility

Native `<table>` semantics with proper `<thead>`/`<tbody>` structure.
Use `<th>` for column headers.
Sticky headers preserve semantics because structure remains native.

ARIA Attributes

Native table semantics with `<th scope>`

Reduced Motion

Row hover color transitions use motion-safe classes with reduced-motion fallback.

Affected properties

background-color

API Reference

`Table`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid" \| "matte"`	-	`default`	Visual surface treatment for the container.
`size`	`"sm" \| "md" \| "lg"`	-	`md`	Text and spacing scale.
`stickyHeader`	`boolean`	-	`false`	Makes `<TableHeader />` stick to the top while scrolling.
`stickyFirstColumn`	`boolean`	-	`false`	Pins the first column while horizontally scrolling.
`striped`	`boolean`	-	`false`	Applies alternating row background treatment.
`interactive`	`boolean`	-	`true`	Enables row hover treatment.
`grid`	`boolean`	-	`false`	Adds vertical grid separators between cells.
`layout`	`"auto" \| "fixed"`	-	`auto`	Sets table layout algorithm.
`noWrap`	`boolean`	-	`false`	Forces single-line cell and header content.
`rowDividers`	`boolean`	-	`true`	Toggles horizontal row borders.
`containerClassName`	`string`	-	`-`	Class names for the scroll container wrapper.
`align`	`"left" \| "center" \| "right"`	No	`"left"`	Auto-generated from TypeScript source.
`sticky`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`truncate`	`boolean`	No	`false`	Auto-generated from TypeScript source.

`TableHeader`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`align`	`"left" \| "center" \| "right"`	No	`"left"`	Auto-generated from TypeScript source.
`sticky`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`truncate`	`boolean`	No	`false`	Auto-generated from TypeScript source.

`TableRow`

Prop	Type	Required	Default	Description
`tone`	`"default" \| "info" \| "success" \| "warning" \| "danger"`	-	`default`	Applies semantic row emphasis.
`className`	`string`	-	`-`	Additional class names.
`align`	`"left" \| "center" \| "right"`	No	`"left"`	Auto-generated from TypeScript source.
`sticky`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`truncate`	`boolean`	No	`false`	Auto-generated from TypeScript source.

`TableHead`

Prop	Type	Required	Default	Description
`align`	`"left" \| "center" \| "right"`	No	`left`	Text alignment for header cells.
`sticky`	`boolean`	No	`false`	Pins a specific header cell to the left.
`className`	`string`	-	`-`	Additional class names.
`truncate`	`boolean`	No	`false`	Auto-generated from TypeScript source.

`TableBody`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`align`	`"left" \| "center" \| "right"`	No	`"left"`	Auto-generated from TypeScript source.
`sticky`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`truncate`	`boolean`	No	`false`	Auto-generated from TypeScript source.

`TableCell`

Prop	Type	Required	Default	Description
`align`	`"left" \| "center" \| "right"`	No	`left`	Text alignment for body cells.
`truncate`	`boolean`	No	`false`	Applies single-line truncation with ellipsis.
`sticky`	`boolean`	No	`false`	Pins a specific body cell to the left.
`className`	`string`	-	`-`	Additional class names.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Table } from "@glinui/ui"

Source Files

table.tsx

table.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/table.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TableProps

`TableCellProps`

Prop	Type	Required	Default	Description
`align`	`"left" \| "center" \| "right"`	No	`"left"`	-
`sticky`	`boolean`	No	`false`	-
`truncate`	`boolean`	No	`false`	-

`TableHeadProps`

Prop	Type	Required	Default	Description
`align`	`"left" \| "center" \| "right"`	No	`"left"`	-
`sticky`	`boolean`	No	`false`	-

`TableProps`

Prop	Type	Required	Default	Description
`containerClassName`	`string`	No	`-`	-
`grid`	`boolean`	No	`false`	-
`interactive`	`boolean`	No	`true`	-
`layout`	`"auto" \| "fixed"`	No	`"auto"`	-
`noWrap`	`boolean`	No	`false`	-
`rowDividers`	`boolean`	No	`true`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from tableWrapperVariants.
`stickyFirstColumn`	`boolean`	No	`false`	-
`stickyHeader`	`boolean`	No	`false`	-
`striped`	`boolean`	No	`false`	-
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from tableWrapperVariants.

`TableRowProps`

Prop	Type	Required	Default	Description
`tone`	`TableRowTone`	No	`"default"`	-