Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] [table] fix layout measuring headers on initial mount #5145

Merged
merged 5 commits into from
Feb 25, 2022

Conversation

adidahiya
Copy link
Contributor

@adidahiya adidahiya commented Feb 25, 2022

The table component rendering process has a particular order of operations which relies on DOM interactions and React lifecycle methods happening in a certain way for all its measurement calculations to be accurate. Before this PR, TableQuadrantStack was taking measurements of column/row headers before they had a chance to render their contents, and using those width/height values to set the size of the quadrants for the initial render. This turned out to be buggy and produced visual gaps in the table when there were custom column/row header renderers, or in the case of frozen cols/rows.

The code in this PR adds some logic to Table2 and TableQuadrantStack to keep track of when the ColumnHeader and RowHeader components are fully mounted, after which we trigger a resync of the quadrant views with updated width/height measurements of the header areas. This fixes a few bugs.

Bug 1

Initial display of frozen cols/rows was wrong on initial render (before):

Screen Shot 2022-02-25 at 10 17 39 AM

After:

Screen Shot 2022-02-25 at 10 17 43 AM

Bug 2

Initial display of column headers with heights exceeding the minimum/default column header height was wrong on initial render(before):

Screen Shot 2022-02-25 at 10 17 56 AM

After:

Screen Shot 2022-02-25 at 11 20 12 AM

@blueprint-bot
Copy link

fix tests

Previews: documentation | landing | table | modern colors demo

@blueprint-bot
Copy link

fix formatting

Previews: documentation | landing | table | modern colors demo

@adidahiya adidahiya changed the title [v4] [table] fix layout issues measuring headers on initial mount [v4] [table] fix layout measuring headers on initial mount Feb 25, 2022
@adidahiya adidahiya merged commit f3f6d4e into next Feb 25, 2022
@adidahiya adidahiya deleted the ad/v4-fix-table-ref-measure branch February 25, 2022 17:00
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