From 739754ede3f980f3aa4633e6572c94e110fe06f7 Mon Sep 17 00:00:00 2001 From: acharlop Date: Fri, 8 Nov 2024 10:59:54 +0100 Subject: [PATCH 1/5] doc: tanstack-table refactor pagination example code, and add sorting --- ...> tanstack-table-pagination.generator.tsx} | 60 - .../tanstack-table-sorting.generator.tsx | 77 + .../docs/parsers/community/tanstack-table.mdx | 93 +- packages/docs/package.json | 1 + .../docs/src/components/ui/dropdown-menu.tsx | 200 +++ pnpm-lock.yaml | 1466 ++++++++--------- 6 files changed, 1095 insertions(+), 802 deletions(-) rename packages/docs/content/docs/parsers/community/{tanstack-table.generator.tsx => tanstack-table-pagination.generator.tsx} (63%) create mode 100644 packages/docs/content/docs/parsers/community/tanstack-table-sorting.generator.tsx create mode 100644 packages/docs/src/components/ui/dropdown-menu.tsx diff --git a/packages/docs/content/docs/parsers/community/tanstack-table.generator.tsx b/packages/docs/content/docs/parsers/community/tanstack-table-pagination.generator.tsx similarity index 63% rename from packages/docs/content/docs/parsers/community/tanstack-table.generator.tsx rename to packages/docs/content/docs/parsers/community/tanstack-table-pagination.generator.tsx index 0353b938..98d7e0c1 100644 --- a/packages/docs/content/docs/parsers/community/tanstack-table.generator.tsx +++ b/packages/docs/content/docs/parsers/community/tanstack-table-pagination.generator.tsx @@ -60,41 +60,6 @@ export function TanStackTablePagination() { parseAsInteger.withDefault(10) ) - const parserCode = useDeferredValue(`import { - createParser, - parseAsInteger, - parseAsString, - useQueryStates -} from 'nuqs' - -// The page index parser is zero-indexed internally, -// but one-indexed when rendered in the URL, -// to align with your UI and what users might expect. -const pageIndexParser = createParser({ - parse: query => { - const page = parseAsInteger.parse(query) - return page === null ? null : page - 1 - }, - serialize: value => { - return parseAsInteger.serialize(value + 1) - } -}) - -const paginationParsers = { - pageIndex: pageIndexParser.withDefault(0), - pageSize: parseAsInteger.withDefault(10) -} -const paginationUrlKeys = { - pageIndex: '${pageIndexUrlKey}', - pageSize: '${pageSizeUrlKey}' -} - -export function usePaginationSearchParams() { - return useQueryStates(paginationParsers, { - urlKeys: paginationUrlKeys - }) -}`) - const internalState = useDeferredValue(`{ // zero-indexed pageIndex: ${page}, @@ -148,32 +113,7 @@ export function usePaginationSearchParams() { -

- Configure and copy-paste this parser into your application: -

- - - - - } - className="flex-grow" - code={parserCode} - />