[v4] [table] fix layout measuring headers on initial mount #5145
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.
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):
After:
Bug 2
Initial display of column headers with heights exceeding the minimum/default column header height was wrong on initial render(before):
After: