Table

<Table>TailwindCSS ModulesProduction Stable

A lightweight, high-performance table primitive built on TanStack Table v8. Provides accessible HTML table semantics, multi-column sorting, row selection checkboxes, animated skeleton loading, and custom cell formatting with zero layout shifts.

InstallationColoxo CLI

npx coloxo add table --style coloxo-css

ES Module ImportPlayground / npm package

import { Table, TableColumn, TableSorting, TableSelection } from '@coloxo/ui';

Design Tokens:

--cx-color-border-secondary--cx-color-bg-secondary--cx-color-bg-brand-primary--cx-radius-lg: 12pxTanStack Table v8 Core

1. Interactive Preview

Comprehensive data table showcasing interactive column sorting, multi-row selection, avatars, and custom action menus.

Interactive Transactions Table

Settlements Ledger8 records1 selected

	Reference
Acme Cloud Services billing@acmecloud.com	TXN-9021	$3,840.50	Paid	2026-10-12
Starlight Media Group finance@starlight.io	TXN-9022	$1,250.00	Paid	2026-10-11
Hyperion Robotics accounts@hyperion.tech	TXN-9023	€14,890.00	Pending	2026-10-10
Nexus Global Logistics ops@nexuslogistics.com	TXN-9024	$6,720.80	Failed	2026-10-09
Aura Creative Studio hello@aurastudio.design	TXN-9025	$450.00	Refunded	2026-10-08
Vanguard Security Labs invoices@vanguardsec.co	TXN-9026	$9,200.00	Paid	2026-10-07
Zenith Telemetry pay@zenithtelemetry.net	TXN-9027	€2,150.25	Paid	2026-10-06
Pinnacle AI Systems treasury@pinnacle.ai	TXN-9028	$18,400.00	Pending	2026-10-05

Sorted by date (desc)Showing 8 of 8 settled transactions

2. Sorting & Multi-Row Selection

TanStack Table provides sorting algorithms and multi-row selection with shift/indeterminate synchronization.

Interactive Column Sorting

Click any column header with sort indicators to change sort directionActive: amount · DESC


Hyperion Robotics	€14,890.00	Pending	2026-10-10
Nexus Global Logistics	$6,720.80	Failed	2026-10-09
Acme Cloud Services	$3,840.50	Paid	2026-10-12
Starlight Media Group	$1,250.00	Paid	2026-10-11

Row Selection (Checkboxes)

Header checkbox toggles all rows; individual checkboxes toggle single rows with data-selected highlight.

Client	Amount	Status
Acme Cloud Services	$3,840.50	Paid
Starlight Media Group	$1,250.00	Paid
Hyperion Robotics	€14,890.00	Pending
Nexus Global Logistics	$6,720.80	Failed

3. States & Feedback

Built-in skeleton loading shimmers and custom empty state placeholders.

Skeleton Loading State

When loading is true, 5 pulse skeleton rows replace data rows without layout shift.

	Reference
Acme Cloud Services billing@acmecloud.com	TXN-9021	$3,840.50	Paid
Starlight Media Group finance@starlight.io	TXN-9022	$1,250.00	Paid
Hyperion Robotics accounts@hyperion.tech	TXN-9023	€14,890.00	Pending

Empty State

	Reference
No transactions found No payment records match your current filter criteria.

4. Interactive Props Configurator

Toggle Table props in real-time to preview dynamic behaviors, code generation, and visual layout.

Props Inspector & Controls

Row Count

Row Selection

Checkbox column & multi-select

Sortable Headers

Click headers to sort asc/desc

Loading State

Pulse skeleton shimmer rows

Empty Dataset

Centered empty placeholder state

Table Caption

Accessible <caption> atop table

Visual Render CanvasRECORDS: 5 | SELECTION: ON | SORTING: ON

5 records1 of 5 selectedSorted: amount (asc)


Aura Creative Studio hello@aurastudio.design	$450.00	Refunded	2026-10-08
Starlight Media Group finance@starlight.io	$1,250.00	Paid	2026-10-11
Acme Cloud Services billing@acmecloud.com	$3,840.50	Paid	2026-10-12
Nexus Global Logistics ops@nexuslogistics.com	$6,720.80	Failed	2026-10-09
Hyperion Robotics accounts@hyperion.tech	€14,890.00	Pending	2026-10-10

💡 Tip: Click column headers (Client, Amount, Status, Date) to toggle ascending/descending sorting.Select all rows via header checkbox, or select individual rows.

tsx

1import { Table, type TableSorting } from "@coloxo/ui";2import { useState } from "react";34const [sorting, setSorting] = useState<TableSorting>({"id":"amount","desc":false});5const [selectedIds, setSelectedIds] = useState<string[]>(["TXN-9021"]);67<Table8  columns={columns.map((column) => ({ ...column, sortable: true }))}9  data={transactions.slice(0, 5)}10  sorting={sorting}11  onSortingChange={setSorting}12  selection={{13    selectedIds,14    onChange: setSelectedIds,15  }}16/>

5. Dark Theme Calibration

Engineered for deep dashboard environments (#0B1120 / slate-900), maintaining strict WCAG 2.1 AA text contrast and subtle slate borders without harsh white lines.

Dark Mode Production Theme

✓ Slate-800 borders · Brand blue row selection tint · CanvasText AA contrast

Cloud Infrastructure Nodes

Production cluster node telemetry & health monitoring

	Cluster	CPU Utilization	Memory	Health	Uptime
node-us-east-01	k8s-prod-primary	48%	12.4 / 32 GB	healthy	99.98%
node-us-east-02	k8s-prod-primary	82%	28.1 / 32 GB	warning	99.94%
node-eu-west-01	k8s-eu-edge	24%	8.2 / 32 GB	healthy	100.0%
node-ap-southeast-01	k8s-apac-failover	96%	31.8 / 32 GB	critical	98.72%

Selected Row State

data-selected maps to --cx-color-bg-brand-primary

Subtle brand navy tint highlights selected rows without contrast failure.

Header Contrast

Sticky table header friendly

Column headers use slate-800 backgrounds with slate-400 titles.

Monospace Alignment

tabular-nums & font-mono integration

Tabular figures ensure vertical alignment across currencies and metrics.

6. Enterprise Layout Compositions

Demonstrating Table integration inside Cards, administrative panels, and data dashboards.

Recent Wire Invoices

Settlement records for Q4 2026 enterprise accounts

Client	Amount	Status
Acme Cloud Services Visa •••• 4242	$3,840.50	Paid
Starlight Media Group Mastercard •••• 8821	$1,250.00	Paid
Hyperion Robotics Bank Wire (SEPA)	€14,890.00	Pending

Workspace Collaborators

Manage role-based access control and security status

Member	Role	Status
Olivia Rhye olivia@coloxo.app	Owner	active
Phoenix Baker phoenix@coloxo.app	Admin	active
Lana Steiner lana@coloxo.app	Member	active
Demi Wilkinson demi@coloxo.app	Member	suspended

Accessibility

Native HTML Table Semantics

Constructed with semantic <table>, <thead>, <tbody>, <th>, <td>, and optional <caption> elements, allowing screen readers to convey tabular structures, row counts, and column header associations automatically.

ARIA Sort State Indication

Sortable column header cells programmatically declare aria-sort="ascending", aria-sort="descending", or aria-sort="none", announcing active ordering to assistive technologies upon user toggle.

Accessible Selection Controls

Bulk-selection header checkboxes and row checkboxes include descriptive aria-label="Select all rows" and aria-label="Select row" attributes with proper focus-visible indicator rings.

Keyboard Operability

Sortable headers and row checkboxes are fully operable via Tab, Enter, and Space keys. Interactive controls maintain a minimum 4.5:1 WCAG 2.1 AA color contrast ratio across light and dark modes.

Props

Name	Type	Default	Description
columns	TableColumn<T>[]	—	Array of column definitions specifying header title, data accessor, custom cell renderers, sortability, and width.
data	T[]	—	Dataset array of record objects to render across table rows.
sorting	TableSorting	—	Controlled column sorting state: { id: string, desc: boolean } \| null.
defaultSorting	TableSorting	null	Initial uncontrolled column sorting state.
onSortingChange	(sorting: TableSorting) => void	—	Callback fired when the user toggles a sortable column header.
selection	TableSelection	—	Row selection configuration object containing selectedIds array and onChange handler.
loading	boolean	false	When true, displays 5 animated skeleton shimmer rows in place of data rows.
empty	ReactNode	—	Custom empty state component rendered when data contains zero items. Defaults to <EmptyState />.
caption	string	—	Accessible caption displayed at the top of the table for screen readers and visible titling.
getRowId	(row: T, index: number) => string	—	Custom row key extractor function. Defaults to row.id ?? index.
className	string	—	Additional CSS class names applied to the outer table container wrapper.

TableColumn

Properties configuring individual table columns in the columns array.

Name	Type	Default	Description
id	string	—	Unique column identifier used for sorting keys and cell mapping.
header	ReactNode	—	Header cell content; rendered as text, icon, or custom JSX node.
accessor	keyof T \| ((row: T) => unknown)	—	Property key on row object or accessor function extracting cell value.
cell	(ctx: { row: T; value: unknown }) => ReactNode	—	Custom cell renderer function receiving the current row record and value.
sortable	boolean	false	When true, renders clickable header with sort indicator icons and enables TanStack sorting.
width	number \| string	—	Optional column width in pixels (number) or CSS string.

TableSelection

Configuration object for row selection.

Name	Type	Default	Description
selectedIds	string[]	—	Array of selected row IDs matching getRowId or row.id.
onChange	(ids: string[]) => void	—	Callback invoked whenever row selection changes (header or row checkboxes).

TableSorting

Column sorting state representation.

Name	Type	Default	Description
id	string	—	Column id currently being sorted.
desc	boolean	—	True for descending sort direction; false for ascending.