DataTable

The most advanced component — combines render props for custom cell rendering, a headless useDataTable() hook for sorting/pagination state, and compound pagination controls.

Full Example

Click column headers to sort. The Age column uses a custom render prop for styled badges.

User Management

Avatars, role badges, colored status pills, and pagination.

Product Catalog

Category chips, formatted prices, stock levels with color coding, and star ratings.

Transactions

Financial table with monospace IDs, colored amounts (green for credits, red for debits), and payment method badges.

Task Tracker

A project management table with checkboxes, priority badges, status chips, and avatar assignees.

Analytics Dashboard

Page analytics with inline progress bars for bounce rates and monospace page paths.

With Actions

Team members table with inline switches for status and action buttons for settings and delete.

Striped

Alternating row backgrounds for better readability.

Minimal

No outer border, transparent header — clean and lightweight.

Bordered

Every cell has visible borders for a structured spreadsheet look.

Sizes

Three density levels — compact, default, and spacious.

Empty State

Custom empty state with icon and message when no data is available.

Props

Prop	Type	Default	Description
`data`	`T[]`	—	Array of data rows.
`columns`	`ColumnDef<T>[]`	—	Column definitions.
`pageSize`	`number`	`0`	Rows per page. Set to 0 for no pagination.
`emptyState`	`() => ReactNode`	—	Render prop for empty state.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for sort indicators and focus rings.
`variant`	`"default" \| "striped" \| "minimal" \| "bordered"`	`"default"`	Visual style variant for the table.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Row density — compact, default, or spacious.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-option-hover`	`CSS variable`	`gradient`	Override the row hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}

data

T[]

Array of data rows.

columns

ColumnDef<T>[]

Column definitions.

pageSize0

number

Rows per page. Set to 0 for no pagination.

emptyState

() => ReactNode

Render prop for empty state.

color"blue"

Accent color for sort indicators and focus rings.

variant"default"

"default" | "striped" | "minimal" | "bordered"

Visual style variant for the table.

size"md"

"sm" | "md" | "lg"

Row density — compact, default, or spacious.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-option-hovergradient

CSS variable

Override the row hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}