Is this possible to dynamically increase table height, based on the browser window height, when using the virtualized react-table (example that I'm working with) ?
There's lots of empty space in my browser that I wish it'll fill up, yet I don't wish the table to overflow my screen, only to go up to the end of it (with a scrollbar allowing access to the remaining rows, if any).
I tried to use this flex box css code, but it didn't do anything. Note that I've successfully used this css code for a different component and it worked.
.flexbox-container {
display: flex;
height: 100vh;
flex-direction: column;
}
.test1 {
display: flex;
flex-grow: 1;
}
I can see that the react-table example relies on FixedSizeList which seems to fix the height, which perhaps is disabling the flex box? I've tried to remove all the optional props but it didn't work.
<FixedSizeList
height={800}
itemCount={rows.length}
itemSize={35}
width={totalColumnsWidth+scrollBarSize}
>
{RenderRow}
</FixedSizeList>
