Use Data Table Router

Synchronizes TanStack Table state with URL search parameters and saved page-size settings.

Installation

bash

pnpm dlx shadcn@latest add @cs/use-data-table-router

Usage

tsx

import { useDataTableRouter } from "@/hooks/cs/use-data-table-router";

tsx

const table = useDataTableRouter({ tableId: "orders", tableIndex: 0, sorting: [], columnFilters: [], query: null, pagination: { pageIndex: 0, pageSize: 10 }, stableParams: "", path: undefined });

API Reference

UseDataTableRouterReturn

tsx

type UseDataTableRouterReturn = ReturnType<typeof useDataTableRouter>

useDataTableRouter

Synchronizes table filters, sorting, pagination, and search with the URL.

Props

Name	Type	Default	Description
columnFilters *	ColumnFiltersState	-	-
defaultPageSize	number	-	-
pagination *	PaginationState	-	-
path *	string \| undefined	-	-
query *	string \| null	-	-
saveSettings	(data: { name: string; value: string; path: string }) => Promise<{ data: ActionResult \| undefined }>	-	-
sorting *	SortingState	-	-
stableParams *	string \| undefined	-	-
tableId *	string	-	-
tableIndex *	number	-	-

Dependencies

@tanstack/react-table next @cs/action-result @cs/data-table @cs/data-table-params @cs/data-table-parse @cs/status-is @cs/toast