Merge pull request #48 from taro-28/update-readme2

Update readme
taro-28 · Aug 28, 2024 · 3305025 · 3305025
2 parents 0295103 + bde4cff
commit 3305025
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 
 </div>
 
-React Hook for syncing TanStack Table state with URL search params.
+React Hook for syncing [TanStack Table](https://github.com/TanStack/table) state with URL search params.
 
 https://github.com/user-attachments/assets/1f1b4a65-fdec-4a80-a5d5-783642befaa3
 
@@ -49,7 +49,6 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
@@ -77,7 +76,6 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
@@ -117,12 +115,11 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
 
-## Advanced
+## Customization
 
 - [Custom query param name](#custom-query-param-name)
 - [Custom encoder/decoder](#custom-encoderdecoder)
@@ -148,6 +145,38 @@ const stateAndOnChanges = useTableSearchParams(router, {
 });
 ```
 
+### Custom default value
+
+Default values can be customized.
+
+"default value" means the value that is used as value of `state` when the query parameter is not present.
+
+- [demo](https://tanstack-table-search-paramsexample-git-56132d-taro28s-projects.vercel.app/custom-default-value)
+- [code](https://github.com/taro-28/tanstack-table-search-params/tree/main/examples/next-pages-router/src/pages/custom-default-value.tsx)
+
+```tsx
+const stateAndOnChanges = useTableSearchParams(router, {
+  sorting: {
+    // Sort by name in descending order when query parameter is not present
+    defaultValue: [{ id: "name", desc: true }],
+  },
+});
+```
+
+If you want to set initial values for query parameters, either transition with the query parameter or add the query parameter after the transition, depending on the router you are using.
+
+```tsx
+// Transition with the query parameter
+<Link href={{ pathname: "/users", query: { globalFilter: "foo" } }}>
+  Users
+</Link>;
+
+// Add the query parameter after the transition
+useEffect(() => {
+  router.replace({ query: { globalFilter: "foo" } });
+}, [router.replace]);
+```
+
 ### Custom encoder/decoder
 
 Encoder and decoder can be customized.
@@ -203,38 +232,6 @@ const stateAndOnChanges = useTableSearchParams(router, {
 });
 ```
 
-### Custom default value
-
-Default values can be customized.
-
-"default value" means the value that is used as value of `state` when the query parameter is not present.
-
-- [demo](https://tanstack-table-search-paramsexample-git-56132d-taro28s-projects.vercel.app/custom-default-value)
-- [code](https://github.com/taro-28/tanstack-table-search-params/tree/main/examples/next-pages-router/src/pages/custom-default-value.tsx)
-
-```tsx
-const stateAndOnChanges = useTableSearchParams(router, {
-  sorting: {
-    // Sort by name in descending order when query parameter is not present
-    defaultValue: [{ id: "name", desc: true }],
-  },
-});
-```
-
-If you want to set initial values for query parameters, either transition with the query parameter or add the query parameter after the transition, depending on the router you are using.
-
-```tsx
-// Transition with the query parameter
-<Link href={{ pathname: "/users", query: { globalFilter: "foo" } }}>
-  Users
-</Link>;
-
-// Add the query parameter after the transition
-useEffect(() => {
-  router.replace({ query: { globalFilter: "foo" } });
-}, [router.replace]);
-```
-
 ## Supported
 
 List of supported TanStack table states
@@ -253,9 +250,11 @@ List of supported TanStack table states
 - [ ] rowPinning
 - [ ] rowSelection
 
-## TODO
+## Roadmap
 
+- [ ] support other table states
 - [ ] disable specific state
+- [ ] add examples for other routers
 
 # License
 

diff --git a/packages/tanstack-table-search-params/README.md b/packages/tanstack-table-search-params/README.md
@@ -9,7 +9,7 @@
 
 </div>
 
-React Hook for syncing TanStack Table state with URL search params.
+React Hook for syncing [TanStack Table](https://github.com/TanStack/table) state with URL search params.
 
 https://github.com/user-attachments/assets/1f1b4a65-fdec-4a80-a5d5-783642befaa3
 
@@ -49,7 +49,6 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
@@ -77,7 +76,6 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
@@ -117,12 +115,11 @@ const table = useReactTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
   // ... other options
 });
 ```
 
-## Advanced
+## Customization
 
 - [Custom query param name](#custom-query-param-name)
 - [Custom encoder/decoder](#custom-encoderdecoder)
@@ -148,6 +145,38 @@ const stateAndOnChanges = useTableSearchParams(router, {
 });
 ```
 
+### Custom default value
+
+Default values can be customized.
+
+"default value" means the value that is used as value of `state` when the query parameter is not present.
+
+- [demo](https://tanstack-table-search-paramsexample-git-56132d-taro28s-projects.vercel.app/custom-default-value)
+- [code](https://github.com/taro-28/tanstack-table-search-params/tree/main/examples/next-pages-router/src/pages/custom-default-value.tsx)
+
+```tsx
+const stateAndOnChanges = useTableSearchParams(router, {
+  sorting: {
+    // Sort by name in descending order when query parameter is not present
+    defaultValue: [{ id: "name", desc: true }],
+  },
+});
+```
+
+If you want to set initial values for query parameters, either transition with the query parameter or add the query parameter after the transition, depending on the router you are using.
+
+```tsx
+// Transition with the query parameter
+<Link href={{ pathname: "/users", query: { globalFilter: "foo" } }}>
+  Users
+</Link>;
+
+// Add the query parameter after the transition
+useEffect(() => {
+  router.replace({ query: { globalFilter: "foo" } });
+}, [router.replace]);
+```
+
 ### Custom encoder/decoder
 
 Encoder and decoder can be customized.
@@ -203,38 +232,6 @@ const stateAndOnChanges = useTableSearchParams(router, {
 });
 ```
 
-### Custom default value
-
-Default values can be customized.
-
-"default value" means the value that is used as value of `state` when the query parameter is not present.
-
-- [demo](https://tanstack-table-search-paramsexample-git-56132d-taro28s-projects.vercel.app/custom-default-value)
-- [code](https://github.com/taro-28/tanstack-table-search-params/tree/main/examples/next-pages-router/src/pages/custom-default-value.tsx)
-
-```tsx
-const stateAndOnChanges = useTableSearchParams(router, {
-  sorting: {
-    // Sort by name in descending order when query parameter is not present
-    defaultValue: [{ id: "name", desc: true }],
-  },
-});
-```
-
-If you want to set initial values for query parameters, either transition with the query parameter or add the query parameter after the transition, depending on the router you are using.
-
-```tsx
-// Transition with the query parameter
-<Link href={{ pathname: "/users", query: { globalFilter: "foo" } }}>
-  Users
-</Link>;
-
-// Add the query parameter after the transition
-useEffect(() => {
-  router.replace({ query: { globalFilter: "foo" } });
-}, [router.replace]);
-```
-
 ## Supported
 
 List of supported TanStack table states
@@ -253,9 +250,11 @@ List of supported TanStack table states
 - [ ] rowPinning
 - [ ] rowSelection
 
-## TODO
+## Roadmap
 
+- [ ] support other table states
 - [ ] disable specific state
+- [ ] add examples for other routers
 
 # License