Autosize the row numbers column

[severo]

The code is simpler now: we just compute the number of characters of the number of rows, and the first column width is computed in CSS.

It works for different fonts (monospace or not). We use the ch unit which is more adapted to this use case than em.

Screencast.From.2025-11-04.16-20-47.mp4

[bleakley]

This isn't working for my use case because the row indices are greater than the number of current rows in the dataframe when the filter is applied. For example here I have a filter applied, that the title must contain "be":

At first there are 64 rows in the dataframe, and already you can see there are some 3 digit row numbers, then when I scroll it gets worse:

I need to be able to pass in another number, which is the total number of rows in the dataset, which may be greater than the number in the dataframe. If this isn't a good idea I could instead calculate width and override the styles in hyperparam.app

[severo]

I need to be able to pass in another number, which is the total number of rows in the dataset, which may be greater than the number in the datafra

Oh, yes, it makes sense: we want to compute the width on the maximum row number, not necessarily on the number of rows in the dataframe. I'll add this possibility, and fallback to the dataframe number of rows by default.

[severo]

Done. Does it work better for you?

[Copilot]

Pull Request Overview

This PR adds support for displaying custom maximum row numbers in the HighTable component, particularly useful for filtered datasets where the visible row count differs from the actual data index range. The implementation shifts from JavaScript-calculated row header widths to CSS-based dynamic width calculations.

Key changes:

• Added maxRowNumber prop to HighTable and DataProvider to support custom row number display
• Refactored row header width calculation from JavaScript to CSS using character-based sizing
• Changed canMeasureWidth from boolean to per-column record in TableHeader for more granular control

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/hooks/useData.tsx	Added maxRowNumber to DataContext with memoized fallback to data.numRows
src/components/TableHeader/TableHeader.tsx	Changed canMeasureWidth prop from boolean to canMeasureColumn record for per-column measurement control
src/components/TableHeader/TableHeader.test.tsx	Removed canMeasureWidth prop from test cases (now optional)
src/components/HighTable/HighTable.tsx	Integrated maxRowNumber prop, replaced JavaScript width calculation with CSS variables, refactored canMeasureWidth logic to per-column basis, removed unused cellStyle import, reordered prop documentation alphabetically
src/components/HighTable/HighTable.stories.tsx	Added FilteredData story demonstrating the maxRowNumber feature with custom row numbering
src/components/ColumnHeader/ColumnHeader.tsx	Added clarifying comment about using offsetWidth instead of clientWidth
src/HighTable.module.css	Replaced fixed --row-label-width with dynamic --row-number-width calculated from character count, updated comment clarity
README.md	Updated documentation with new maxRowNumber prop and reordered props alphabetically for consistency
.storybook/main.ts	Simplified Storybook configuration to use string format for framework
.storybook/global.css	Fixed typo in comment: "HightTable" to "HighTable"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[bleakley]

Yes, this is perfect, thank you 👍