Refactor data table components to improve loading state and pagination handling. Added skeleton row IDs for loading state and optimized filter logic in the toolbar. Updated imports for better type usage.

Author: jaruesink

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

@@ -87,7 +87,7 @@ const columns: ColumnDef<User>[] = [
 // Component to display the data table with router form integration
 function DataTableRouterFormExample() {
   const loaderData = useLoaderData<DataResponse>();
-  
+
   // Ensure we have data even if loaderData is undefined
   const data = loaderData?.data ?? [];
   const pageCount = loaderData?.meta.pageCount ?? 0;
@@ -142,8 +142,8 @@ function DataTableRouterFormExample() {
 // Loader function to handle data fetching based on URL parameters
 const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   // Add a small delay to simulate network latency
-  await new Promise(resolve => setTimeout(resolve, 300));
-  
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
   // Ensure we have a valid URL object
   const url = request?.url ? new URL(request.url) : new URL('http://localhost?page=0&pageSize=10');
   const params = url.searchParams;
@@ -200,9 +200,9 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   }
 
   // 4. Apply pagination
-  // Provide defaults again for TS, although parsers guarantee numbers
-  const safePage = page ?? 0;
-  const safePageSize = pageSize ?? 10;
+  // Determine safe values for page and pageSize using defaultValue when params are missing
+  const safePage = params.has('page') ? page : dataTableRouterParsers.page.defaultValue;
+  const safePageSize = params.has('pageSize') ? pageSize : dataTableRouterParsers.pageSize.defaultValue;
   const start = safePage * safePageSize;
   const paginatedData = filteredData.slice(start, start + safePageSize);
 

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

@@ -11,7 +11,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigation } from 'react-router-dom';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
@@ -21,7 +21,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '.
 import { DataTableRouterToolbar, type DataTableRouterToolbarProps } from './data-table-router-toolbar';
 
 // Import the parsers and the inferred type
-import { type DataTableRouterState, type FilterValue } from './data-table-router-parsers';
+import type { DataTableRouterState, FilterValue } from './data-table-router-parsers';
 import { getDefaultDataTableState, useDataTableUrlState } from './use-data-table-url-state';
 
 // Schema for form data validation and type safety
@@ -122,6 +122,15 @@ export function DataTableRouterForm<TData, TValue>({
     },
   });
 
+  // Determine default pageSize and visible columns for skeleton loader
+  const defaultDataTableState = getDefaultDataTableState(defaultStateValues);
+  const visibleColumns = table.getVisibleFlatColumns();
+  // Generate stable IDs for skeleton rows based on current pageSize or fallback
+  const skeletonRowIds = useMemo(() => {
+    const count = urlState.pageSize > 0 ? urlState.pageSize : defaultDataTableState.pageSize;
+    return Array.from({ length: count }, () => window.crypto.randomUUID());
+  }, [urlState.pageSize, defaultDataTableState.pageSize]);
+
   // Pagination handler updates URL state
   const handlePaginationChange = useCallback(
     (pageIndex: number, newPageSize: number) => {
@@ -166,14 +175,19 @@ export function DataTableRouterForm<TData, TValue>({
             </TableHeader>
             <TableBody>
               {isLoading ? (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className="h-24 text-center">
-                    Loading...
-                  </TableCell>
-                </TableRow>
+                // Skeleton rows matching pageSize with zebra background
+                skeletonRowIds.map((rowId) => (
+                  <TableRow key={rowId} className="even:bg-gray-50">
+                    {visibleColumns.map((column) => (
+                      <TableCell key={column.id} className="py-2">
+                        <div className="h-6 my-1.5 bg-gray-200 rounded animate-pulse w-full" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
               ) : table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className="even:bg-gray-50">
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                     ))}

packages/components/src/remix-hook-form/data-table-router-toolbar.tsx

@@ -1,13 +1,13 @@
-import { Cross2Icon, MixerHorizontalIcon, PlusIcon } from '@radix-ui/react-icons';
-import { type Table } from '@tanstack/react-table';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import type { Table } from '@tanstack/react-table';
 import { type ChangeEvent, useCallback } from 'react';
 import { useRemixFormContext } from 'remix-hook-form';
 
 import { Button } from '../ui/button';
-import { TextField } from './text-field';
 import { DataTableFacetedFilter } from '../ui/data-table/data-table-faceted-filter';
 import { DataTableViewOptions } from '../ui/data-table/data-table-view-options';
-import { type DataTableRouterState, type FilterValue } from './data-table-router-parsers';
+import type { DataTableRouterState, FilterValue } from './data-table-router-parsers';
+import { TextField } from './text-field';
 
 export interface DataTableFilterOption {
   label: string;
@@ -56,23 +56,17 @@ export function DataTableRouterToolbar<TData>({
     (columnId: string, value: string[]) => {
       const currentFilters = [...watchedFilters];
       const existingFilterIndex = currentFilters.findIndex((filter: FilterValue) => filter.id === columnId);
-      let newFilters;
-
-      if (value.length === 0) {
-        // Remove filter if no values selected
-        if (existingFilterIndex !== -1) {
-          newFilters = currentFilters.filter((_, index) => index !== existingFilterIndex);
-        } else {
-          newFilters = currentFilters;
-        }
+      let newFilters: FilterValue[];
+
+      if (value.length === 0 && existingFilterIndex !== -1) {
+        newFilters = currentFilters.filter((_, i) => i !== existingFilterIndex);
+      } else if (value.length === 0) {
+        newFilters = currentFilters;
+      } else if (existingFilterIndex !== -1) {
+        newFilters = [...currentFilters];
+        newFilters[existingFilterIndex] = { id: columnId, value };
       } else {
-        // Add or update filter
-        if (existingFilterIndex !== -1) {
-          newFilters = [...currentFilters];
-          newFilters[existingFilterIndex] = { id: columnId, value };
-        } else {
-          newFilters = [...currentFilters, { id: columnId, value }];
-        }
+        newFilters = [...currentFilters, { id: columnId, value }];
       }
       setUrlState({ filters: newFilters, page: 0 });
     },
@@ -100,7 +94,7 @@ export function DataTableRouterToolbar<TData>({
               placeholder={`Search ${searchableColumns.map((column) => column.title).join(', ')}...`}
               value={watchedSearch}
               onChange={handleSearchChange}
-              className="h-8 w-full"
+              className="w-full"
               suffix={
                 watchedSearch ? (
                   <Button