{"id":85729,"date":"2024-11-27T18:07:07","date_gmt":"2024-11-27T14:37:07","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-library-to-sync-tanstack-table-state-with-url-parameters-1d0h\/"},"modified":"2024-11-27T18:07:07","modified_gmt":"2024-11-27T14:37:07","slug":"building-a-library-to-sync-tanstack-table-state-with-url-parameters-1d0h","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-library-to-sync-tanstack-table-state-with-url-parameters-1d0h\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 TanStack \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n Tanstack Table \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 UI \u0628\u0633\u06cc\u0627\u0631 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0648 \u0628\u062f\u0648\u0646 \u0647\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062c\u062f\u0627\u0648\u0644 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062f\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u062c\u0645\u0644\u0647 React\u060c Vue \u0648 Solid \u0627\u0633\u062a.<\/p>\n

\u0645\u0646 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0645 tanstack-table-search-params. \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648\u0636\u0639\u06cc\u062a TanStack Table – \u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648 \u0648 \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc – \u0631\u0627 \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

React Hook \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a TanStack Table \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc URL.<\/p>\n

React Hook \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a TanStack Table \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc URL.<\/p>\n

tanstack-table-search-params.mp4<\/p>\n

\ud83d\ude80 \u0634\u0631\u0648\u0639 \u0633\u0631\u06cc\u0639<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u0633\u062a\u0647 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

npm i tanstack-table-search-params<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u0627\u0632 Next.js (\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628 \u0635\u0641\u062d\u0627\u062a) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0647\u0648\u06a9 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

import { useReactTable } from “tanstack-table”;
\nimport { useRouter } from “next\/router”;
\nimport { useTableSearchParams } from “tanstack-table-search-params”;
\nconst router = useRouter();<\/p>\n

\/\/ Get state and onChanges
\nconst stateAndOnChanges = useTableSearchParams({
\n query: router.query,
\n pathname: router.pathname,
\n replace: router.replace,
\n \/\/ or
\n push: router.push,
\n});<\/p>\n

const table = useReactTable({
\n \/\/ Set state and onChanges
\n …stateAndOnChanges,
\n data,
\n columns,
\n getCoreRowModel: getCoreRowModel(),
\n getFilteredRowModel: getFilteredRowModel(),
\n getSortedRowModel: getSortedRowModel(),
\n \/\/ … other options\u2026<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062c\u062f\u0648\u0644 TanStack \u062f\u0631 React<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0645\u0647 \u0633\u0631\u06cc\u0639 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062c\u062f\u0627\u0648\u0644 \u0628\u0627 TanStack Table \u062f\u0631 React \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

TanStack Table \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f useReactTable \u0642\u0644\u0627\u0628\u060c \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0633\u062a\u0648\u0646 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 \u0648 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u062c\u062f\u0648\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

import {
\n createColumnHelper,
\n flexRender,
\n getCoreRowModel,
\n useReactTable,
\n} from “@tanstack\/react-table”;<\/p>\n

type User = { id: string; name: string };<\/p>\n

\/\/ Sample data
\nconst data: User[] = [
\n { id: “1”, name: “John” },
\n { id: “2”, name: “Sara” },
\n];<\/p>\n

\/\/ Column definitions
\nconst columnHelper = createColumnHelper<User>();
\nconst columns = [
\n columnHelper.accessor(“id”, {}),
\n columnHelper.accessor(“name”, {}),
\n];<\/p>\n

export default function UserTable() {
\n \/\/ Create table
\n const table = useReactTable({
\n data,
\n columns,
\n getCoreRowModel: getCoreRowModel(),
\n });<\/p>\n

return (
\n <div>
\n <table>
\n <thead>
\n <tr>
\n {table.getFlatHeaders().map((header) => (
\n <th key={header.id}>
\n {flexRender(
\n header.column.columnDef.header,
\n header.getContext(),
\n )}
\n th>
\n ))}
\n tr>
\n thead>
\n <tbody>
\n {\/* Render table rows *\/}
\n {table.getRowModel().rows.map((row) => (
\n <tr key={row.id}>
\n {row.getAllCells().map((cell) => (
\n <td key={cell.id}>
\n {flexRender(cell.column.columnDef.cell, cell.getContext())}
\n td>
\n ))}
\n tr>
\n ))}
\n tbody>
\n table>
\n div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062c\u062f\u0648\u0644 \u062d\u0627\u0635\u0644 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062c\u062f\u0648\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u0645\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

import {
\n \/\/ …
\n+ getFilteredRowModel,
\n} from “@tanstack\/react-table”;<\/p>\n

\/\/ …<\/p>\n

export default function UserTable() {
\n const table = useReactTable({
\n data,
\n columns,
\n getCoreRowModel: getCoreRowModel(),
\n+ getFilteredRowModel: getFilteredRowModel(),
\n });<\/p>\n

return (
\n <div>
\n+ <input
\n+ placeholder=”Search…”
\n+ value={table.getState().globalFilter}
\n+ onChange={(e) => table.setGlobalFilter(e.target.value)}
\n+ \/>
\n <table><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062c\u062f\u0648\u0644 \u0627\u06a9\u0646\u0648\u0646 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0633\u062a\u062c\u0648\u06cc \u0627\u0648\u0644\u06cc\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

\u0627\u06cc\u0646\u062c\u0627\u060c getCoreRowModel \u0648 getFilteredRowModel \u062a\u0648\u0627\u0628\u0639\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u062f\u0648\u0644 \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0647 \u0646\u0627\u0645 RowModels \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f. \u062f\u0631 TanStack Table\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 RowModel \u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f getFilteredRowModel\u060c \u06cc\u0627 RowModel \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627 \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u062f\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06cc\u0627 \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u0628\u0647 \u062c\u062f\u0648\u0644 \u062e\u0648\u062f.<\/p>\n

\u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f\u0646 tanstack-table-search-params<\/p>\n

tanstack-table-search-params \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 TanStack \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js Pages Router\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f:<\/p>\n

\u0648\u0627\u0631\u062f\u0627\u062a \u0648 \u062a\u0645\u0627\u0633 useTableSearchParams\u060c \u0639\u0628\u0648\u0631 \u0627\u0632 useRouter \u0634\u06cc
\n\u0645\u0642\u062f\u0627\u0631 \u0628\u0631\u06af\u0634\u062a\u06cc \u0642\u0644\u0627\u0628 \u0631\u0627 \u0628\u0647 useReactTable.<\/p>\n

+ import { useRouter } from “next\/router”;
\n+ import { useTableSearchParams } from “tanstack-table-search-params”;<\/p>\n

\/\/ …<\/p>\n

export default function UserTable() {
\n+ const router = useRouter();
\n+ const stateAndOnChanges = useTableSearchParams(router);
\n const table = useReactTable({
\n+ …stateAndOnChanges,
\n \/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u062a\u06cc\u062c\u0647:<\/p>\n

\u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n

\u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0686\u06af\u0648\u0646\u06af\u06cc tanstack-table-search-params \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 TanStack \u0631\u0627 \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0647\u0645\u06af\u0627\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0645\u0627 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u062a\u0627 \u0641\u0642\u0637 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u062f\u060c \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0644 \u0622\u0646 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645. router \u0634\u06cc \u0648 stateAndOnChanges \u0634\u06cc<\/p>\n

export default function UserTable() {
\n const { query, pathname, replace} = useRouter();
\n const stateAndOnChanges = useTableSearchParams({
\n query: router.query,
\n pathname: router.pathname,
\n replace: router.replace,
\n });
\n const table = useReactTable({
\n state: {
\n globalFilter: stateAndOnChanges.state.globalFilter,
\n },
\n onGlobalFilterChange: stateAndOnChanges.onGlobalFilterChange,
\n \/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0644\u06cc\u0644 \u0639\u0628\u0648\u0631 state.globalFilter \u0648 onGlobalFilterChange \u0628\u0647 useReactTable \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 TanStack \u062f\u0631 \u062e\u0627\u0631\u062c \u0627\u0632 useReactTable.<\/p>\n

https:\/\/tanstack.com\/table\/latest\/docs\/guide\/global-filtering#global-filter-state<\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c useTableSearchParams \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f:<\/p>\n

query: \u0648\u0636\u0639\u06cc\u062a React \u0628\u0631\u0627\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL<\/p>\n

pathname: \u0645\u0633\u06cc\u0631 URL \u0641\u0639\u0644\u06cc<\/p>\n

replace (\u06cc\u0627 push): \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc (\u06cc\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646) URL<\/p>\n

https:\/\/github.com\/taro-28\/tanstack-table-search-params\/blob\/main\/packages\/tanstack-table-search-params\/src\/index.ts#L123-L151<\/p>\n

\u0648 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f:<\/p>\n

state.globalFilter
\nonGlobalFilterChange<\/p>\n

https:\/\/github.com\/taro-28\/tanstack-table-search-params\/blob\/main\/packages\/tanstack-table-search-params\/src\/index.ts#L23-L44<\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627 \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0627\u0632 \u0646\u0638\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0627\u0648\u0644\u060c state \u0631\u0645\u0632\u06af\u0634\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f query \u062f\u0631 \u062c\u062f\u0648\u0644 TanStack \u0632\u06cc\u0631 TableState \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f:<\/p>\n

\u0628\u0639\u062f\u060c onGlobalFilterChange \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0632 \u0648\u0636\u0639\u06cc\u062a \u062c\u062f\u0648\u0644 TanStack \u0631\u0627 \u062f\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f. replace.<\/p>\n

\u0647\u0631 \u062f\u0648 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u06cc\u062c\u0627\u062f state \u0648 onGlobalFilterChange \u0635\u0631\u0641\u0627\u064b \u062a\u0628\u062f\u06cc\u0644 \u0647\u0633\u062a\u0646\u062f (\u0634\u06cc \u2192 \u0634\u06cc\u060c \u062a\u0627\u0628\u0639 \u2192 \u062a\u0627\u0628\u0639)\u060c \u0648 \u0647\u06cc\u0686 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062d\u0627\u0644\u062a \u062f\u0627\u062e\u0644\u06cc \u0646\u062f\u0627\u0631\u0646\u062f. (\u062a\u0646\u0647\u0627 \u0627\u0633\u062a\u062b\u0646\u0627 \u0628\u0631\u0627\u06cc debouncing \u0627\u0633\u062a \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u0645\u0648\u0631\u062f \u0628\u062d\u062b \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u062f \u06af\u0631\u0641\u062a\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062d\u0627\u0644\u062a \u062f\u0627\u062e\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 debounce \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.)<\/p>\n

\u0627\u06cc\u0627\u0644\u0627\u062a \u062c\u062f\u0648\u0644 TanStack \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f<\/p>\n

\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0632 \u0686\u0647\u0627\u0631 \u062d\u0627\u0644\u062a \u062c\u062f\u0648\u0644 TanStack \u0632\u06cc\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u06af\u0633\u062a\u0631\u0634 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u062f\u0627\u0631\u062f:<\/p>\n

globalFilter
\nsorting
\npagination
\ncolumnFilters<\/p>\n

\u0631\u0648\u062a\u0631\u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0634\u062f\u0647<\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c tanstack-table-search-params \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062d\u0627\u0644\u062a React \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0631\u0627 \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a TanStack Table \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f (\u0627\u062d\u062a\u0645\u0627\u0644\u0627) \u0628\u0627 \u0647\u0631 \u0631\u0648\u062a\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0636\u0639\u06cc\u062a React \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n

\u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0647 \u0631\u0648\u062a\u0631 \u0632\u06cc\u0631 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a. \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

\u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0627\u0636\u0627\u0641\u06cc<\/p>\n

\u0628\u0627 tanstack-table-search-params\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0648 \u0641\u0631\u0645\u062a \u0647\u0627\u06cc \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0648 \u063a\u06cc\u0631\u0647 \u0631\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL<\/p>\n

\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0628\u0627 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f TableState \u0646\u0648\u0639\u060c \u0645\u0627\u0646\u0646\u062f globalFilter \u06cc\u0627 sorting.<\/p>\n

\u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL\u060c \u0627\u0632 paramNames \u06af\u0632\u06cc\u0646\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 useTableSearchParams.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n paramNames: {
\n \/\/ Change the URL parameter name
\n globalFilter: “search”,
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06cc\u06a9 \u067e\u06cc\u0634\u0648\u0646\u062f \u06cc\u0627 \u067e\u0633\u0648\u0646\u062f \u0628\u0647 \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n paramNames: {
\n \/\/ Add a prefix to the URL parameter name
\n globalFilter: (defaultName) => `userTable-${defaultName}`,
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0641\u0631\u0645\u062a \u0647\u0627\u06cc \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc<\/p>\n

\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\u060c \u0641\u0631\u0645\u062a \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 URL \u06cc\u06a9 \u0641\u0631\u0645\u062a \u0633\u0627\u062f\u0647 \u0627\u0633\u062a\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

\u0627\u0631\u0632\u0634 \u062f\u0648\u0644\u062a\u06cc
\n\u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0645\u062b\u0627\u0644<\/p>\n

\u062c\u0633\u062a\u062c\u0648\u06cc \u062c\u0647\u0627\u0646\u06cc
\n?globalFilter=John<\/p>\n

\u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc
\n?sorting=name.desc<\/p>\n

\u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc
\n?pageIndex=2&pageSize=20<\/p>\n

\u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0631\u0645\u062a \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f encoders \u0648 decoders \u062f\u0631 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u062f\u0648\u0645 \u0627\u0632 useTableSearchParams.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n encoders: {
\n \/\/ Change encoding format to use JSON.stringify
\n globalFilter: (globalFilter) => ({
\n globalFilter: JSON.stringify(globalFilter),
\n }),
\n },
\n decoders: {
\n globalFilter: (query) =>
\n query[“globalFilter”]\n ? JSON.parse(query[“globalFilter”])
\n : (query[“globalFilter”] ?? “”),
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0631\u0645\u062a \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0648 \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n encoders: {
\n sorting: (sorting) => ({
\n \/\/ Change encoding format to JSON.stringify and rename parameter to my-sorting
\n “my-sorting”: JSON.stringify(sorting),
\n }),
\n },
\n decoders: {
\n sorting: (query) =>
\n query[“my-sorting”]\n ? JSON.parse(query[“my-sorting”])
\n : query[“my-sorting”],
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0646\u062d\u0631\u0627\u0641<\/p>\n

\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0644\u063a\u0648 \u06a9\u0646\u06cc\u062f.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n debounceMilliseconds: 500,
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u0646\u0647\u0627 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u062c\u062f\u0648\u0644 TanStack \u0631\u0627 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n debounceMilliseconds: {
\n \/\/ Debounce synchronization of globalFilter with URL parameters by 0.5 seconds
\n globalFilter: 500,
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636<\/p>\n

\u0648\u0642\u062a\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u0648\u0644 TanStack \u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0628\u062f\u0648\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c state.sorting \u0645\u0642\u062f\u0627\u0631 (\u0634\u0631\u0627\u06cc\u0637 \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc) \u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 URL \u0645\u0631\u0628\u0648\u0637\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f:<\/p>\n

state.sorting \u0627\u0631\u0632\u0634
\n\u067e\u0627\u0631\u0627\u0645\u062a\u0631 URL<\/p>\n[]\n\u0647\u06cc\u0686 \u06a9\u062f\u0627\u0645<\/p>\n[{ id: “createdAt”, desc: true }]\n?sorting=createdAt.desc<\/p>\n[{ id: “createdAt”, desc: false }]\n?sorting=createdAt.asc<\/p>\n

(\u062a\u0648\u062c\u0647: createdAt \u0646\u0627\u0645 \u0633\u062a\u0648\u0646 \u0627\u0633\u062a.)<\/p>\n

\u062f\u0631 \u0645\u0642\u0627\u0628\u0644\u060c \u0627\u06af\u0631 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u0645\u0637\u0627\u0628\u0642 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0631\u0648\u06cc \u0646\u0632\u0648\u0644\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n

const stateAndOnChanges = useTableSearchParams(router, {
\n defaultValues: {
\n sorting: [{ id: “createdAt”, desc: true }],
\n },
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 state.sorting \u0645\u0642\u062f\u0627\u0631 \u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 URL \u0645\u0631\u0628\u0648\u0637\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

state.sorting \u0627\u0631\u0632\u0634
\n\u067e\u0627\u0631\u0627\u0645\u062a\u0631 URL<\/p>\n[]\n?sorting=none<\/p>\n[{ id: “createdAt”, desc: true }]\n\u0647\u06cc\u0686 \u06a9\u062f\u0627\u0645<\/p>\n[{ id: “createdAt”, desc: false }]\n?sorting=createdAt.asc<\/p>\n

\u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0632 \u06a9\u0627\u0631 \u0645\u0646 \u0633\u0631\u0686\u0634\u0645\u0647 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646 \u0628\u0647 \u06cc\u06a9 \u0631\u0627\u0647 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u062c\u062f\u0648\u0644 TanStack \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u0645.<\/p>\n

\u062a\u0627 \u06a9\u0646\u0648\u0646\u060c \u0645\u0646 \u062a\u0645\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0634\u062e\u0635\u0627\u064b \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u0645\u060c \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0645. \u062f\u0631 \u062d\u0631\u06a9\u062a \u0631\u0648 \u0628\u0647 \u062c\u0644\u0648\u060c \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0648\u0636\u0639\u06cc\u062a \u0647\u0627\u06cc TanStack Table \u0628\u06cc\u0634\u062a\u0631 \u0648 \u06af\u0633\u062a\u0631\u0634 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc\u060c \u06a9\u0627\u0645\u0644 \u0628\u0648\u062f\u0646 \u0622\u0646 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u0645.<\/p>\n

\u0636\u0645\u0646\u0627 \u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f\u0645 \u0631\u0627 \u062f\u0631 npm \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc \u06a9\u0646\u0645. \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u062d\u0648\u0647 \u0627\u0646\u062a\u0634\u0627\u0631 \u062f\u0631 npm \u0648 \u06a9\u0634\u0641 \u0631\u0627\u062d\u062a\u06cc \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f tsup \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0639\u0627\u0644\u06cc \u0628\u0648\u062f.<\/p>\n

\u0627\u06af\u0631 \u0634\u0645\u0627 \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f\u060c \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc \u0634\u0648\u0645! (\u0648 \u0645\u0646 \u062e\u0648\u0634\u062d\u0627\u0644 \u062a\u0631 \u0645\u06cc \u0634\u0648\u0645 \u0627\u06af\u0631 \u0645\u062e\u0632\u0646 \u0631\u0627 \u0633\u062a\u0627\u0631\u0647 \u062f\u0627\u0631 \u06a9\u0646\u06cc\u062f!)<\/p>\n

React Hook \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a TanStack Table \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc URL.<\/p>\n

React Hook \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0648\u0636\u0639\u06cc\u062a TanStack Table \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc URL.<\/p>\n

tanstack-table-search-params.mp4<\/p>\n

\ud83d\ude80 \u0634\u0631\u0648\u0639 \u0633\u0631\u06cc\u0639<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u0633\u062a\u0647 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

npm i tanstack-table-search-params<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u0627\u0632 Next.js (\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628 \u0635\u0641\u062d\u0627\u062a) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0647\u0648\u06a9 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

import { useReactTable } from “tanstack-table”;
\nimport { useRouter } from “next\/router”;
\nimport { useTableSearchParams } from “tanstack-table-search-params”;
\nconst router = useRouter();<\/p>\n

\/\/ Get state and onChanges
\nconst stateAndOnChanges = useTableSearchParams({
\n query: router.query,
\n pathname: router.pathname,
\n replace: router.replace,
\n \/\/ or
\n push: router.push,
\n});<\/p>\n

const table = useReactTable({
\n \/\/ Set state and onChanges
\n …stateAndOnChanges,
\n data,
\n columns,
\n getCoreRowModel: getCoreRowModel(),
\n getFilteredRowModel: getFilteredRowModel(),
\n getSortedRowModel: getSortedRowModel(),
\n \/\/ … other options\u2026<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\n

Tanstack Table \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 UI \u0628\u0633\u06cc\u0627\u0631 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0648 \u0628\u062f\u0648\u0646 \u0647\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062c\u062f\u0627\u0648\u0644 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062f\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u062c\u0645\u0644\u0647 React\u060c Vue \u0648 Solid \u0627\u0633\u062a.<\/p>\n

\u0645\u0646 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0645 tanstack-table-search-params<\/code>. \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648\u0636\u0639\u06cc\u062a TanStack Table – \u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648 \u0648 \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc – \u0631\u0627 \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\n
\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n