Table

Styled HTML table primitives and a full-featured data table powered by TanStack Table v8

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@plexui/ui/components/Table";import { DataTable, DataTableColumnHeader } from "@plexui/ui/components/DataTable";

Table Primitives

Overview

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
Total			$1,750.00

Product	Qty	Price	Total
Pro Plan	3	$29.00	$87.00
Storage Add-on	1	$9.00	$9.00
Subtotal			$96.00

Minimal

Name	Title	Email
Lindsay Walton	Front-end Developer	lindsay@example.com
Courtney Henry	Designer	courtney@example.com
Tom Cook	Director of Product	tom@example.com

DataTable

Variant

variant

	Role	Department	Status
Lindsay Walton	Front-end Developer	Engineering	Active
Courtney Henry	Designer	Design	Active
Tom Cook	Director of Product	Product	Active
Whitney Francis	Copywriter	Marketing	Inactive
Leonard Krasner	Senior Developer	Engineering	Active
Floyd Miles	UX Researcher	Design	Active

Sorting


Alicia Bell	Product Manager	Active
Anna Roberts	Backend Developer	Active
Benjamin Russel	DevOps Engineer	Active
Courtney Henry	Designer	Active
Emily Selman	VP Marketing	Active

Rows per page

1–5 of 15

Pagination

ID	Name	Department	Status
USR-001	Lindsay Walton	Engineering	Active
USR-002	Courtney Henry	Design	Active
USR-003	Tom Cook	Product	Active
USR-004	Whitney Francis	Marketing	Inactive
USR-005	Leonard Krasner	Engineering	Active

Rows per page

1–5 of 15

Row click

	Email	Role
Lindsay Walton	lindsay@example.com	Front-end Developer
Courtney Henry	courtney@example.com	Designer
Tom Cook	tom@example.com	Director of Product
Whitney Francis	whitney@example.com	Copywriter

Rows per page

1–4 of 8

Click a row to see selected user details.

Cell variants

ID	Name	Status	Joined	Salary
USR-001	Lindsay Walton	Active	Jan 15, 2023, 09:00 AM	$95,000
USR-002	Courtney Henry	Active	Mar 22, 2023, 09:00 AM	$88,000
USR-003	Tom Cook	Active	Jun 10, 2022, 09:00 AM	$120,000
USR-004	Whitney Francis	Inactive	Jul 4, 2023, 09:00 AM	$72,000
USR-005	Leonard Krasner	Active	Feb 18, 2022, 09:00 AM	$115,000
USR-006	Floyd Miles	Active	May 11, 2023, 09:00 AM	$85,000

Rows per page

1–6 of 15

Filtering

globalFilter

	Role	Department	Status
Lindsay Walton	Front-end Developer	Engineering	Active
Courtney Henry	Designer	Design	Active
Tom Cook	Director of Product	Product	Active
Whitney Francis	Copywriter	Marketing	Inactive
Leonard Krasner	Senior Developer	Engineering	Active

Rows per page

1–5 of 15

Column visibility

role

department

status

salary

	Role	Department	Status	Salary
Lindsay Walton	Front-end Developer	Engineering	Active	$95,000
Courtney Henry	Designer	Design	Active	$88,000
Tom Cook	Director of Product	Product	Active	$120,000
Whitney Francis	Copywriter	Marketing	Inactive	$72,000
Leonard Krasner	Senior Developer	Engineering	Active	$115,000

Rows per page

1–5 of 15

Empty state

ID	Name	Email	Status
No users found.

Reference

Table Primitives

Prop	Type	Default	Description
`Table`	`table`	—	Root table container with horizontal scroll wrapper
`TableHeader`	`thead`	—	Table header group
`TableBody`	`tbody`	—	Table body group
`TableFooter`	`tfoot`	—	Table footer group
`TableRow`	`tr`	—	Table row
`TableHead`	`th`	—	Table header cell
`TableCell`	`td`	—	Table data cell
`TableCaption`	`caption`	—	Table caption

DataTable

Prop	Type	Default	Description
`columns`	`ColumnDef<TData>[]`	—	Column definitions following TanStack Table v8 API
`data`	`TData[]`	—	Data array to display
`variant`	`"default" \| "bordered"`	`"default"`	Visual variant — bordered adds a rounded border and tinted header
`pageSize`	`number`	`10`	Rows per page. Set 0 or Infinity to disable pagination
`initialSorting`	`SortingState`	—	Initial column sorting state
`globalFilter`	`string`	—	Controlled search/filter string
`onGlobalFilterChange`	`(value: string) => void`	—	Callback when filter changes
`onRowClick`	`(row: TData) => void`	—	Click handler for rows, makes rows interactive
`columnVisibility`	`VisibilityState`	—	Controlled column visibility state
`onColumnVisibilityChange`	`(visibility: VisibilityState) => void`	—	Callback when visibility changes
`enableRowSelection`	`boolean`	`false`	Enable row selection checkboxes
`rowSelection`	`RowSelectionState`	—	Controlled row selection state
`onRowSelectionChange`	`(selection: RowSelectionState) => void`	—	Callback when selection changes
`getRowId`	`(row: TData) => string`	—	Custom row ID accessor
`emptyMessage`	`ReactNode`	`"No results."`	Shown when no rows
`showPagination`	`boolean`	`true`	Whether to show pagination controls
`className`	`string`	—	Class applied to outermost wrapper

DataTableColumnHeader

Prop	Type	Default	Description
`column`	`Column<TData, TValue>`	—	TanStack Table column object
`title`	`string`	—	Display text for the header

Column helpers

Prop	Type	Default	Description
`idCell(accessor)`	`CellComponent`	—	Monospace ID with copy-on-click tooltip
`dateTimeCell(accessor, options?)`	`CellComponent`	—	Formatted datetime with Intl.DateTimeFormat
`statusCell(accessor, colorMap?)`	`CellComponent`	—	Badge cell with automatic status-to-color mapping
`tooltipHeader(label, description)`	`HeaderComponent`	—	Header with dashed underline and info tooltip

Table

Table Primitives

Overview

With footer

Minimal

DataTable

Variant

Sorting

Row click

Cell variants

Filtering

Column visibility

Empty state

Reference

Table Primitives

DataTable

DataTableColumnHeader

Column helpers

On this page