36 |
37 | TanStack Table + Query + Router
38 |
39 |
{
45 | setFilters(
46 | typeof pagination === "function"
47 | ? pagination(paginationState)
48 | : pagination
49 | );
50 | },
51 | rowCount: data?.rowCount,
52 | }}
53 | filters={filters}
54 | onFilterChange={(filters) => setFilters(filters)}
55 | sorting={sortingState}
56 | onSortingChange={(updaterOrValue) => {
57 | const newSortingState =
58 | typeof updaterOrValue === "function"
59 | ? updaterOrValue(sortingState)
60 | : updaterOrValue;
61 | return setFilters({ sortBy: stateToSortBy(newSortingState) });
62 | }}
63 | />
64 |
65 | {data?.rowCount} users found
66 |
73 |
74 | {JSON.stringify(filters, null, 2)}
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/utils/cleanEmptyParams.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from "../components/table";
2 |
3 | export const cleanEmptyParams = >(
4 | search: T
5 | ) => {
6 | const newSearch = { ...search };
7 | Object.keys(newSearch).forEach((key) => {
8 | const value = newSearch[key];
9 | if (
10 | value === undefined ||
11 | value === "" ||
12 | (typeof value === "number" && isNaN(value))
13 | )
14 | delete newSearch[key];
15 | });
16 |
17 | if (search.pageIndex === DEFAULT_PAGE_INDEX) delete newSearch.pageIndex;
18 | if (search.pageSize === DEFAULT_PAGE_SIZE) delete newSearch.pageSize;
19 |
20 | return newSearch;
21 | };
22 |
--------------------------------------------------------------------------------
/src/utils/tableSortMapper.ts:
--------------------------------------------------------------------------------
1 | import { SortingState } from "@tanstack/react-table";
2 | import { SortParams } from "../api/types";
3 |
4 | export const stateToSortBy = (sorting: SortingState | undefined) => {
5 | if (!sorting || sorting.length == 0) return undefined;
6 |
7 | const sort = sorting[0];
8 |
9 | return `${sort.id}.${sort.desc ? "desc" : "asc"}` as const;
10 | };
11 |
12 | export const sortByToState = (sortBy: SortParams["sortBy"] | undefined) => {
13 | if (!sortBy) return [];
14 |
15 | const [id, desc] = sortBy.split(".");
16 | return [{ id, desc: desc === "desc" }];
17 | };
18 |
--------------------------------------------------------------------------------
/src/utils/userColumns.tsx:
--------------------------------------------------------------------------------
1 | import { ColumnDef, RowData } from "@tanstack/react-table";
2 | import { User } from "../api/user";
3 |
4 | declare module "@tanstack/react-table" {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface ColumnMeta {
7 | filterKey?: keyof TData;
8 | filterVariant?: "text" | "number";
9 | }
10 | }
11 |
12 | export const USER_COLUMNS: ColumnDef[] = [
13 | {
14 | accessorKey: "id",
15 | header: () => ID,
16 | meta: { filterKey: "id", filterVariant: "number" },
17 | },
18 | {
19 | accessorKey: "firstName",
20 | header: () => First Name,
21 | meta: { filterKey: "firstName" },
22 | },
23 | {
24 | accessorKey: "lastName",
25 | header: () => Last Name,
26 | meta: { filterKey: "lastName" },
27 | },
28 | {
29 | accessorKey: "age",
30 | header: () => "Age",
31 | meta: { filterKey: "age", filterVariant: "number" },
32 | },
33 | ];
34 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), TanStackRouterVite()],
8 | });
9 |
--------------------------------------------------------------------------------