Table

A responsive table component with support for variants, alignment, and a useTable hook for declarative column configuration.

View Markdown

Basic

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

Variants

Default

Name	Email	Role	Department
Alice Johnson	alice@example.com	Admin	Engineering
Bob Smith	bob@example.com	User	Marketing
Charlie Brown	charlie@example.com	User	Sales
Diana Prince	diana@example.com	Editor	Design

Striped

Name	Email	Role	Department
Alice Johnson	alice@example.com	Admin	Engineering
Bob Smith	bob@example.com	User	Marketing
Charlie Brown	charlie@example.com	User	Sales
Diana Prince	diana@example.com	Editor	Design

Bordered

Name	Email	Role	Department
Alice Johnson	alice@example.com	Admin	Engineering
Bob Smith	bob@example.com	User	Marketing
Charlie Brown	charlie@example.com	User	Sales
Diana Prince	diana@example.com	Editor	Design

Compact

Name	Email	Role	Department
Alice Johnson	alice@example.com	Admin	Engineering
Bob Smith	bob@example.com	User	Marketing
Charlie Brown	charlie@example.com	User	Sales
Diana Prince	diana@example.com	Editor	Design

Pagination

ID	Product Name	Price	Category
1	Product 1	$167.03	Electronics
2	Product 2	$39.16	Clothing
3	Product 3	$177.75	Books
4	Product 4	$119.01	Home
5	Product 5	$154.48	Electronics
6	Product 6	$206.61	Clothing
7	Product 7	$184.67	Books
8	Product 8	$61.79	Home
9	Product 9	$183.65	Electronics
10	Product 10	$181.14	Clothing

Showing 1-10 of 47 items

Sorting

ID	Product Name	Price	In Stock	Created
5	Headphones	$149.99	No	2/28/2024
3	Keyboard	$79.99	No	1/10/2024
1	Laptop	$999.99	Yes	1/15/2024
4	Monitor	$349.99	Yes	3/5/2024
2	Mouse	$29.99	Yes	2/20/2024
6	Webcam	$89.99	Yes	1/22/2024

Search

Search users by name or email

ID	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	User
3	Charlie Brown	charlie@example.com	User
4	Diana Ross	diana@example.com	Moderator
5	Edward Norton	edward@example.com	User
6	Fiona Apple	fiona@example.com	Admin

6 results

Filters

Invoice	Customer	Email	Amount	Status
INV-001	Acme Corp	billing@acme.com	$1,250	paid
INV-002	Globex Inc	ap@globex.com	$430	pending
INV-003	Stark Industries	tony@stark.com	$890	overdue
INV-004	Wayne Enterprises	bruce@wayne.com	$2,100	paid
INV-005	Umbrella Corp	finance@umbrella.com	$560	pending
INV-006	Cyberdyne Systems	accounts@cyberdyne.com	$1,800	paid
INV-007	Oscorp	norman@oscorp.com	$340	overdue
INV-008	LexCorp	lex@lexcorp.com	$1,500	pending

8 results

Row Selection

0 rows selected

ID	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol Williams	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eva Martinez	eva@example.com	Admin

Showing 1-5 of 12 users

Row Expansion

ID	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol Williams	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eva Martinez	eva@example.com	Admin

Empty State

Invoice	Status	Method	Amount
No invoices found There are no invoices to display. Create your first invoice to get started.

Loading State

Invoice	Status	Method	Amount

API Reference

useTable Options

Options passed to the useTable hook.

Prop	Type	Default	Description
data*	T[]	-	Array of data items to display in the table
columns*	ColumnDef<T>[]	-	Column definitions for the table
pagination	PaginationConfig	-	Enable pagination with page size options
sort	{ key: keyof T; direction: SortDirection }	-	Initial sort configuration
search	SearchConfig<T>	-	Enable search functionality
filters	FiltersConfig<T>	-	Filter definitions for the table
selection	SelectionConfig<T>	-	Enable row selection functionality
expansion	ExpansionConfig<T>	-	Enable row expansion functionality

useTable Return

Values and functions returned by the useTable hook.

Prop	Type	Description
columns	ProcessedColumn<T>[]	Processed columns with head/cell props and renderCell function
rows	T[]	Current page of filtered, sorted data
totalItems	number	Total number of items after filtering
currentPage	number	Current page number (1-indexed)
totalPages	number	Total number of pages
pageSize	number	Current page size
pageSizeOptions	number[]	Available page size options
onPageChange	(page: number) => void	Callback to change current page
onPageSizeChange	(size: number) => void	Callback to change page size
sortKey	keyof T \| null	Currently sorted column key
sortDirection	SortDirection	Current sort direction
onSort	(key: keyof T) => void	Callback to toggle sort on a column
searchTerm	string	Current search term
onSearchChange	(term: string) => void	Callback to update search term
filterValues	FilterValues	Current filter values by filter ID
setFilterValue	(filterId: string, value: unknown) => void	Set a filter value
clearFilters	() => void	Clear all filter values
activeFilterCount	number	Number of active filters
selection	SelectionState	Selection state and handlers (only present when selection config provided)
expansion	ExpansionState	Expansion state and handlers (only present when expansion config provided)

ColumnDef

Column definition for the table.

Prop	Type	Default	Description
key*	keyof T	-	Property key to access row data
header*	ReactNode	-	Content to display in column header
cell	(value: T[K], row: T) => ReactNode	-	Custom cell renderer
format	(value: T[K], row: T) => string	-	Format value as string (used if cell not provided)
sortable	boolean	false	Enable sorting for this column
width	string \| number	-	Column width (CSS value)
className	string	-	Class applied to both header and cells
headerClassName	string	-	Class applied to header only
cellClassName	string	-	Class applied to cells only

PaginationConfig

Configuration for table pagination.

Prop	Type	Default	Description
pageSize*	number	-	Initial number of rows per page
pageSizeOptions	number[]	[10, 25, 50, 100]	Available page size options

SearchConfig

Configuration for table search.

Prop	Type	Default	Description
keys*	(keyof T)[]	-	Row properties to search in

FiltersConfig

Map of filter ID to FilterDef. Each filter can have a different value type.

Prop	Type	Default	Description
predicate*	(row: T, value: V) => boolean	-	Returns true if row passes the filter
defaultValue	V	-	Initial filter value

SelectionConfig

Configuration for row selection. Supports both controlled and uncontrolled modes.

Prop	Type	Default	Description
rowKey*	(row: T) => string \| number	-	Function to extract unique key from each row
defaultSelectedKeys	(string \| number)[]	-	Initial selected keys (uncontrolled mode)
selectedKeys	(string \| number)[]	-	Controlled selected keys
onSelectionChange	(keys: (string \| number)[]) => void	-	Callback when selection changes

SelectionState

Selection state returned by useTable when selection is enabled.

Prop	Type	Description
selectedKeys	(string \| number)[]	Array of currently selected row keys
selectedCount	number	Number of selected rows
isSelected	(key: string \| number) => boolean	Check if a row key is selected
toggleRow	(key: string \| number) => void	Toggle selection state by row key
isRowSelected	(row: T) => boolean	Check if a row is selected (uses rowKey internally)
toggleRowSelection	(row: T) => void	Toggle selection state of a row (uses rowKey internally)
toggleAllOnPage	() => void	Toggle selection of all rows on current page
clearSelection	() => void	Clear all selections
pageSelectionState	'all' \| 'some' \| 'none'	Selection state for current page rows
isIndeterminate	boolean	True when some (but not all) page rows are selected
isAllOnPageSelected	boolean	True when all page rows are selected

ExpansionConfig

Configuration for row expansion.

Prop	Type	Default	Description
rowKey*	(row: T) => string \| number	-	Function to extract unique key from each row

ExpansionState

Expansion state returned by useTable when expansion is enabled. Expanded rows auto-collapse when page, sort, or filters change.

Prop	Type	Description
expandedKeys	(string \| number)[]	Array of currently expanded row keys
expandedCount	number	Number of expanded rows
isExpanded	(key: string \| number) => boolean	Check if a row key is expanded
toggleExpansion	(key: string \| number) => void	Toggle expansion state by row key
isRowExpanded	(row: T) => boolean	Check if a row is expanded (uses rowKey internally)
toggleRowExpansion	(row: T) => void	Toggle expansion state of a row (uses rowKey internally)
collapseAll	() => void	Collapse all expanded rows

TableRoot

The root table element with variant and size support.

Prop	Type	Default	Description
variant	'default' \| 'striped' \| 'bordered'	'default'	Visual style variant
size	'default' \| 'compact'	'default'	Table density size
stickyHeader	boolean	false	Skips the overflow wrapper and makes thead sticky. Use inside a scroll container for fixed-height scrollable tables.
...props	React.ComponentProps<"table">	-	Standard table element props

TableHead

Table header cell with optional sorting support.

Prop	Type	Default	Description
sortable	boolean	-	Show sort indicator
sortDirection	SortDirection	-	Current sort direction ('asc' \| 'desc')
onSort	() => void	-	Callback when header is clicked
...props	React.ComponentProps<"th">	-	Standard th element props

TableCaption

Table caption element with positioning.

Prop	Type	Default	Description
position	'top' \| 'bottom'	'bottom'	Caption position relative to table
...props	React.ComponentProps<"caption">	-	Standard caption element props

Other Primitives

Standard table primitives with styling.

Prop	Type	Description
TableHeader	React.ComponentProps<"thead">	Table header group (thead)
TableBody	React.ComponentProps<"tbody">	Table body group (tbody)
TableFooter	React.ComponentProps<"tfoot">	Table footer group (tfoot)
TableRow	React.ComponentProps<"tr">	Table row (tr)
TableCell	React.ComponentProps<"td">	Table cell (td)

Filter Helpers

Utility functions for creating common filter predicates.

Prop	Type	Description
includesFilter(key)	FilterPredicate<T, T[K][]>	Multi-select: row value is in selected array
rangeFilter(key)	FilterPredicate<T, [number, number]>	Range: numeric value is within [min, max]
containsFilter(key)	FilterPredicate<T, string>	Contains: string value includes search term (case-insensitive)
equalsFilter(key)	FilterPredicate<T, T[K]>	Equals: row value strictly equals filter value

Types

Type definitions exported from the table package.

Prop	Type	Description
SortDirection	'asc' \| 'desc'	Sort direction type
TableVariant	'default' \| 'striped' \| 'bordered'	Table variant type
TableSize	'default' \| 'compact'	Table size type
ColumnDef<T>	interface	Column definition interface
ProcessedColumn<T>	interface	Processed column returned by useTable
PaginationConfig	interface	Pagination configuration interface
SearchConfig<T>	interface	Search configuration interface
FilterDef<T, V>	interface	Filter definition interface
FiltersConfig<T>	type	Map of filter IDs to FilterDef
FilterValues	type	Map of filter IDs to current values
FilterPredicate<T, V>	type	Filter predicate function type
UseTableOptions<T>	interface	useTable hook options
UseTableReturn<T>	interface	useTable hook return type
SelectionConfig<T>	interface	Selection configuration interface
SelectionState<T>	interface	Selection state interface
ExpansionConfig<T>	interface	Expansion configuration interface
ExpansionState<T>	interface	Expansion state interface
RowKeyGetter<T>	type	Function type to extract row key

Table

Default

Striped

Bordered

No invoices found

API Reference