react-virtualized [Suggestion] ability to set the Column's width prop to "auto" or "content"

I am using the Table component with two columns. Right now the width prop of the Column component appears to be mapped to the css flex-basis property so it basically sets the initial width of the column which can change depending on the flexGrow and flexShrink.

I wish I could use auto or content for the width prop of the Column component and not only number values since these are valid values for the flex-basis property.

In my case, I want the left column to grow as much as possible without overlapping the right column which default size I cannot guess since it depends on localized text.

Setting the flex-basis property to auto gives me the exact behavior I want but since the width's prop must be a number there's no way I can set it without this ugly css:

.myColumn{
   flex-basis: auto !important;
}

Suggestion: accept 'auto' and 'content' as well as numbers for the Column's width prop.

Example:

<Table>
....
    <Column
    dataKey="name"
    label="Name"
    cellRenderer={this.nameRenderer}
    width="auto"
    flexGrow={1}
    />
...
</Table>

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?


Browser	Chrome 72
OS	macOS mojave
React	16.5.2
React DOM	16.5.2
react-virtualized	9.21.0

Jan 31 '19 13:01 warpdesign

@warpdesign - were you able to find a workaround? I kinda don't think width and height should be required? I think it should just default to a 100% width and height? then if the width/height of any prop is provided it should override...

Feb 26 '19 16:02 mdere-unbound

@mdere-unbound I ended up using the ugly CSS hack I suggested:

I set a random width to the column
I override it using flex-basis: auto !important

Feb 26 '19 23:02 warpdesign

Having this width required is a pain.

First, it works without this attribute just fine. Yeah, it complains in the console that width is required but missed, but it's not creating the flex style property on the element, which is good, because in this case, it's gonna be: 0 1 auto. (UPDATE 1: Btw, I don't know why it doesn't create flex with the value it receives from Table._getFlexStyleForColumn() which is 0 1 undefinedpx, but it should eh? UPDATE2: Ok, it's now clear who is dropping the wrong values - the browser itself, see this example and check out the DOM tree with the flex style property missed completely.)

Second, why should we think about width all the time after all? It's a table, it grows usually whatever it wants, and that's exactly what we expect from it most of time.

So my propositions:

remove isRequired from props
allow user to provide the full range of flex-basis values

Dec 27 '19 07:12 OnkelTem

/summon @bvaughn

Brian, would you have a look at this? Thanks.

Dec 27 '19 07:12 OnkelTem

Check out the PR please.

removes required from Column's width and assigns auto to flex-basis by default;
allows to use any string and number value for Column's width.

Dec 27 '19 09:12 OnkelTem

It's 2021, is this something that will be added? This would be very nice to have.