Skip to content

Conversation

@antony-lambdacurry
Copy link

@antony-lambdacurry antony-lambdacurry commented Nov 17, 2025

  • Introduced DataTableWithScrolling component to demonstrate vertical scrolling and sticky header behavior.
  • Enhanced DataTablePagination with dynamic height adjustments.
  • Updated DataTable to support scrolling and improved layout for better user experience.
  • Added tests for scrolling functionality and initial render of the new component.

Summary by CodeRabbit

  • New Features

    • Scrollable data table with fixed-height container and responsive layout
    • Adaptive pagination sizing that hides the page-size indicator on small screens
    • Sticky table header during scrolling for improved usability
    • Improved empty-state display to maintain full-height presentation
  • Documentation

    • Added a demo/story showcasing the scrolling table with associated interactive tests
  • Tests

    • Introduced interactive scrolling tests and a test-focused story
  • Chores

    • Bumped component package version to a beta release
    • Enforced immutable install in CI workflows

…aTable component

- Introduced DataTableWithScrolling component to demonstrate vertical scrolling and sticky header behavior.
- Enhanced DataTablePagination with dynamic height adjustments.
- Updated DataTable to support scrolling and improved layout for better user experience.
- Added tests for scrolling functionality and initial render of the new component.
@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link

coderabbitai bot commented Nov 17, 2025

Walkthrough

Adds a new server-driven, fixed-height scrollable DataTable story with test scaffolding and URL-synced controls; updates data-table pagination and layout for responsive height and sticky header behavior; bumps packages/components to 0.23.0-beta.1; CI workflows now run yarn install --immutable.

Changes

Cohort / File(s) Summary
Story: WithScrolling
apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
Added WithScrolling story, duplicate/parallel DataTableWithScrolling rendering path, route loader wiring, StoryContext/test utilities import, and play() that invokes testInitialRenderScrolling and testScrolling.
Pagination styling
packages/components/src/ui/data-table/data-table-pagination.tsx
Imported cn; converted nav class to cn composition; added responsive CSS height variables (--lc-datatable-pagination-height) with sm: override; hid rows-per-page indicator on small screens (max-sm:hidden).
Table layout & scrolling
packages/components/src/ui/data-table/data-table.tsx
Reworked wrapper to use CSS height variables and responsive max-heights; added flex-column layout, overflow handling, sticky TableHeader with background, full-height TableBody behavior, and adjusted empty-state row sizing to fill height.
Package manifest
packages/components/package.json
Bumped version from 0.22.5 to 0.23.0-beta.1.
CI install enforcement
.github/workflows/github-pages.yml, .github/workflows/pr-preview.yml
Changed dependency install steps to yarn install --immutable to enforce lockfile integrity during workflow runs.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant S as WithScrolling Story
    participant L as Route Loader
    participant C as Fixed-Height Container
    participant H as Sticky Header
    participant B as Scrollable Body
    participant P as Pagination Controls
    rect rgba(200,240,220,0.6)
    U->>S: Open story
    activate S
    S->>L: request server-driven data (loader)
    L-->>S: return data
    end
    rect rgba(220,230,255,0.6)
    S->>C: render fixed-height container (CSS var)
    C->>H: mount sticky header
    C->>B: mount scrollable body (overflow-y)
    B-->>C: render rows
    C->>P: render pagination / sorting (URL-synced)
    P-->>C: update controls
    end
    S->>S: play() -> run scrolling tests
    deactivate S
    S-->>U: interactive scrollable table
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Inspect story duplication and routing/loader wiring for correctness and possible merge conflicts.
  • Verify CSS variable usage, responsive breakpoints, and sticky header behavior for layout regressions.
  • Check pagination hiding on small screens and URL-sync logic in story tests.

Possibly related PRs

Poem

🐰 I hopped into code with a tail of delight,
Built a scrolling garden where rows take flight,
Sticky hats on headers, the body bounds free,
Tests chase my hops so the view stays as key,
Nibble the version — a beta for tea!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title accurately summarizes the main changes: adding scrolling capability and sticky header functionality to the DataTable component. It directly aligns with the actual modifications across multiple files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch datatable-improved-scrolling-and-sticky-header

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e670350 and 8a4aa5e.

📒 Files selected for processing (2)
  • .github/workflows/github-pages.yml (1 hunks)
  • .github/workflows/pr-preview.yml (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • .github/workflows/github-pages.yml
  • .github/workflows/pr-preview.yml

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx (1)

1-2: Replace fixed setTimeout and CSS selectors with Testing Library best practices for better resilience.

The test works functionally but has two areas that can be hardened per current Storybook guidance:

  1. Replace CSS selector queries with semantic queries
    Instead of querySelector('[class*="rounded-md border"]') and querySelector('[class*="overflow-auto"]'), derive elements from semantic queries: canvas.findByRole('table') and walk to the scroll container, or add a stable data-testid to the scroll container.

  2. Replace setTimeout with waitFor
    The setTimeout(resolve, 500) and setTimeout(resolve, 100) calls can be replaced with await waitFor(() => expect(...)) to assert scroll height and sticky positioning without hard-coded delays. This auto-retries until conditions are met or timeout, making tests more robust to render timing variations.

These changes align with current Storybook guidance: scope queries to the story canvas with within(canvasElement), prefer accessible queries like findByRole over CSS selectors, use findBy* for async waits, and use waitFor for assertions on arbitrary state changes.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7788aa7 and ba6db51.

📒 Files selected for processing (4)
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx (3 hunks)
  • packages/components/package.json (1 hunks)
  • packages/components/src/ui/data-table/data-table-pagination.tsx (2 hunks)
  • packages/components/src/ui/data-table/data-table.tsx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
packages/components/src/ui/**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

packages/components/src/ui/**/*.tsx: Build on @radix-ui components as the foundation for base UI components
Follow the component composition pattern for UI components that accept form integration

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

**/*.{tsx,ts}: Props interfaces should be named as ComponentNameProps
Form schemas should be named formSchema or componentNameSchema

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
{apps,packages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/*.{ts,tsx}: Use package name imports for published packages (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form')
Import from specific entry points (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field')
Do not use relative imports across packages (e.g., avoid import { TextField } from '../../packages/components/src/remix-hook-form/text-field')
Order imports: 1) external libraries, 2) internal package imports, 3) cross-package imports, 4) type-only imports (grouped separately)

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
{apps,packages}/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/src/**/*.{ts,tsx}: Use relative imports within the same package (e.g., import { FormControl } from './form')
Use relative imports for sibling directories (e.g., import { Button } from '../ui/button')

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
packages/components/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

packages/components/src/**/*.{ts,tsx}: Always export both component and props type (e.g., export { ComponentName }; export type { ComponentNameProps };)
Use named exports for components for better tree-shaking (e.g., export const ComponentName = ...; avoid default exports)
Avoid default exports for components
Use tree-shaking friendly exports

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
{apps,packages}/**/src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/src/**/*.{tsx,ts}: Use kebab-case for component file names (e.g., text-field.tsx, data-table.tsx)
Match component name in PascalCase to the exported component from the file (e.g., text-field.tsx exports TextField)

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
packages/components/src/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Don't import from remix-hook-form package in ui components

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Avoid circular dependencies

**/*.{ts,tsx}: Indent with 2 spaces, max line width 120, and use single quotes (Biome-enforced)
Use PascalCase for component and type names
Name hooks in camelCase with a use* prefix
Organize imports automatically with Biome
Use named exports only

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
packages/components/src/**

📄 CodeRabbit inference engine (AGENTS.md)

Place all @lambdacurry/forms source under packages/components/src and treat it as the only editable source for the package

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/*.tsx: Keep React components pure and fully typed
Define explicit props interfaces for React components
Use React 19 ref patterns (forwardRef, useImperativeHandle as appropriate)

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
**/*.{ts,tsx,mdx}

📄 CodeRabbit inference engine (AGENTS.md)

Use kebab-case for filenames (e.g., text-field.tsx, data-table-filter/**)

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
packages/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Avoid cross-package relative imports in the monorepo

Files:

  • packages/components/src/ui/data-table/data-table.tsx
  • packages/components/src/ui/data-table/data-table-pagination.tsx
apps/docs/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

In apps/docs, import from package name instead of relative paths for cross-package dependencies

Files:

  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
apps/docs/src/remix-hook-form/**/*.stories.tsx

📄 CodeRabbit inference engine (.cursor/rules/storybook-testing.mdc)

apps/docs/src/remix-hook-form/**/*.stories.tsx: Follow the three-phase test pattern in play: default state, invalid submission, then valid submission
Use play functions with @storybook/test utilities (userEvent, expect, canvas/within) for interaction tests
Place decorators on individual stories, not on the meta object
Keep meta configuration minimal (title, component, parameters, tags) and avoid global decorators
Use withReactRouterStubDecorator per story when routing/fetcher behavior is needed; configure routes, loaders, and actions in the decorator
For async elements, use findBy* queries; use queryBy* to assert non-existence; avoid getBy* for async content
Prefer semantic queries (ByRole, ByLabelText, etc.) over CSS selectors or data-testid; avoid CSS selectors when accessible queries exist
Always click an input before clearing; then clear and type
Each story should test one primary workflow; do not bundle multiple unrelated scenarios in a single story
Use step grouping in play for complex workflows
Include required imports for interaction tests: Meta/StoryObj types and { expect, userEvent, within } from @storybook/test; import withReactRouterStubDecorator
Use a controlled form wrapper pattern: useFetcher, useRemixForm with zodResolver(formSchema), RemixFormProvider, and fetcher.Form
Never use a regular

; always use fetcher.Form with methods.handleSubmit for router integration
Define Zod schemas and infer types for form data; wire zodResolver into useRemixForm
Test both client-side and server-side validation (loader/action paths) when applicable
Use router decorator configurations suitable to the scenario: loader for server fetch, action for form submissions, or no loader for client-only
Organize and export reusable helper test functions; group related test helpers together
Use role-based queries for portaled UI (listbox/option), open trigger first, query portal via within(document.body), and assert teardown with waitFor
Give triggers of portaled widgets a...

Files:

  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
apps/docs/**

📄 CodeRabbit inference engine (AGENTS.md)

Place Storybook docs, examples, and UI tests in apps/docs

Files:

  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
**/*.stories.@(tsx|mdx)

📄 CodeRabbit inference engine (AGENTS.md)

**/*.stories.@(tsx|mdx): Add stories to exercise states for critical interactions (forms, validation, a11y, filters)
Use per-story decorators as needed for setup
Structure Storybook play tests in three phases (setup, act, assert)

Files:

  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
{package.json,packages/**/package.json,apps/**/package.json}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Use consistent versioning across packages

Files:

  • packages/components/package.json
{packages/**/package.json,apps/**/package.json}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Define peerDependencies, dependencies, and devDependencies appropriately in package.json

Files:

  • packages/components/package.json
packages/components/package.json

📄 CodeRabbit inference engine (.cursor/rules/versioning-with-npm.mdc)

Version bumps for @lambdacurry/forms update packages/components/package.json

Files:

  • packages/components/package.json
packages/**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Verify each package’s exports field is correct

Files:

  • packages/components/package.json
🧠 Learnings (1)
📚 Learning: 2025-09-23T16:19:41.981Z
Learnt from: CR
Repo: lambda-curry/forms PR: 0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-09-23T16:19:41.981Z
Learning: Applies to apps/docs/src/remix-hook-form/**/*.stories.tsx : Include required imports for interaction tests: Meta/StoryObj types and { expect, userEvent, within } from storybook/test; import withReactRouterStubDecorator

Applied to files:

  • apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
🧬 Code graph analysis (3)
packages/components/src/ui/data-table/data-table.tsx (2)
packages/components/src/ui/utils/index.ts (1)
  • cn (4-6)
apps/docs/src/remix-hook-form/data-table/data-table-stories.components.tsx (1)
  • columns (68-147)
apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx (6)
apps/docs/src/remix-hook-form/data-table/data-table-stories.helpers.ts (8)
  • DataResponse (12-21)
  • useSearchParams (233-233)
  • useMemo (232-232)
  • useFilterSync (228-228)
  • useDataTableFilters (225-225)
  • DataTableFilter (223-223)
  • DataTable (221-221)
  • withReactRouterStubDecorator (234-234)
packages/components/src/ui/utils/use-filter-sync.ts (1)
  • useFilterSync (14-48)
packages/components/src/ui/data-table-filter/hooks/use-data-table-filters.tsx (1)
  • useDataTableFilters (47-397)
packages/components/src/ui/data-table/data-table.tsx (1)
  • DataTable (14-60)
apps/docs/src/remix-hook-form/data-table/data-table-stories.test-utils.ts (2)
  • testInitialRender (11-28)
  • testPagination (105-142)
apps/docs/src/lib/storybook/react-router-stub.tsx (1)
  • withReactRouterStubDecorator (30-55)
packages/components/src/ui/data-table/data-table-pagination.tsx (1)
packages/components/src/ui/utils/index.ts (1)
  • cn (4-6)
🔇 Additional comments (2)
packages/components/src/ui/data-table/data-table-pagination.tsx (1)

5-5: Responsive pagination layout + height vars look solid.

Using cn to compose the flex layout with --lc-datatable-pagination-height and hiding the duplicate info label on small screens is consistent with the new table container layout and keeps the controls usable across breakpoints. No functional issues from these changes.

Also applies to: 28-32, 34-34

packages/components/src/ui/data-table/data-table.tsx (1)

22-25: Full-height, scrollable layout and sticky header implementation look correct.

The CSS variable–based max-height, h-full propagation into the inner table wrapper, sticky header, and full-height empty state all line up and should give the intended scrollable behavior without breaking existing auto-height usages.

Also applies to: 38-38, 48-49

Comment on lines +256 to +368
// --- DataTableWithScrolling ---
function DataTableWithScrolling() {
// Get the loader data (filtered/paginated/sorted data from server)
const loaderData = useLoaderData<DataResponse>();
const [searchParams, setSearchParams] = useSearchParams();

// Initialize data from loader response
const data = loaderData?.data ?? [];
const pageCount = loaderData?.meta.pageCount ?? 0;
const facetedCounts = loaderData?.facetedCounts ?? {};

// Convert facetedCounts to the correct type for useDataTableFilters (Map-based)
const facetedOptionCounts = useMemo(() => {
const result: Partial<Record<string, Map<string, number>>> = {};
Object.entries(facetedCounts).forEach(([col, valueObj]) => {
result[col] = new Map(Object.entries(valueObj));
});
return result;
}, [facetedCounts]);

// --- Bazza UI Filter Setup ---
// 1. Initialize filters state with useFilterSync (syncs with URL)
const [filters, setFilters] = useFilterSync();

// --- Read pagination and sorting directly from URL ---
// Use larger page size to ensure scrolling is needed
const pageIndex = Number.parseInt(searchParams.get('page') ?? '0', 10);
const pageSize = Number.parseInt(searchParams.get('pageSize') ?? '20', 10);
const sortField = searchParams.get('sortField');
const sortOrder = (searchParams.get('sortOrder') || 'asc') as 'asc' | 'desc';

// --- Pagination and Sorting State ---
const pagination = { pageIndex, pageSize };
const sorting = sortField ? [{ id: sortField, desc: sortOrder === 'desc' }] : [];

// --- Event Handlers: update URL directly ---
const handlePaginationChange: OnChangeFn<PaginationState> = (updaterOrValue) => {
const next = typeof updaterOrValue === 'function' ? updaterOrValue(pagination) : updaterOrValue;
searchParams.set('page', next.pageIndex.toString());
searchParams.set('pageSize', next.pageSize.toString());
setSearchParams(searchParams);
};

const handleSortingChange: OnChangeFn<SortingState> = (updaterOrValue) => {
const next = typeof updaterOrValue === 'function' ? updaterOrValue(sorting) : updaterOrValue;
if (next.length > 0) {
searchParams.set('sortField', next[0].id);
searchParams.set('sortOrder', next[0].desc ? 'desc' : 'asc');
} else {
searchParams.delete('sortField');
searchParams.delete('sortOrder');
}
setSearchParams(searchParams);
};

// --- Bazza UI Filter Setup ---
const bazzaProcessedColumns = useMemo(() => columnConfigs, []);

// Define a filter strategy (replace with your actual strategy if needed)
const filterStrategy = 'server' as const;

// Setup filter actions and strategy (controlled mode)
const {
columns: filterColumns,
actions,
strategy,
} = useDataTableFilters({
columnsConfig: bazzaProcessedColumns,
filters,
onFiltersChange: setFilters,
faceted: facetedOptionCounts,
strategy: filterStrategy,
data,
});

// --- TanStack Table Setup ---
const table = useReactTable({
data,
columns,
pageCount,
state: {
pagination,
sorting,
},
onPaginationChange: handlePaginationChange,
onSortingChange: handleSortingChange,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
manualPagination: true,
manualSorting: true,
});

return (
<div className="space-y-4">
<div>
<h1 className="text-2xl font-bold mb-4">Data Table with Scrolling and Sticky Header</h1>
<p className="text-gray-600 mb-6">
This demonstrates the table with vertical scrolling and a sticky header that remains visible while scrolling
through table rows. The table is contained within a fixed-height container.
</p>
</div>

{/* Bazza UI Filter Interface */}
<DataTableFilter columns={filterColumns} filters={filters} actions={actions} strategy={strategy} />

<div className="h-[500px] overflow-hidden">
{/* Data Table */}
<DataTable table={table} columns={columns.length} pageCount={pageCount} />
</div>
</div>
);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Scrolling story behavior vs docs and pageSize defaults are slightly inconsistent.

The DataTableWithScrolling + WithScrolling story wiring looks correct overall (fixed 500px container, same loader and filter plumbing as the server-driven story), but there are two small inconsistencies:

  1. Docs vs actual initial page size

    • The story description and DataTableWithScrolling comment mention using a larger page size (20 rows) to ensure scrolling.
    • However, withReactRouterStubDecorator still seeds ?page=0&pageSize=10, so the story actually starts at 10 rows unless the URL is overridden.
    • Consider either:
      • Passing an explicit initialPath: '/?page=0&pageSize=20' into withReactRouterStubDecorator for WithScrolling, or
      • Dropping the “20 rows” detail from the description and keeping everything at 10 for consistency.
  2. Default pageSize divergence when URL lacks a value

    • DataTableWithScrolling falls back to pageSize = 20, while DataTablePagination falls back to pageSize = 10.
    • In a context where no pageSize query param is present, the table’s pagination state and the pagination UI could disagree.
    • It would be safer to centralize this default (e.g., via dataTableRouterParsers.pageSize or a shared constant) and use the same default in both the table state and DataTablePagination.

These are minor, but aligning the defaults and story description will make the scrolling story more predictable and easier to reason about.

Also applies to: 627-654

🤖 Prompt for AI Agents
In apps/docs/src/remix-hook-form/data-table/data-table-server-driven.stories.tsx
around lines 256 to 368, the story claims a 20-row initial pageSize but the
router decorator seeds ?pageSize=10 and this file falls back to 20 while
DataTablePagination falls back to 10; fix by either updating the WithScrolling
story decorator to use initialPath='/?page=0&pageSize=20' to match the
description, and update the story text/comment to reflect the chosen value, and
centralize the pageSize default by importing/using the shared constant (e.g.,
dataTableRouterParsers.pageSize or a new exported DEFAULT_PAGE_SIZE) in this
file and in DataTablePagination so both fallbacks agree.

{
"name": "@lambdacurry/forms",
"version": "0.22.5",
"version": "0.23.0-beta.1",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

Version bump looks good; verify monorepo consistency.

The prerelease bump to "0.23.0-beta.1" is reasonable for the new DataTable behavior. Please just ensure other package manifests, changelogs, and publish scripts are aligned with this version.


🏁 Script executed:

#!/bin/bash
# From repo root, check for other versions that may need to align.
echo 'Package versions referencing @lambdacurry/forms:'
rg -n '"@lambdacurry/forms"' apps packages

echo
echo 'All version fields in package.json files:'
fd package.json -a apps packages | xargs -I{} jq -r '.name + "@" + .version' {}

Length of output: 278



---

🏁 Script executed:

```shell
#!/bin/bash
# Check for CHANGELOG files and publish scripts
echo "=== CHANGELOG files in monorepo ==="
fd -i 'changelog|release|history' -e md -e txt

echo
echo "=== Publish/release scripts ==="
fd 'publish|release' -e sh -e js -e ts packages apps

echo
echo "=== Check for version references in root ==="
cat package.json 2>/dev/null | jq -r '.version // "no root version"' || echo "no root package.json"

Length of output: 153



---

🏁 Script executed:

```shell
#!/bin/bash
# Check CHANGELOG.md for 0.23.0-beta.1 entry
echo "=== First 50 lines of packages/components/CHANGELOG.md ==="
head -50 packages/components/CHANGELOG.md

echo
echo "=== Search for 0.23.0 in CHANGELOG ==="
grep -n "0.23.0" packages/components/CHANGELOG.md || echo "No 0.23.0 found in CHANGELOG"

Length of output: 565


Update CHANGELOG.md with 0.23.0-beta.1 entry.

The version bump to 0.23.0-beta.1 in package.json is correct, and dependency references are properly aligned. However, packages/components/CHANGELOG.md is missing an entry for this version—the most recent entry is 0.22.2. Add a new section documenting the changes for 0.23.0-beta.1.

🤖 Prompt for AI Agents
In packages/components/package.json around line 3, the version was bumped to
0.23.0-beta.1 but packages/components/CHANGELOG.md lacks an entry for that
version; open packages/components/CHANGELOG.md and add a new top section for
0.23.0-beta.1 with date and a brief list of changes (copy relevant release notes
or summarize commits since 0.22.2), following the existing changelog format and
ordering so the new entry appears above 0.22.2.

@antony-lambdacurry antony-lambdacurry force-pushed the datatable-improved-scrolling-and-sticky-header branch from e670350 to 8a4aa5e Compare November 17, 2025 23:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants