Add TanStack Router example

taro-28 · Aug 11, 2024 · e1c2d00 · e1c2d00
1 parent 54166a2
commit e1c2d00
Show file tree

Hide file tree

Showing 23 changed files with 1,142 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,45 @@ const table = useReactTable({
 });
 ```
 
+### TanStack Router
+
+- [code](https://github.com/taro-28/tanstack-table-search-params/tree/main/examples/tanstack-router)
+
+```tsx
+import { useReactTable } from "tanstack-table";
+import { useTableSearchParams } from "tanstack-table-search-params";
+
+export const Route = createFileRoute("/")({
+  component: Page,
+});
+
+// ...
+
+const navigate = Route.useNavigate();
+const query = Route.useSearch();
+
+const stateAndOnChanges = useTableSearchParams({
+  // 1. Pass push and query and get the state and onChanges from the hook
+  push: (url) => {
+    const searchParams = new URLSearchParams(url.split("?")[1]);
+    navigate({ search: Object.fromEntries(searchParams.entries()) });
+  },
+  query,
+});
+
+const table = useReactTable({
+  // 2. Pass the state and onChanges to the table
+  ...stateAndOnChanges,
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  // ... other options
+});
+```
+
 ## Advanced
 
 ### Custom query param name

diff --git a/biome.json b/biome.json
@@ -12,13 +12,17 @@
       "style": {
         "useNamingConvention": "off",
         "useBlockStatements": "off",
-        "noDefaultExport": "off"
+        "noDefaultExport": "off",
+        "noNonNullAssertion": "off"
       },
       "correctness": {
         "noNodejsModules": "off"
       },
       "complexity": {
         "useLiteralKeys": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
       }
     }
   },

diff --git a/examples/next-pages-router/next.config.mjs b/examples/next-pages-router/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@examples/lib"],
 };
 
 export default nextConfig;
diff --git a/examples/tanstack-router/.gitignore b/examples/tanstack-router/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/tanstack-router/index.html b/examples/tanstack-router/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/tanstack-router/package.json b/examples/tanstack-router/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@examples/tanstack-router",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@examples/lib": "workspace:*",
+    "@tanstack/react-router": "^1.47.1",
+    "@tanstack/react-table": "^8.20.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tanstack-table-search-params": "0.1.1"
+  },
+  "devDependencies": {
+    "@tanstack/router-devtools": "^1.47.1",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}
diff --git a/examples/tanstack-router/postcss.config.mjs b/examples/tanstack-router/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/examples/tanstack-router/src/main.tsx b/examples/tanstack-router/src/main.tsx
@@ -0,0 +1,24 @@
+import "./styles/globals.css";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import ReactDOM from "react-dom/client";
+import { routeTree } from "./routeTree.gen";
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document!.getElementById("app")!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+}
diff --git a/examples/tanstack-router/src/routeTree.gen.ts b/examples/tanstack-router/src/routeTree.gen.ts
@@ -0,0 +1,95 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from "./routes/__root";
+import { Route as CustomEncoderDecoderImport } from "./routes/custom-encoder-decoder";
+import { Route as CustomParamNameImport } from "./routes/custom-param-name";
+import { Route as IndexImport } from "./routes/index";
+
+// Create/Update Routes
+
+const CustomParamNameRoute = CustomParamNameImport.update({
+  path: "/custom-param-name",
+  getParentRoute: () => rootRoute,
+} as any);
+
+const CustomEncoderDecoderRoute = CustomEncoderDecoderImport.update({
+  path: "/custom-encoder-decoder",
+  getParentRoute: () => rootRoute,
+} as any);
+
+const IndexRoute = IndexImport.update({
+  path: "/",
+  getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/custom-encoder-decoder": {
+      id: "/custom-encoder-decoder";
+      path: "/custom-encoder-decoder";
+      fullPath: "/custom-encoder-decoder";
+      preLoaderRoute: typeof CustomEncoderDecoderImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/custom-param-name": {
+      id: "/custom-param-name";
+      path: "/custom-param-name";
+      fullPath: "/custom-param-name";
+      preLoaderRoute: typeof CustomParamNameImport;
+      parentRoute: typeof rootRoute;
+    };
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({
+  IndexRoute,
+  CustomEncoderDecoderRoute,
+  CustomParamNameRoute,
+});
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/custom-encoder-decoder",
+        "/custom-param-name"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/custom-encoder-decoder": {
+      "filePath": "custom-encoder-decoder.tsx"
+    },
+    "/custom-param-name": {
+      "filePath": "custom-param-name.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
diff --git a/examples/tanstack-router/src/routes/__root.tsx b/examples/tanstack-router/src/routes/__root.tsx
@@ -0,0 +1,47 @@
+import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <>
+      <body>
+        <header className="flex items-center space-x-4 mx-4">
+          <Link to="/" className="hover:text-gray-500 font-bold p-2 text-xl">
+            TanStack Table Search Params
+          </Link>
+          <nav>
+            <ul className="flex items-center">
+              <li>
+                <Link to="/" className="hover:text-gray-500 p-2">
+                  Basic
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/custom-param-name"
+                  className="hover:text-gray-500 p-2"
+                >
+                  Custom query param name
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/custom-encoder-decoder"
+                  className="hover:text-gray-500 p-2"
+                >
+                  Custom encoder/decoder
+                </Link>
+              </li>
+            </ul>
+          </nav>
+        </header>
+        <Outlet />
+      </body>
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  );
+}