Standardize sort order param

apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx

@@ -341,11 +341,11 @@ function DataTableWithBazzaFilters() {
   const pageIndex = Number.parseInt(searchParams.get('page') ?? '0', 10);
   const pageSize = Number.parseInt(searchParams.get('pageSize') ?? '10', 10);
   const sortField = searchParams.get('sortField');
-  const sortDesc = searchParams.get('sortDesc') === 'true';
+  const sortOrder = (searchParams.get('sortOrder') || 'asc') as 'asc' | 'desc'; // 'asc' or 'desc'
 
   // --- Pagination and Sorting State ---
   const pagination = { pageIndex, pageSize };
-  const sorting = sortField ? [{ id: sortField, desc: sortDesc }] : [];
+  const sorting = sortField ? [{ id: sortField, desc: sortOrder === 'desc' }] : [];
 
   // --- Event Handlers: update URL directly ---
   const handlePaginationChange: OnChangeFn<PaginationState> = (updaterOrValue) => {
@@ -359,10 +359,10 @@ function DataTableWithBazzaFilters() {
     const next = typeof updaterOrValue === 'function' ? updaterOrValue(sorting) : updaterOrValue;
     if (next.length > 0) {
       searchParams.set('sortField', next[0].id);
-      searchParams.set('sortDesc', next[0].desc ? 'true' : 'false');
+      searchParams.set('sortOrder', next[0].desc ? 'desc' : 'asc');
     } else {
       searchParams.delete('sortField');
-      searchParams.delete('sortDesc');
+      searchParams.delete('sortOrder');
     }
     navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
   };
@@ -441,10 +441,10 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
   const page = dataTableRouterParsers.page.parse(params.get('page')) ?? 0;
   let pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize')) ?? 10;
   const sortField = params.get('sortField'); // Get raw string or null
-  const sortDesc = params.get('sortDesc') === 'true'; // Convert to boolean
+  const sortOrder = (params.get('sortOrder') || 'asc') as 'asc' | 'desc'; // 'asc' or 'desc'
   const filtersParam = params.get('filters');
 
-  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortDesc, filtersParam });
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortOrder, filtersParam });
 
   if (!pageSize || pageSize <= 0) {
     console.log(`[Loader] - Invalid or missing pageSize (${pageSize}), defaulting to 10.`);
@@ -512,7 +512,7 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
       let comparison = 0;
       if (aValue < bValue) comparison = -1;
       if (aValue > bValue) comparison = 1;
-      return sortDesc ? comparison * -1 : comparison;
+      return sortOrder === 'desc' ? comparison * -1 : comparison;
     });
   }
 

packages/components/src/remix-hook-form/data-table-router-parsers.ts

@@ -121,5 +121,5 @@ export type DataTableRouterState = {
   page: number;
   pageSize: number;
   sortField: string;
-  sortOrder: string;
+  sortOrder: string; // 'asc' or 'desc'
 };

packages/components/src/remix-hook-form/use-data-table-url-state.ts

@@ -20,6 +20,7 @@ export function useDataTableUrlState() {
     page: dataTableRouterParsers.page.parse(searchParams.get('page')),
     pageSize: dataTableRouterParsers.pageSize.parse(searchParams.get('pageSize')),
     sortField: dataTableRouterParsers.sortField.parse(searchParams.get('sortField')),
+    // 'asc' or 'desc'
     sortOrder: dataTableRouterParsers.sortOrder.parse(searchParams.get('sortOrder')),
   };
 
@@ -83,6 +84,7 @@ export function getDefaultDataTableState(defaultStateValues?: Partial<DataTableR
     page: dataTableRouterParsers.page.defaultValue,
     pageSize: dataTableRouterParsers.pageSize.defaultValue,
     sortField: dataTableRouterParsers.sortField.defaultValue,
+    // 'asc' or 'desc'
     sortOrder: dataTableRouterParsers.sortOrder.defaultValue,
     ...defaultStateValues,
   };