Skip to content

Fix data table storybook story to show mock data #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaruesink merged 1 commit into from
Apr 17, 2025
Merged

Fix data table storybook story to show mock data #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion apps/docs/src/lib/storybook/react-router-stub.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;

Expand Down
12 changes: 11 additions & 1 deletion apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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'));
Expand All @@ -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];

Expand Down