Fix data table storybook story to show mock data

Author: Codegen Bot

apps/docs/src/lib/storybook/react-router-stub.tsx

@@ -53,8 +53,13 @@ export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorat
 
     // Get the base path (without existing query params from options)
     const basePath = initialPath.split('?')[0];
+    
     // Get the current search string from the actual browser window, if available
-    const currentWindowSearch = typeof window !== 'undefined' ? window.location.search : '';
+    // If not available, use a default search string with parameters needed for the data table
+    const currentWindowSearch = typeof window !== 'undefined' 
+      ? window.location.search 
+      : '?page=0&pageSize=10';
+    
     // Combine them for the initial entry
     const actualInitialPath = `${basePath}${currentWindowSearch}`;
 

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

@@ -87,9 +87,13 @@ 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;
 
+  console.log('DataTableRouterFormExample - loaderData:', loaderData);
+
   return (
     <div className="container mx-auto py-10">
       <h1 className="text-2xl font-bold mb-4">Users Table (React Router Form Integration)</h1>
@@ -140,9 +144,13 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   // Add a small delay to simulate network latency
   await new Promise(resolve => setTimeout(resolve, 300));
 
-  const url = request.url ? new URL(request.url) : new URL('http://localhost');
+  // 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;
 
+  console.log('handleDataFetch - URL:', url.toString());
+  console.log('handleDataFetch - Search Params:', Object.fromEntries(params.entries()));
+
   // Use our custom parsers to parse URL search parameters
   const page = dataTableRouterParsers.page.parse(params.get('page'));
   const pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize'));
@@ -151,6 +159,8 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   const search = dataTableRouterParsers.search.parse(params.get('search'));
   const parsedFilters = dataTableRouterParsers.filters.parse(params.get('filters'));
 
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortOrder, search, parsedFilters });
+
   // Apply filters
   let filteredData = [...users];