DataTable
A fully featured table built from a list hook — columns, search, sorting and paging all inferred.
<DataTable> reads whatever a list hook exposes and lights up features accordingly. Hand it a query; it does the rest.
1
<
DataTable
query
={
useListAirports
({
options
:
{
pageSize
:
20
}
})}
/>
The table feature-detects from the hook, so the same component drives both a REST IListQuery (search + sort + paging) and a sync: { mode: "local" } entity list — the latter simply renders no toolbar or pager.
column headers (else the first row's keys)
rows, each cell via formatCell or a column's render
clickable sortable headers with a direction indicator
a footer pager + record count
isLoading / empty / error
Customise without giving up the wiring — pass explicit columns (including an FK cell rendered as a link) and an onRowClick:
2
query
={
useListTerminals
()}
4
{
key
:
"label"
,
header
:
"Terminal"
},
5
{
key
:
"airport"
,
header
:
"Airport"
,
6
render
:
(
t
)
=>
<
a
href
={
`/airports/${t.airport}`
}>{
t
.
airport
}</
a
>
},
7
{
key
:
"gates"
,
align
:
"right"
},
9
onRowClick
={(
t
)
=>
navigate
(
`/terminals/${t.id}`
)}
Go fully headless with the model + a render-prop escape hatch:
1
const
model
=
useDataTable
(
query
,
{
columns
});
2
// { columns, rows, isLoading, isEmpty, error, search?, sort?, pagination? }
4
<
DataTable
query
={
query
}>{(
m
)
=>
/* your own markup from m */
}</
DataTable
>
Build with AI
Every page is available as clean Markdown for LLMs and coding agents. Point one at the files below to build on top of React API Stack.
React API Stack · alpha · built to scale to millions