Data

Tables for dense data views

Tables align columns for scannable datasets—admin consoles, billing histories, and analytics exports. Compose them in React pages and Next.js server-rendered listings with stable column widths.

Recent deploys
Service	Region	Latency
API	iad	42ms
Workers	fra	28ms

Examples

Bordered appearance with sticky header for long lists.

Id	Name
1	Alpha
2	Beta
3	Gamma

Table variants examples

Density, row style, and sticky header with scrollable preview. Each code view starts with Variant: naming the row.

Appearance: default | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: bordered | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: ghost | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: sky | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: rose | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: purple | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: pink | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: orange | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: yellow | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: teal | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: indigo | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: emerald | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: gray | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: amber | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: violet | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: sm | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: lg | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: striped | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: bordered | Size: md | Sticky Header: true

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

Appearance: bordered | Size: md | Sticky Header: false

Name	Role	Email	Age
User 1	Admin	user1a@example.com	20
User 2	User	user2a@example.com	25
User 3	User	user3a@example.com	30
User 4	User	user4a@example.com	30

What it does

Use semantic table elements for accessibility by default.

Sticky headers help long scroll regions remain navigable.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Provide captions or aria-labels when the table’s purpose is not obvious from surrounding headings.

Common use cases

Operational dashboards with sortable columns.
Audit logs with monospace numerics.
Pricing matrices with tier comparisons.
Inventory views with row-level actions.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Table component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize table with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Table implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.