0

I have <Column /> with width attr. How I can make last column width equal to all available width (I mean all other free space in block)? Try to set minWidth, but width required...

If I set big amount of width, my other columns on small screen reduce.

Max P
  • 1,439
  • 3
  • 15
  • 33

1 Answers1

2

Check out the Column docs. The relevant ones are:

flexGrow    Number  Flex grow style; defaults to 0
flexShrink  Number  Flex shrink style; defaults to 1
maxWidth    Number  Maximum width of column; this property will only be used if :flexGrow is greater than 0
minWidth    Number  Minimum width of column
width       Number  Flex basis (width) for this column; This value can grow or shrink based on flexGrow and flexShrink properties

In this case, I believe you just need to add flexGrow={1} to your last column. Table uses flex box layout.

FWIW this is also how the react-virtualized Table demo works. You can see its source code here.

bvaughn
  • 13,300
  • 45
  • 46