Data Table

Pedidos da loja, sorted by Data

#5120	Marina Couto	Recife	28 de set	Pago	R$ 77,20
#5127	Rafael Nogueira	Belo Horizonte	27 de set	Enviado	R$ 306,40
#5134	Júlia Albuquerque	São Paulo	26 de set	Pago	R$ 535,60
#5141	Otávio Mendes	Curitiba	25 de set	Aguardando	R$ 134,50
#5148	Beatriz Sá	Salvador	23 de set	Enviado	R$ 363,70

Examples

Controlled selection

1 pedido na próxima remessa · 6 itens

1 selected

Pedidos para enviar

#5120	Marina Couto	1
#5127	Rafael Nogueira	6
#5134	Júlia Albuquerque	4
#5141	Otávio Mendes	2
#5148	Beatriz Sá	7

Updating without jumping

Pedidos recentes

#5120	Marina Couto	Pago	R$ 77,20
#5127	Rafael Nogueira	Enviado	R$ 306,40
#5134	Júlia Albuquerque	Pago	R$ 535,60
#5141	Otávio Mendes	Aguardando	R$ 134,50

Scrolling with a sticky header

Todos os pedidos, sorted by Total

#5176	Ana Clara Ribeiro	R$ 650,20
#5253	Bruno Esteves	R$ 650,20
#5155	Caio Linhares	R$ 592,90
#5232	Helena Duarte	R$ 592,90
#5134	Júlia Albuquerque	R$ 535,60
#5211	Pedro Assunção	R$ 535,60
#5190	Sofia Antunes	R$ 478,30
#5267	Lucas Pimentel	R$ 478,30
#5169	Henrique Tavares	R$ 421,00
#5246	Camila Freitas	R$ 421,00
#5148	Beatriz Sá	R$ 363,70
#5225	Gustavo Leite	R$ 363,70
#5127	Rafael Nogueira	R$ 306,40
#5204	Lara Menezes	R$ 306,40
#5183	Diego Farias	R$ 249,10
#5260	Yasmin Correia	R$ 249,10
#5162	Letícia Prado	R$ 191,80
#5239	Tiago Barreto	R$ 191,80
#5141	Otávio Mendes	R$ 134,50
#5218	Isabela Rocha	R$ 134,50
#5120	Marina Couto	R$ 77,20
#5197	Mateus Carvalho	R$ 77,20
#5274	Elisa Monteiro	R$ 77,20

Installation

The command creates components/ui/data-table.tsx in your project and installs the theme with it. The file is yours: edit it as you like.

npx @ravox-ui/cli add data-table

Props

Prop	Type	Default	Description
data	T[]	—	The rows. They stay on the client: for thousands of records, paginate on the server and pass only the page.
columns	DataTableColumn<T>[]	—	{ key, title, value?, cell?, numeric?, sortable?, searchable?, hideable?, hidden?, width? }. value is for sorting and searching; cell is for rendering.
rowKey	(row: T) => string	—	Unique id of each row (selection and key).
label	string	—	Table name: becomes the caption for screen readers and the name of the search and pagination.
search	boolean	true	Search field over the text columns (or the ones marked searchable). Esc clears it.
pageSize	number	10	Rows per page. 0 turns pagination off.
pageSizeOptions	number[]	[10, 25, 50]	Options for "Rows per page". With only one, the selector disappears.
selectable	boolean	false	Checkbox column. The header one selects the page and offers to select all results.
selected / onSelectionChange	string[] / (ids: string[]) => void	—	Controlled selection (rowKey ids). Without selected, it keeps the selection itself.
bulkActions	(selected: T[], clear: () => void) => ReactNode	—	Buttons in the bar that appears when rows are selected.
initialSort	{ key, direction: "asc" \| "desc" } \| null	—	Initial order. Clicking the title cycles through ascending, descending and no order; aria-sort follows.
columnMenu	boolean	true	"Columns" button to hide and show columns (the last visible one can't be hidden).
loading	boolean	false	Without data: skeleton rows. With data: keeps the previous screen dimmed, without jumping.
empty	ReactNode	—	What appears when data comes in empty. A search with no results has its own message with "Clear search".
extra	ReactNode	—	Something on the right of the bar (e.g. a "New customer" button).
density	"compact" \| "normal" \| "relaxed"	"normal"	Passed on to Table.
maxHeight	number \| string	—	With it, the body scrolls and the header sticks to the top.

Settings