Primitive / Organismbeta

Data Table

Feature-rich table wrapper with search, sorting, pagination, selection, and column controls.

@glinui/uiComponent: data-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 data-table

Usage

Rows


Glin UI	Active	18400
Glin Docs	Monitoring	7920
Registry	Active	12340

Showing 1-3 of 4

Page 1 of 2

TSX

1import { Badge, DataTable } from "@glinui/ui"
2
3const columns = [
4  { id: "project", header: "Project", accessor: "project" },
5  {
6    id: "status",
7    header: "Status",
8    accessor: "status",
9    cell: ({ value }) => <Badge variant={value === "Active" ? "glass" : "outline"}>{String(value)}</Badge>
10  },
11  { id: "mrr", header: "MRR", accessor: "mrr", align: "right" }
12]
13
14const data = [
15  { id: "p1", project: "Glin UI", status: "Active", mrr: 18400 },
16  { id: "p2", project: "Glin Docs", status: "Monitoring", mrr: 7920 },
17  { id: "p3", project: "Registry", status: "Active", mrr: 12340 },
18  { id: "p4", project: "CLI", status: "Paused", mrr: 2310 }
19]
20
21export function Demo() {
22  return (
23    <DataTable
24      columns={columns}
25      data={data}
26      selectable
27      striped
28      stickyHeader
29      grid
30      variant="glass"
31      pageSize={3}
32      getRowId={(row) => row.id}
33    />
34  )
35}

Accessibility

Built on semantic table primitives for screen reader compatibility.
Sorting controls are keyboard-focusable buttons in header cells.
Selection checkboxes provide explicit labels.

Keyboard Interactions

Key	Action
`Tab`	Move across toolbar, headers, and pagination controls.
`Enter / Space`	Activate sort, selection, and pagination controls.

ARIA Attributes

`aria-label` for search and selection controls
`role="checkbox"` for selectable rows
Native table semantics from the base table primitive

Reduced Motion

Inherits reduced-motion behavior from Table and action/input primitives.

Affected properties

background-coloropacity

API Reference

Prop	Type	Required	Default	Description
`columns`	`DataTableColumn<TData>[]`	Yes	`-`	Column schema with accessor, sorting, visibility, and custom cell rendering.
`data`	`TData[]`	Yes	`-`	Array of row objects.
`searchable`	`boolean`	No	`true`	Enable built-in text filtering.
`selectable`	`boolean`	No	`false`	Adds row-selection checkboxes.
`pageSize`	`number`	No	`10`	Initial page size.
`pageSizeOptions`	`number[]`	No	`[10, 20, 50]`	Page-size choices shown in toolbar.
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid" \| "matte"`	-	`default`	Underlying table surface variant.
`className`	`string`	No	`-`	Auto-generated from TypeScript source.
`emptyMessage`	`string`	No	`"No results."`	Auto-generated from TypeScript source.
`getRowId`	`(row: TData, index: number) => string`	No	`-`	Auto-generated from TypeScript source.
`onRowClick`	`(row: TData) => void`	No	`-`	Auto-generated from TypeScript source.
`onSelectionChange`	`(rows: TData[]) => void`	No	`-`	Auto-generated from TypeScript source.
`rowTone`	`(row: TData) => TableRowTone`	No	`-`	Auto-generated from TypeScript source.
`searchPlaceholder`	`string`	No	`"Search rows..."`	Auto-generated from TypeScript source.

Source

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

Import

import { DataTable } from "@glinui/ui"

Source Files

data-table.tsx table.tsx

data-table.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/data-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

DataTableProps

`DataTableProps`

Prop	Type	Required	Default	Description
`className`	`string`	No	`-`	-
`columns`	`DataTableColumn<TData>[]`	Yes	`-`	-
`data`	`TData[]`	Yes	`-`	-
`emptyMessage`	`string`	No	`"No results."`	-
`getRowId`	`(row: TData, index: number) => string`	No	`-`	-
`onRowClick`	`(row: TData) => void`	No	`-`	-
`onSelectionChange`	`(rows: TData[]) => void`	No	`-`	-
`pageSize`	`number`	No	`10`	-
`pageSizeOptions`	`number[]`	No	`[10, 20, 50]`	-
`rowTone`	`(row: TData) => TableRowTone`	No	`-`	-
`searchable`	`boolean`	No	`true`	-
`searchPlaceholder`	`string`	No	`"Search rows..."`	-
`selectable`	`boolean`	No	`false`	-