/
state with URL search params.
tanstack-table-search-params.mp4
🚀 Quick Start
First, install the package.
npm i tanstack-table-search-paramsFor example, if you are using Next.js (Pages Router), you can use the hook like this.
import { useReactTable } from "tanstack-table";
import { useRouter } from "next/router";
import { useTableSearchParams } from "tanstack-table-search-params";
const router = useRouter();
// Get state and onChanges
const stateAndOnChanges = useTableSearchParams({
query: router.query,
pathname: router.pathname,
replace: router.replace,
// or
push: router.push,
});
const table = useReactTable({
// Set state and onChanges
...stateAndOnChanges,
data,
columns,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
// ... other options…
SOCIAL SHARE CARD GENERATOR