Merge pull request #532 from taro-28/support-row-selection

taro-28 · web-flow · commit b5cb29a373ae · 2025-05-10T13:39:14.000+09:00
Support `rowSelection`
diff --git a/examples/lib/src/components/UserTable.tsx b/examples/lib/src/components/UserTable.tsx
@@ -1,8 +1,12 @@
 import { type Table, flexRender } from "@tanstack/react-table";
-import { useState } from "react";
+import { type JSX, useState } from "react";
 import { SearchInput } from "./SearchInput";
 import type { User } from "./userData";
 
+const Cell = ({ className, ...props }: JSX.IntrinsicElements["div"]) => (
+  <div {...props} className={`table-cell py-1 px-2 text-center ${className}`} />
+);
+
 type Props = {
   table: Table<User>;
 };
@@ -39,11 +43,15 @@ export const UserTable = ({ table }: Props) => {
         <div className="table border-2 border-gray-200 rounded-md ">
           <div className="table-header-group bg-slate-200">
             <div className="table-row">
+              <Cell>
+                <input
+                  type="checkbox"
+                  checked={table.getIsAllRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </Cell>
               {table.getFlatHeaders().map((header) => (
-                <div
-                  key={header.id}
-                  className="table-cell py-2 px-2 text-center space-y-1"
-                >
+                <Cell key={header.id} className="space-y-1">
                   <button
                     className="font-semibold"
                     type="button"
@@ -115,13 +123,20 @@ export const UserTable = ({ table }: Props) => {
                       />
                     )}
                   </div>
-                </div>
+                </Cell>
               ))}
             </div>
           </div>
           <div className="table-row-group">
             {table.getRowModel().rows.map((row) => (
               <div key={row.id} className="table-row">
+                <div className="table-cell py-1 px-2 text-center">
+                  <input
+                    type="checkbox"
+                    checked={row.getIsSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
                 {row.getVisibleCells().map((cell) => (
                   <div
                     key={cell.id}
@@ -215,6 +230,7 @@ export const UserTable = ({ table }: Props) => {
               pagination: table.getState().pagination,
               columnFilters: table.getState().columnFilters,
               columnOrder: table.getState().columnOrder,
+              rowSelection: table.getState().rowSelection,
             },
             null,
             2,
diff --git a/examples/next-app-router/src/app/custom-default-value/table.tsx b/examples/next-app-router/src/app/custom-default-value/table.tsx
@@ -32,6 +32,7 @@ export const Table = () => {
         pagination: { pageIndex: 2, pageSize: 20 },
         columnFilters: [{ id: "name", value: "b" }],
         columnOrder: userColumns.reverse().map((c) => c.id as string),
+        rowSelection: { "1": true },
       },
     },
   );
diff --git a/examples/next-app-router/src/app/custom-encoder-decoder/table.tsx b/examples/next-app-router/src/app/custom-encoder-decoder/table.tsx
@@ -50,6 +50,9 @@ export const Table = () => {
         columnOrder: (columnOrder) => ({
           columnOrder: JSON.stringify(columnOrder),
         }),
+        rowSelection: (rowSelection) => ({
+          rowSelection: JSON.stringify(rowSelection),
+        }),
       },
       decoders: {
         globalFilter: (query) =>
@@ -81,6 +84,10 @@ export const Table = () => {
           query["columnOrder"]
             ? JSON.parse(query["columnOrder"] as string)
             : [],
+        rowSelection: (query) =>
+          query["rowSelection"]
+            ? JSON.parse(query["rowSelection"] as string)
+            : {},
       },
     },
   );
diff --git a/examples/next-app-router/src/app/custom-param-name/table.tsx b/examples/next-app-router/src/app/custom-param-name/table.tsx
@@ -35,6 +35,7 @@ export const Table = () => {
         },
         columnFilters: (defaultParamName) => `userTable-${defaultParamName}`,
         columnOrder: (defaultParamName) => `userTable-${defaultParamName}`,
+        rowSelection: (defaultParamName) => `userTable-${defaultParamName}`,
       },
     },
   );
diff --git a/examples/next-app-router/src/app/debounce/table.tsx b/examples/next-app-router/src/app/debounce/table.tsx
@@ -32,6 +32,7 @@ export const Table = () => {
         pagination: 1000,
         columnFilters: 1000,
         columnOrder: 1000,
+        rowSelection: 1000,
       },
     },
   );
diff --git a/examples/next-pages-router/src/pages/custom-default-value.tsx b/examples/next-pages-router/src/pages/custom-default-value.tsx
@@ -24,6 +24,7 @@ export default function CustomParamNames() {
       pagination: { pageIndex: 2, pageSize: 20 },
       columnFilters: [{ id: "name", value: "b" }],
       columnOrder: userColumns.reverse().map((c) => c.id as string),
+      rowSelection: { "1": true },
     },
   });
 
diff --git a/examples/next-pages-router/src/pages/custom-encoder-decoder.tsx b/examples/next-pages-router/src/pages/custom-encoder-decoder.tsx
@@ -42,6 +42,9 @@ export default function CustomEncoderDecoder() {
       columnOrder: (columnOrder) => ({
         columnOrder: JSON.stringify(columnOrder),
       }),
+      rowSelection: (rowSelection) => ({
+        rowSelection: JSON.stringify(rowSelection),
+      }),
     },
     decoders: {
       globalFilter: (query) =>
@@ -71,6 +74,10 @@ export default function CustomEncoderDecoder() {
           })),
       columnOrder: (query) =>
         query["columnOrder"] ? JSON.parse(query["columnOrder"] as string) : [],
+      rowSelection: (query) =>
+        query["rowSelection"]
+          ? JSON.parse(query["rowSelection"] as string)
+          : {},
     },
   });
 
diff --git a/examples/next-pages-router/src/pages/custom-param-name.tsx b/examples/next-pages-router/src/pages/custom-param-name.tsx
@@ -27,6 +27,7 @@ export default function CustomParamNames() {
       },
       columnFilters: (defaultParamName) => `userTable-${defaultParamName}`,
       columnOrder: (defaultParamName) => `userTable-${defaultParamName}`,
+      rowSelection: (defaultParamName) => `userTable-${defaultParamName}`,
     },
   });
 
diff --git a/examples/next-pages-router/src/pages/debounce.tsx b/examples/next-pages-router/src/pages/debounce.tsx
@@ -24,6 +24,7 @@ export default function Basic() {
       pagination: 1000,
       columnFilters: 1000,
       columnOrder: 1000,
+      rowSelection: 1000,
     },
   });
 
diff --git a/examples/react-router-lib/src/custom-default-value.tsx b/examples/react-router-lib/src/custom-default-value.tsx
@@ -28,6 +28,7 @@ export default function CustomDefaultValuePage() {
         pagination: { pageIndex: 2, pageSize: 20 },
         columnFilters: [{ id: "name", value: "b" }],
         columnOrder: userColumns.reverse().map((c) => c.id as string),
+        rowSelection: { "1": true },
       },
     },
   );
diff --git a/examples/react-router-lib/src/custom-encoder-decoder.tsx b/examples/react-router-lib/src/custom-encoder-decoder.tsx
@@ -43,6 +43,12 @@ export default function CustomEncoderDecoderPage() {
               JSON.stringify(value),
             ]),
           ),
+        columnOrder: (columnOrder) => ({
+          columnOrder: JSON.stringify(columnOrder),
+        }),
+        rowSelection: (rowSelection) => ({
+          rowSelection: JSON.stringify(rowSelection),
+        }),
       },
       decoders: {
         globalFilter: (query) =>
@@ -74,6 +80,10 @@ export default function CustomEncoderDecoderPage() {
           query["columnOrder"]
             ? JSON.parse(query["columnOrder"] as string)
             : [],
+        rowSelection: (query) =>
+          query["rowSelection"]
+            ? JSON.parse(query["rowSelection"] as string)
+            : {},
       },
     },
   );
diff --git a/examples/react-router-lib/src/custom-param-name.tsx b/examples/react-router-lib/src/custom-param-name.tsx
@@ -31,6 +31,7 @@ export default function CustomParamNamePage() {
         },
         columnFilters: (defaultParamName) => `userTable-${defaultParamName}`,
         columnOrder: (defaultParamName) => `userTable-${defaultParamName}`,
+        rowSelection: (defaultParamName) => `userTable-${defaultParamName}`,
       },
     },
   );
diff --git a/examples/react-router-lib/src/debounce.tsx b/examples/react-router-lib/src/debounce.tsx
@@ -28,6 +28,7 @@ export default function DebouncePage() {
         pagination: 1000,
         columnFilters: 1000,
         columnOrder: 1000,
+        rowSelection: 1000,
       },
     },
   );
diff --git a/examples/tanstack-router/src/routes/custom-default-value.tsx b/examples/tanstack-router/src/routes/custom-default-value.tsx
@@ -42,6 +42,7 @@ function Page() {
         pagination: { pageIndex: 2, pageSize: 20 },
         columnFilters: [{ id: "name", value: "b" }],
         columnOrder: userColumns.reverse().map((c) => c.id as string),
+        rowSelection: { "1": true },
       },
     },
   );
diff --git a/examples/tanstack-router/src/routes/custom-encoder-decoder.tsx b/examples/tanstack-router/src/routes/custom-encoder-decoder.tsx
@@ -60,6 +60,9 @@ function Page() {
         columnOrder: (columnOrder) => ({
           columnOrder: JSON.stringify(columnOrder),
         }),
+        rowSelection: (rowSelection) => ({
+          rowSelection: JSON.stringify(rowSelection),
+        }),
       },
       decoders: {
         globalFilter: (query) =>
@@ -91,6 +94,10 @@ function Page() {
           query["columnOrder"]
             ? JSON.parse(query["columnOrder"] as string)
             : [],
+        rowSelection: (query) =>
+          query["rowSelection"]
+            ? JSON.parse(query["rowSelection"] as string)
+            : {},
       },
     },
   );
diff --git a/examples/tanstack-router/src/routes/custom-param-name.tsx b/examples/tanstack-router/src/routes/custom-param-name.tsx
@@ -45,6 +45,7 @@ function Page() {
         },
         columnFilters: (defaultParamName) => `userTable-${defaultParamName}`,
         columnOrder: (defaultParamName) => `userTable-${defaultParamName}`,
+        rowSelection: (defaultParamName) => `userTable-${defaultParamName}`,
       },
     },
   );
diff --git a/examples/tanstack-router/src/routes/debounce.tsx b/examples/tanstack-router/src/routes/debounce.tsx
@@ -42,6 +42,7 @@ function Page() {
         pagination: 1000,
         columnFilters: 1000,
         columnOrder: 1000,
+        rowSelection: 1000,
       },
     },
   );
diff --git a/examples/tanstack-router/src/routes/push.tsx b/examples/tanstack-router/src/routes/push.tsx
@@ -44,7 +44,7 @@ function Page() {
 
   return (
     <div className="space-y-2 mx-6">
-      <h1 className="text-lg font-semibold">Debounce</h1>
+      <h1 className="text-lg font-semibold">Push(instead of replace)</h1>
       <UserTable table={table} />
     </div>
   );
diff --git a/packages/tanstack-table-search-params/README.md b/packages/tanstack-table-search-params/README.md
@@ -406,6 +406,7 @@ import { encodeSorting } from "tanstack-table-search-params/encoder-decoder";
 ## Supported
 
 List of supported TanStack table states
+([x] means supported, [ ] means not supported)
 
 - [x] globalFilter
 - [x] sorting
@@ -419,7 +420,7 @@ List of supported TanStack table states
 - [ ] expanded
 - [ ] grouping
 - [ ] rowPinning
-- [ ] rowSelection
+- [x] rowSelection
 
 ## Roadmap
 
diff --git a/packages/tanstack-table-search-params/src/encoder-decoder/index.ts b/packages/tanstack-table-search-params/src/encoder-decoder/index.ts
@@ -4,3 +4,4 @@ export { encodeSorting, decodeSorting } from "./sorting";
 export { encodePagination, decodePagination } from "./pagination";
 export { encodeColumnFilters, decodeColumnFilters } from "./columnFilters";
 export { encodeColumnOrder, decodeColumnOrder } from "./columnOrder";
+export { encodeRowSelection, decodeRowSelection } from "./rowSelection";
diff --git a/packages/tanstack-table-search-params/src/encoder-decoder/rowSelection.test.ts b/packages/tanstack-table-search-params/src/encoder-decoder/rowSelection.test.ts
diff --git a/packages/tanstack-table-search-params/src/encoder-decoder/rowSelection.ts b/packages/tanstack-table-search-params/src/encoder-decoder/rowSelection.ts
diff --git a/packages/tanstack-table-search-params/src/index.ts b/packages/tanstack-table-search-params/src/index.ts
diff --git a/packages/tanstack-table-search-params/src/tests/next-pages-router/rowSelection.test.ts b/packages/tanstack-table-search-params/src/tests/next-pages-router/rowSelection.test.ts
diff --git a/packages/tanstack-table-search-params/src/tests/rowSelection.test.ts b/packages/tanstack-table-search-params/src/tests/rowSelection.test.ts
diff --git a/packages/tanstack-table-search-params/src/useRowSelection.ts b/packages/tanstack-table-search-params/src/useRowSelection.ts
