Primitive / Organismbeta

Table

Composable data table with semantic sections and glass variant support.

@glinui/uiComponent: table

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add table

Usage$

Use Table when you need low-level, fully custom markup. If you want built-in search, sorting, pagination, row selection, and column controls, use DataTable at /docs/components/base/data-table.

Project	Status
Glin UI	Active

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"
2
3export function TableBasicDemo() {
4return (
5  <Table>
6    <TableHeader>
7      <TableRow>
8        <TableHead>Project</TableHead>
9        <TableHead>Status</TableHead>
10      </TableRow>
11    </TableHeader>
12    <TableBody>
13      <TableRow>
14        <TableCell>Glin UI</TableCell>
15        <TableCell>Active</TableCell>
16      </TableRow>
17    </TableBody>
18  </Table>
19)
20}

Examples$

When to choose Table vs DataTable$

Use Table for invoices, comparison matrices, read-only reports, and layouts where you control every row and cell.
Use DataTable for operational data views where users need filtering, sorting, pagination, and row selection with minimal setup.

Glass Variant$

Quarterly metrics
Metric	Value
Conversion	7.3%

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, TableCaption } from "@glinui/ui"
2
3export function TableGlassDemo() {
4return (
5  <Table variant="glass" grid>
6    <TableCaption>Quarterly metrics</TableCaption>
7    <TableHeader>
8      <TableRow>
9        <TableHead>Metric</TableHead>
10        <TableHead align="right">Value</TableHead>
11      </TableRow>
12    </TableHeader>
13    <TableBody>
14      <TableRow>
15        <TableCell>Conversion</TableCell>
16        <TableCell align="right">7.3%</TableCell>
17      </TableRow>
18    </TableBody>
19  </Table>
20)
21}

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 TableStickyDemo() {
11return (
12  <Table stickyHeader striped containerClassName="max-h-56">
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}

Sticky First Column$

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 TableStickyFirstColumnDemo() {
4return (
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$

Uses semantic table elements (table, thead, tbody, th, td, caption).
Keep column headers descriptive for screen reader table navigation.
Use TableCaption to provide context when needed.

Reduced Motion$

Row hover transitions respect reduced-motion preferences.

API Reference$

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

Source$

TSX

1import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@glinui/ui"

packages/ui/src/components/table.tsx

packages/ui/src/tests/table.test.tsx

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"`	-