On this page:

Table

Preview

index.tsx

ID	Name	Category	Price	Stock
1	Item 1	Electronics	$10	0
2	Item 2	Clothing	$27	13
3	Item 3	Food	$44	26
4	Item 4	Books	$61	39
5	Item 5	Electronics	$78	52

Advanced Table

Preview

index.tsx

Product Inventory

Complete inventory with advanced table features

	ID	PRODUCT NAME	CATEGORY	PRICE ($)	IN STOCK	RATING	LAST UPDATED
	1	Item 1	Electronics	$10	0 units	★☆☆☆☆	2025-01-01
	2	Item 2	Clothing	$27	13 units	★☆☆☆☆	2025-01-12
	3	Item 3	Food	$44	26 units	★★☆☆☆	2025-01-23
	4	Item 4	Books	$61	39 units	★★★☆☆	2025-01-03
	5	Item 5	Electronics	$78	52 units	★★★☆☆	2025-01-14

Preview

index.tsx

Project Management

Track and manage all projects

	PROJECT NAME	PM	DEADLINE	STATUS	TEAM
	Design System	Kristin Watson	January 1, 2025	On hold
	Mobile App	Cody Fisher	March 6, 2025	On track	+1
	Landing page	Kristin Watson	May 11, 2025	At risk	+2
	Game UI	Cody Fisher	July 16, 2025	On hold
	Dashboard	Kristin Watson	September 21, 2025	On track	+1
	CRM System	Cody Fisher	November 26, 2025	At risk	+2
	E-commerce	Kristin Watson	January 3, 2025	On hold
	Analytics	Cody Fisher	March 8, 2025	On track	+1
	Design System	Kristin Watson	May 13, 2025	At risk	+2
	Mobile App	Cody Fisher	July 18, 2025	On hold

Design Tokens for Table

Token	Color for	State/Meaning
--par-color-bg-table	Table background	Default/Enabled
--par-color-bg-table-header-cell-item-enabled	Header cell background	Enabled
--par-color-bg-table-header-cell-item-hovered	Header cell background	Hovered
--par-color-bg-table-header-cell-item-active	Header cell background	Active
--par-color-bg-table-body-row-item-enabled	Row background	Enabled
--par-color-bg-table-body-row-item-hovered	Row background	Hovered
--par-color-bg-table-batch-action-selected-item	Row background	Selected
--par-color-border-table	Table border	Any
--par-color-text-table-header-cell-item-enabled	Header cell text	Enabled
--par-color-text-table-header-cell-item-hovered	Header cell text	Hovered
--par-color-text-table-header-cell-item-active	Header cell text	Active
--par-color-text-table-content-item	Table cell text	Any

Table API Reference

`<Table />` Props

Prop	Type	Default	Description
data	`object[]`		Data to display in the table.
columns	`TableColumn[]`		Column definitions, see TableColumn below.
color	`'neutral' \| 'accent'`	`'neutral'`	Table color scheme.
selectable	`boolean`	`false`	Enable row selection with checkboxes.
selectedRows	`object[]`	`[]`	List of currently selected rows (by rowKey).
onSelect	`(selectedRows: object[]) => void`		Callback when rows are selected.
onRowClick	`(record, index) => void`		Callback when a row is clicked.
onSort	`(key: string, direction: 'asc' \| 'desc') => void`		Callback when a column is sorted.
sortKey	`string`		The key of the currently sorted column.
sortDirection	`'asc' \| 'desc'`	`'asc'`	Current sort direction.
maxHeight	`number \| string`		Maximum table height.
emptyState	`React.ReactNode`		Component to display when there is no data.
footer	`React.ReactNode`		Component to display in the table footer.
showRowCount	`boolean`	`true`	Show row count in the footer.
freezeColumns	`number`	`-1`	Number of columns to freeze on the left (including checkbox if any).
actions	`React.ReactNode`		Actions to display in the table header.
batchActions	`React.ReactNode`		Actions for selected rows.
description	`React.ReactNode`		Short description for the table.
className	`string`		Custom class for the table container.
...tableProps	`HTMLTableElement` props		All native HTML `<table>` props.

TableColumn

Prop	Type	Description
key	`string`	Unique key for the column, matches data field.
title	`React.ReactNode`	Column header.
width	`number`	Column width (px).
sortable	`boolean`	Enable sorting for this column.
resizable	`boolean`	Enable column resizing.
render	`(value, record, index) => React.ReactNode`	Custom cell render function.

Note:

Each row must have a unique key field (by rowKey, default is id).

Table supports all native HTML <table> props. See usage examples above.

TableColumn supports: key, title, width, sortable, resizable, render, ...