Server-side data
When your data lives on a server, hand pagination, sorting, and filtering off to it. All TanStack manual* flags pass through.
Server-side (manual)
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| $546,165 |
Rows per page
1–10 of 95
Server pagination
Set manualPagination: true, supply the total rowCount, control state.pagination, and handle onPaginationChange. Use isLoading to show a loading state while fetching.
import { useState } from "react"
import { DataTable, useDataTable } from "@/components/ui/data-table"
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
const { data, rowCount, isFetching } = useUsers(pagination)
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
manualPagination: true,
rowCount,
state: { pagination },
onPaginationChange: setPagination,
isLoading: isFetching,
})
return <DataTable table={table} />
Server sorting and filtering
The same pattern applies to other operations:
- Sorting:
manualSorting: true+state.sorting+onSortingChange. - Filtering:
manualFiltering: true+state.columnFilters/globalFilter.
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
manualSorting: true,
state: { sorting },
onSortingChange: setSorting,
manualFiltering: true,
})
Facets are not auto-computed
In manual filtering, faceted option lists and min/max values are not computed from the data — the server supplies the rows, so you must provide facet options yourself if you use them.