Fix Bazza UI data table filters issues

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

@@ -311,113 +311,106 @@ const columns: ColumnDef<MockIssue>[] = [
 
 // --- NEW Wrapper Component using Loader Data ---
 function DataTableWithBazzaFilters() {
+  // Get the loader data (filtered/paginated/sorted data from server)
   const loaderData = useLoaderData<DataResponse>();
-  const location = useLocation();
   const navigate = useNavigate();
+  const location = useLocation();
 
-  // Ensure we have data even if loaderData is undefined
+  // Initialize data from loader response
   const data = loaderData?.data ?? [];
   const pageCount = loaderData?.meta.pageCount ?? 0;
   const facetedCounts = loaderData?.facetedCounts ?? {};
 
-  // Default pagination values
-  const defaultPageIndex = 0;
-  const defaultPageSize = 10;
-
-  // Use useFilterSync to synchronize filters with URL
+  // --- Bazza UI Filter Setup ---
+  // 1. Initialize filters state with useFilterSync (syncs with URL)
   const [filters, setFilters] = useFilterSync();
 
-  // Local state for pagination and sorting
+  // 2. Initialize pagination state (local state, synced to URL via useEffect)
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: loaderData?.meta.page ?? defaultPageIndex,
-    pageSize: loaderData?.meta.pageSize ?? defaultPageSize,
+    pageIndex: 0,
+    pageSize: 10,
   });
 
-  // Extract sorting from URL
-  const [sorting, setSorting] = useState<SortingState>(() => {
-    const params = new URLSearchParams(location.search);
-    const sortField = params.get('sortField');
-    const sortDesc = params.get('sortDesc') === 'true';
-    return sortField ? [{ id: sortField, desc: sortDesc }] : [];
-  });
+  // 3. Initialize sorting state (local state, synced to URL via useEffect)
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  // Effect to synchronize pagination and sorting state FROM URL/loaderData if it changes
+  // --- URL Synchronization for Pagination and Sorting ---
+  // This effect syncs pagination and sorting state to URL parameters
   useEffect(() => {
-    const newPageIndex = loaderData?.meta.page ?? defaultPageIndex;
-    const newPageSize = loaderData?.meta.pageSize ?? defaultPageSize;
+    // Create a new URLSearchParams object from the current location search
+    const searchParams = new URLSearchParams(location.search);
 
-    if (pagination.pageIndex !== newPageIndex || pagination.pageSize !== newPageSize) {
-      setPagination({ pageIndex: newPageIndex, pageSize: newPageSize });
-    }
+    // Update pagination parameters
+    searchParams.set('page', pagination.pageIndex.toString());
+    searchParams.set('pageSize', pagination.pageSize.toString());
 
-    const params = new URLSearchParams(location.search);
-    const sortFieldFromUrl = params.get('sortField');
-    const sortDescFromUrl = params.get('sortDesc') === 'true';
+    // Update sorting parameters
+    if (sorting.length > 0) {
+      searchParams.set('sortField', sorting[0].id);
+      searchParams.set('sortDesc', sorting[0].desc ? 'true' : 'false');
+    } else {
+      searchParams.delete('sortField');
+      searchParams.delete('sortDesc');
+    }
 
-    const currentSorting = sorting.length > 0 ? sorting[0] : null;
-    const urlHasSorting = !!sortFieldFromUrl;
+    // Navigate to the new URL with updated parameters
+    navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
+  }, [pagination, sorting, navigate, location.pathname]);
 
-    if (urlHasSorting) {
-      // Ensure sortFieldFromUrl is not null before using it with !
-      if (
-        sortFieldFromUrl &&
-        (!currentSorting || currentSorting.id !== sortFieldFromUrl || currentSorting.desc !== sortDescFromUrl)
-      ) {
-        setSorting([{ id: sortFieldFromUrl, desc: sortDescFromUrl }]);
-      }
-    } else if (currentSorting) {
-      setSorting([]);
+  // --- Initialize state from URL on component mount ---
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+
+    // Initialize pagination from URL
+    const pageParam = searchParams.get('page');
+    const pageSizeParam = searchParams.get('pageSize');
+
+    if (pageParam !== null || pageSizeParam !== null) {
+      setPagination({
+        pageIndex: pageParam !== null ? parseInt(pageParam, 10) : 0,
+        pageSize: pageSizeParam !== null ? parseInt(pageSizeParam, 10) : 10,
+      });
     }
-  }, [loaderData, location.search, pagination, sorting, defaultPageIndex, defaultPageSize]);
-
-  // Handlers for pagination and sorting changes that navigate
-  const handlePaginationChange = (updater: ((prevState: PaginationState) => PaginationState) | PaginationState) => {
-    const newState = typeof updater === 'function' ? updater(pagination) : updater;
-    const params = new URLSearchParams(location.search); // Preserve existing params like filters
-    params.set('page', String(newState.pageIndex));
-    params.set('pageSize', String(newState.pageSize));
-    // Sorting is not changed by pagination, so it's already in location.search or not
-    navigate(`${location.pathname}?${params.toString()}`, { replace: true });
-  };
+
+    // Initialize sorting from URL
+    const sortField = searchParams.get('sortField');
+    const sortDesc = searchParams.get('sortDesc') === 'true';
+
+    if (sortField) {
+      setSorting([{ id: sortField, desc: sortDesc }]);
+    }
+  }, []);
 
-  const handleSortingChange = (updater: ((prevState: SortingState) => SortingState) | SortingState) => {
-    const newState = typeof updater === 'function' ? updater(sorting) : updater;
-    const params = new URLSearchParams(location.search); // Preserve existing params
+  // --- Event Handlers ---
+  // Handle pagination changes
+  const handlePaginationChange = (newPagination: PaginationState) => {
+    setPagination(newPagination);
+  };
 
-    if (newState.length > 0) {
-      params.set('sortField', newState[0].id);
-      params.set('sortDesc', String(newState[0].desc));
-    } else {
-      params.delete('sortField');
-      params.delete('sortDesc');
-    }
-    // Optionally reset page to 0 on sort change
-    // params.set('page', '0');
-    navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+  // Handle sorting changes
+  const handleSortingChange = (newSorting: SortingState) => {
+    setSorting(newSorting);
   };
 
-  // Use Bazza UI hook (strategy: 'server' means it expects externally filtered/faceted data)
-  const {
-    columns: bazzaProcessedColumns, // These columns have filter components integrated
-    actions,
-    strategy,
-  } = useDataTableFilters<MockIssue, typeof columnConfigs, 'server'>({
-    strategy: 'server',
-    columnsConfig: columnConfigs, // Pass the configurations
-    data: data, // Pass the data from the loader
-    faceted: facetedCounts, // Pass faceted counts from loader
-    filters: filters, // Use filters directly from useFilterSync
-    onFiltersChange: setFilters, // Use the setFilters function from useFilterSync
+  // --- Bazza UI Filter Setup ---
+  // Process columns for Bazza UI
+  const bazzaProcessedColumns = useMemo(() => columnConfigs, []);
+
+  // Setup filter actions and strategy
+  const { actions, strategy } = useDataTableFilters({
+    columns: bazzaProcessedColumns,
+    initialFilters: filters,
+    onFiltersChange: setFilters,
+    facetedCounts,
   });
 
-  // Setup TanStack Table instance
+  // --- Table Setup ---
   const table = useReactTable({
     data,
-    columns: columns, // <-- Use original columns for cell rendering
+    columns,
     state: {
-      pagination, // Controlled by local state, which is synced from URL
-      sorting, // Controlled by local state, which is synced from URL
-      filters, // Controlled by useFilterSync hook
+      pagination,
+      sorting,
     },
     pageCount: pageCount, // Total pages from loader meta
     onPaginationChange: handlePaginationChange, // Use new handler
@@ -444,7 +437,7 @@ function DataTableWithBazzaFilters() {
       {/* Render Bazza UI Filters - Pass Bazza's processed columns */}
       <DataTableFilter columns={bazzaProcessedColumns} filters={filters} actions={actions} strategy={strategy} />
       {/* Pass table instance (which now uses original columns for rendering) */}
-      <DataTable className="mt-4" table={table} columns={columns.length} pagination />
+      <DataTable className="mt-4" table={table} columns={columns} pagination />
     </div>
   );
 }
@@ -457,13 +450,18 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
   const url = new URL(request.url);
   const params = url.searchParams;
 
+  console.log('handleDataFetch - URL:', url.toString());
+  console.log('handleDataFetch - Search Params:', Object.fromEntries(params.entries()));
+
   // Parse pagination, sorting, and filters from URL using helpers/schemas
-  const page = dataTableRouterParsers.page.parse(params.get('page'));
-  let pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize'));
+  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 filtersParam = params.get('filters');
 
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortDesc, filtersParam });
+
   if (!pageSize || pageSize <= 0) {
     console.log(`[Loader] - Invalid or missing pageSize (${pageSize}), defaulting to 10.`);
     pageSize = 10;
@@ -474,6 +472,7 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
     if (filtersParam) {
       // Parse and validate filters strictly according to Bazza v0.2 model
       parsedFilters = filtersArraySchema.parse(JSON.parse(filtersParam));
+      console.log('handleDataFetch - Parsed Filters:', parsedFilters);
     }
   } catch (error) {
     console.error('[Loader] - Filter parsing/validation error (expecting Bazza v0.2 model):', error);
@@ -545,6 +544,8 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
   const facetedColumns: Array<keyof MockIssue> = ['status', 'assignee', 'priority'];
   const facetedCounts = calculateFacetedCounts(processedData, facetedColumns, allDefinedOptions);
 
+  console.log(`Returning ${paginatedData.length} items, page ${page}, total ${totalItems}`);
+
   const response: DataResponse = {
     data: paginatedData,
     meta: {

packages/components/package.json

@@ -89,7 +89,7 @@
     "react": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "vite": "^6.2.2",
     "vite-plugin-dts": "^4.4.0",
     "vite-tsconfig-paths": "^5.1.4"
   }