@@ -87,9 +87,13 @@ const columns: ColumnDef<User>[] = [
8787// Component to display the data table with router form integration
8888function DataTableRouterFormExample ( ) {
8989 const loaderData = useLoaderData < DataResponse > ( ) ;
90+
91+ // Ensure we have data even if loaderData is undefined
9092 const data = loaderData ?. data ?? [ ] ;
9193 const pageCount = loaderData ?. meta . pageCount ?? 0 ;
9294
95+ console . log ( 'DataTableRouterFormExample - loaderData:' , loaderData ) ;
96+
9397 return (
9498 < div className = "container mx-auto py-10" >
9599 < h1 className = "text-2xl font-bold mb-4" > Users Table (React Router Form Integration)</ h1 >
@@ -140,9 +144,13 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
140144 // Add a small delay to simulate network latency
141145 await new Promise ( resolve => setTimeout ( resolve , 300 ) ) ;
142146
143- const url = request . url ? new URL ( request . url ) : new URL ( 'http://localhost' ) ;
147+ // Ensure we have a valid URL object
148+ const url = request ?. url ? new URL ( request . url ) : new URL ( 'http://localhost?page=0&pageSize=10' ) ;
144149 const params = url . searchParams ;
145150
151+ console . log ( 'handleDataFetch - URL:' , url . toString ( ) ) ;
152+ console . log ( 'handleDataFetch - Search Params:' , Object . fromEntries ( params . entries ( ) ) ) ;
153+
146154 // Use our custom parsers to parse URL search parameters
147155 const page = dataTableRouterParsers . page . parse ( params . get ( 'page' ) ) ;
148156 const pageSize = dataTableRouterParsers . pageSize . parse ( params . get ( 'pageSize' ) ) ;
@@ -151,6 +159,8 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
151159 const search = dataTableRouterParsers . search . parse ( params . get ( 'search' ) ) ;
152160 const parsedFilters = dataTableRouterParsers . filters . parse ( params . get ( 'filters' ) ) ;
153161
162+ console . log ( 'handleDataFetch - Parsed Parameters:' , { page, pageSize, sortField, sortOrder, search, parsedFilters } ) ;
163+
154164 // Apply filters
155165 let filteredData = [ ...users ] ;
156166
0 commit comments