API Reference
useServerTable
The server-driven variant of useTable — forces manual pagination and sorting for backend-owned data.
Forces manualPagination and manualSorting to true. Use this when your
backend handles sorting, pagination, and filtering.
Signature
function useServerTable<TData extends RowData>(
options: UseServerTableOptions<TData>
): UseTableReturn<TData>UseServerTableOptions<TData> is UseTableOptions<TData>
minus manualPagination / manualSorting, with rowCount required instead of optional:
| Option | Type | Description |
|---|---|---|
rowCount | number | Required — total rows in the full dataset |
onPaginationChange | OnChangeFn<PaginationState> | Called when the user changes page/page size |
onSortingChange | OnChangeFn<SortingState> | Called when the user changes sort |
onColumnFiltersChange | OnChangeFn<ColumnFiltersState> | Called when the user changes a column filter |
| ...rest | — | Every other useTable option |
The return shape is identical to useTable's
UseTableReturn<TData>.
Usage
import { useServerTable } from '@marvinackerman/tablecraft'
const { table, pagination, sorting } = useServerTable({
data: serverData, // current page from your API
columns,
rowCount: totalRows, // required — total rows in the dataset
pagination: { pageSize: 20 },
onPaginationChange: (updater) => {
const next = typeof updater === 'function' ? updater(currentState) : updater
refetch({ page: next.pageIndex, pageSize: next.pageSize })
},
onSortingChange: (updater) => {
const next = typeof updater === 'function' ? updater(currentSort) : updater
refetch({ sort: next })
},
})Notes
- If you're fetching with TanStack Query, prefer
useQueryTable— it wraps this same manual-mode behavior with query-key-driven refetching.