Data Table

Table, SearchBar, Pagination, Skeleton and EmptyState in one server-friendly table: it renders what you pass and reports sorting, searching, paging and selection.

import { DataTable } from "pleate/data-table";

Members, from a pretend API

Sort, search, filter by role, select rows, page through 134 members.

Props

columns

Columns; cell defaults to row[key].

{ key, header, cell?, sortable?, align?, width?, nowrap? }[]

rows / getRowId

The current page.

T[] / (row) => string

sort / onSortChange

Sortable headers toggle the direction.

{ key, direction: "asc" | "desc" } | null

search / onSearchChange / debounceMs

Shows the search field; debounced.

string / (value) => void / numberdefault 300

page / pageCount / total / pageSize / onPageChange

Pagination with a "21 to 40 of 134" summary.

number

Skeleton rows.

boolean

empty

Empty state (a no results text while searching).

{ icon, title, description, actions }

toolbar / selectionActions

Filters; bulk actions while rows are selected.

ReactNode

selectedIds / onSelectionChange

Checkbox column.

string[] / (ids) => void

onRowClick / density / caption

Row press, row height, caption.

(row) => void / "comfortable" | "compact" / ReactNode

labels

Every visible string, for your wording or translation.

object

Accessibility

Sortable headers are buttons with aria-sort; checkboxes are named per row.
Clickable rows are focusable and open with Enter or Space.
The table is aria-busy while loading; wide tables scroll inside their card.

		Role