Cherrypick: DetailsList proportional columns + custom header (#16874) #17965
Conversation
* Allows DetailsList to render custom content in header cells, and makes columns respect proportional dimensions. They size to at least minWidth, then expand according to available space and their relative proportions.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 159bf25:
|
Asset size changes
Baseline commit: ac2f319d76db747f0d0b1d76cbf4d63ae8864794 (build) |
Perf AnalysisNo significant results to display. All results
|
joshualamusga1
force-pushed
the
cherry-pick-7d2a0ee3af7ab8a13f4cf007bfed6aeebde35b23
branch
from
a825aea to
159bf25
Compare
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
joshualamusga1
deleted the
cherry-pick-7d2a0ee3af7ab8a13f4cf007bfed6aeebde35b23
branch
6 participants
Cherrypicking this PR to version 7. Necessary to complete an a11y scenario. Original PR description below.
Pull request checklist
$ yarn changeDescription of changes
Adds proportional columns in DetailsList. They skip initial layout, so cannot be used with skipViewportMeasures. Here's how it works:
This also allows rendering custom column header content in place of normal text. This only affects the text, so you can still have a sort icon, the bar that appears between columns when moving them will still show up, etc. There was previously no decent way of changing the header content for a DetailsList column header.
Both of these changes are required by my team's design. Topic opened earlier today at #16872
Example of proportional columns with spacing of 1, 1, 2:
Example with proportional spacing of 1 and 2 with a non-proportional middle column of minWidth 100:
Example of button rendered in custom header:
Focus areas to test
DetailsList