Change algorithm for column widths

[severo]

fixes #159

Some rules:

• no column can be narrower than minWidth (hardcoded to 50px).
• a column resized manually (with mouse or keyboard or ... localStorage) has a fixed size. It's highlighted visually with a blue dot
• the other columns are adjusted to fit the remaining space in the table:
  • until all the columns fit within the space, the widest one(s) is (are) shrunk to equal the second widest one(s). Worst case: all the columns take the narrowest width
  • exception: a column cannot be shrinked under a minimum width, that depends on the number of columns:
    • 100% for 1 column
    • 50% for 2 columns
    • 33.3% for 3 columns
    • 25% for 4 columns or more

A demo:

Screencast.From.2025-05-28.17-02-15.mp4

[severo]

I'll add unit tests to this PR if the global logic is OK for you @bleakley @platypii

[platypii]

Very nice!! 👏 Some minor comments:

• I propose changing the max width for 4+ columns to something that is not an exact multiple of the width. This has the nice feature of "hinting" to the user that there are more columns offscreen to the right. Eg-
  30% for 4 columns or more will make it so that 4+ wide columns will look like:
  | col1 | col2 | col3 | co... |
  which hints to the user that there is more data.

• The user-resizing feels a little weird the way the other columns react by expand/contracting. I'm not sure of a better option but just mentioning that it felt a little weird in case you have ideas.

[severo]

The user-resizing feels a little weird the way the other columns react by expand/contracting. I'm not sure of a better option but just mentioning that it felt a little weird in case you have ideas.

Sure, I feel the same. An alternative is to adjust the widths only on init and table resizing. I think it would be good enough and less weird.

[severo]

I propose changing the max width for 4+ columns to something that is not an exact multiple of the width. This has the nice feature of "hinting" to the user that there are more columns offscreen to the right. Eg-
30% for 4 columns or more will make it so that 4+ wide columns will look like:
| col1 | col2 | col3 | co... |
which hints to the user that there is more data.

OK!

A slightly more elaborate solution (too much maybe) would be to avoid the right border if there are more columns. ie if there are 10 columns, and 7 are within the viewport, the 7th column cannot end exactly on the table border, but we would have at least 20px shift right or left.

[bleakley]

I experimented with the sizing a bit and overall I think this behavior is pretty good. One thing that would be nice would be smart fitting column width on double click, similar to how it works in sheets/excel. If it could be reduced to the minimum needed to contain the values, which would be especially useful for columns like ids or numbers.

[severo]

I experimented with the sizing a bit and overall I think this behavior is pretty good. One thing that would be nice would be smart fitting column width on double click, similar to how it works in sheets/excel. If it could be reduced to the minimum needed to contain the values, which would be especially useful for columns like ids or numbers.

Do you think we should do it at init?

When the total width of all columns is less than the available space, I currently add space evenly to all the columns. An alternative, which I don't like because it's less balanced, is to add all the space to the largest column.

[severo]

I'll try to change the rules as follows:

• no column can be narrower than minWidth (hardcoded to 50px).
• a column resized manually (with mouse or keyboard or ... localStorage) has a fixed size. It's highlighted visually with a blue dot
• added (4093ae6,8abf6e6): a column auto-resized (double click or space/enter on the resizer) has a fixed size, as the manually resized columns (same blue dot). The maxWidth is set in CSS (40rem in .styled class). If it is pressed (auto-resized) again, it's resized automatically, as a way to let the column flow again.
• added (4093ae6, 8abf6e6): when resizing or autoresizing a column, the other columns are unchanged
• the other columns are adjusted to fit the remaining space in the table:
  • until all the columns fit within the space, the widest one(s) is (are) shrunk to equal the second widest one(s). Worst case: all the columns take the narrowest width
  • exception: a column cannot be shrinked under a minimum width, that depends on the number of columns:
    • 100% for 1 column
    • 50% for 2 columns
    • 33.3% for 3 columns
    • changed 25% 30% for 4 columns or more

[severo]

Could you review again @platypii @bleakley? Thanks!

Screencast.From.2025-06-04.11-04-20.mp4

[bleakley]

Very nice 👍

[Copilot]

Pull Request Overview

This PR replaces the previous fixed‐width hook with a more flexible useColumnStates solution, updates how column widths are measured, persisted, and adjusted to fit available space, and refactors related components to use the new API.

• Introduces useColumnStates and generic parse/stringify in useLocalStorageState
• Implements dynamic width adjustment algorithm in helpers/width.ts and connects it to HighTable via setAvailableWidth
• Updates ColumnHeader, ColumnResizer, TableCorner, and tests to use the new state shape and show fixed-width indicators

Reviewed Changes

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

Show a summary per file

File	Description
src/hooks/useLocalStorageState.ts	Added generic parse/stringify options and simplified save logic
src/hooks/useColumnStates.tsx	New hook managing measured vs. fixed widths and storage
src/helpers/width.ts	New measurement helpers and adjustMeasuredWidths logic
src/components/HighTable/HighTable.tsx	Wired in useColumnStates, report available width
src/components/ColumnHeader	Switched to useColumnStates, toggling fixed/auto resize
src/components/ColumnResizer	Updated to use forceWidth/autoResize and new pointer state
src/components/TableCorner	Added forwarded ref for measurement
src/components/HighTable/*.test.tsx	Updated tests to expect new storage suffix and state shape

Comments suppressed due to low confidence (3)

src/components/ColumnResizer/ColumnResizer.tsx:102

• The handling for the 'Escape' key has been removed, so users can't cancel a resize operation via keyboard. Reintroduce if (e.key === 'Escape') { setActiveKeyboard(false); navigateToCell?.(); return; }.

const onKeyDown = useCallback((e: KeyboardEvent) => {

src/components/ColumnResizer/ColumnResizer.tsx:134

• For better ARIA slider semantics, add aria-valuemin={minWidth} and aria-valuemax={/* some max */} so assistive tech knows the allowed range.

aria-valuenow={width}

src/components/ColumnResizer/ColumnResizer.tsx:102

• No existing tests cover 'Escape' key behavior in the resizer. Consider adding a unit test to verify that ESC cancels resizing and returns focus to the parent cell.

const onKeyDown = useCallback((e: KeyboardEvent) => {

[severo]

re low confidence Copilot comment about aria-valuemin, see: #202

the two other comments are wrong

[severo]

Merging. We can fix things later if needed. Thanks for the comments, it's better now!

[platypii]

Awesome great work @severo!! It was really annoying me having to resize columns all the time, this is a huge improvement!