fix: virtualize dataframe page selector to fix "No matching page" bug

[kirangadhave]

Fixes #9177

• Replaced the clamped ranges (only rendered 30 pages for large datasets) with a virtualized list.
• Typing a valid range now correctly filters using startsWith. using arithmetic range computation instead of scannling all pages (overkill maybe 😄, but looked elegant)
• Fixed keyboard nav (was broken already)
• Page selector scrolls to current page on open, resets to top on search (to first matched)
• refactor: prettifyRowColumnCount us use options object instead of multiple args (lint warning)

Cause: getPageRanges only rendered 30 pages (first 10, middle 10, last 10) and cmdk's filter only matched those when searching.

Deleted obsolete clamping tests, added tests for matchingPageRanges

Screen.Recording.2026-04-13.at.2.43.46.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Apr 13, 2026 9:39pm

[Copilot]

Pull request overview

Fixes the dataframe page-selector “No matching page” behavior for large datasets by switching from clamped page ranges to a virtualized list and by implementing explicit prefix-based filtering for page numbers.

Changes:

• Replaced the clamped getPageRanges approach with a virtualized page list.
• Disabled cmdk’s built-in filtering and implemented custom startsWith numeric filtering.
• Removed the now-obsolete unit test for getPageRanges.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
frontend/src/components/data-table/types.ts	Removes the PageRange type that was only used by the old clamped pagination implementation.
frontend/src/components/data-table/pagination.tsx	Reworks the page selector to use a virtualized list and custom search filtering.
frontend/src/components/data-table/tests/pagination.test.tsx	Deletes tests tied to the removed getPageRanges logic.

Comments suppressed due to low confidence (1)

frontend/src/components/data-table/pagination.tsx:194

• The virtualizer assumes a fixed row height via PAGE_ITEM_HEIGHT, but the rendered CommandItem rows don’t have an explicit height (and text-xs overrides the base text-sm sizing from menuItemVariants). This makes the virtualization math fragile and can lead to scroll/position drift if the effective row height isn’t exactly PAGE_ITEM_HEIGHT. Consider setting an explicit item height that matches PAGE_ITEM_HEIGHT (e.g. via a fixed h-* class) or switch to measuring elements.

const PAGE_ITEM_HEIGHT = 32;

export const PageSelector = ({
  currentPage,
  totalPages,
  onPageChange,

[Light2Dark]

I'm okay with this, but the nice thing about the original behaviour, is you don't need to scroll as much to see the last pages. Don't have strong opinions, so okay with this :)

[kirangadhave]

is you don't need to scroll as much to see the last pages

we have search, so scrolling is not an issue imo