DetailsList columns to fit window, but also resizable?

[jillianpenfield]

Hi all -

I'm sure people have accomplished this before and I'm struggling to figure out the simplest workaround for this. I'd like to create a DetailsList that on initial window load, adjusts columns to fill the width of the window/allotted table space so there's no extra space to the right. But, I would also like to be able to resize all columns.

Based on the documentation, it seems simple enough to just set layoutMode to justified and each column to have min/max widths. However, I'm not seeing justified columns or the ability to resize them with this route.

Seems like my best route is to set layoutMode=fixedColumns and constrainMode=unconstrained, then use some useRender with styling to ensure rows fill the full width of the window.

Any ideas or has anyone accomplished something similar?

[jillianpenfield]

Quick bump on this - I was able to get columns to fill the width of the screen, turns out it was an issue with the component parent. However, I'm seeing the first column as huge compared to the rest, and based on browsing Github issues this is expected. Does anyone have any workarounds at least?

[jillianpenfield]

Bump

[jillianpenfield]

Was able to use a workaround based on issue: #18425

Used layoutMode={DetailsListLayoutMode.fixedColumns} on the DetailsList, then set a flexGrow on every column to 1 which proportionately made them take up even spacing.

FluentUI documentation lists a good description of flexGrow as well to give columns different proportions:
"If specified, the width of the column is a portion of the available space equal to this value divided by the sum of all proportional column widths in the list. For example, if there is a list with two proportional columns that have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (3/4) = 75% of the remaining space."
(https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist#DetailsListLayoutMode)