feat(table): apply column widths via CSS variables during resize#10267
Open
coolassassin wants to merge 2 commits into
Open
feat(table): apply column widths via CSS variables during resize#10267coolassassin wants to merge 2 commits into
coolassassin wants to merge 2 commits into
Conversation
Update column widths imperatively on the table root during drag so cells read from CSS custom properties instead of inline layout styles. Commit widths on resize end with a single relayout, and flush onResize when the drag finishes. Co-authored-by: Cursor <cursoragent@cursor.com> � Conflicts: � packages/react-aria/src/table/useTableColumnResize.ts
Add shared test utilities for CSS variable column widths and update table resizing tests to assert pixel widths without relying on inline style.width. Co-authored-by: Cursor <cursoragent@cursor.com>
coolassassin
force-pushed
the
table-css-based-resize
branch
from
7faeb43 to
88573e0
Compare
coolassassin
changed the title
snowystinger
reviewed
Jul 3, 2026
snowystinger
left a comment
snowystinger
left a comment
Member
There was a problem hiding this comment.
This is definitely ambitious and an interesting idea. A couple of big comments. I'm not sure it's best to act on them yet however, I think the rest of the team should discuss it. If you would like to help with that discussion, a write up of your plan would be the most useful. I would start with the RFC template https://github.com/adobe/react-spectrum/blob/main/rfcs/README.md as noted in this README, this change would fall into the category of substantial.
| renderDropIndicator?: (target: ItemDropTarget) => ReactNode | ||
| ): ReactNode { | ||
| let layoutInfo = reusableView.layoutInfo!; | ||
| let useColumnCSSVariables = layoutInfo.type === 'column' || layoutInfo.type === 'cell'; |
Member
There was a problem hiding this comment.
This (all these lines) are much too specific to tables to go into Virtualizer
| className?: string; | ||
| children: ReactNode; | ||
| /** When true, horizontal positioning uses CSS custom properties instead of inline styles. */ | ||
| useColumnCSSVariables?: boolean; |
|
|
||
| for (let column of columns) { | ||
| let width = columnWidths.get(column.key) ?? 0; | ||
| root.style.setProperty(getColumnWidthVarName(column.index), `${width}px`); |
Member
There was a problem hiding this comment.
stately doesn't do anything with dom if at all possible, it should be agnostic of the environment
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
During column drag, table column widths are applied imperatively as CSS custom properties on the table root (
--col-N-width,--col-N-start,--table-total-width). Cells and columns read horizontal size from those variables instead of inlinewidth/leftfrom the virtualizer layout. React state and virtualizer relayout run once onendResize, not on every pointer move.Before:
https://github.com/user-attachments/assets/ed9653bd-18bc-4529-8cb6-1eeeafdf1adf
After:
https://github.com/user-attachments/assets/43daf13c-3181-4b76-b449-063c4c9ef44b
✅ Pull Request Checklist:
📝 Test Instructions:
Automated
Manual
TableView/ResizableTableContainer(many columns, virtualized if possible).react-aria-componentsTableinsideResizableTableContainer(native table + virtualized table if available).onResize/onResizeEndstill fire with expected values.🧢 Your Project:
dxFeed (Devexperts) internal projects