Table height only updates on window resize

[kevinleclair1]

Hey, thanks for making this plugin! I just had one issue so far. I'm making a table where you can click on rows to show 'sub-rows'. To do this I have to change the number of rows that are being rendered in the table quite often.

I've noticed that the table will only change it's height on window resize regardless of any new height that I pass to the parent container.

Could a feature be added so the table's height changes if the parent container's height changes as well?

[vaiRk]

Good one, is something I've thought about but never got to do.
Maybe we can add a small animation and listen for the transitionEnd event to know when dimensions have changed?

I don't have much time to look into it right now, but I'd gladly accept a pull request if anyone can look into it :)

[kevinleclair1]

I could take a look! I was thinking something even more simple like using the componentWillUpdate to check for differences in height/width props, and then set the state if they change.

For anyone looking for a quick fix in the meantime, I came up with this to go on the wrapping component

componentWillUpdate(nextProps, nextState) {
        if (this.props.rows.length !== nextProps.rows.length){
            window.dispatchEvent(new Event('resize'));
        }
    }

Not the greatest solution, but essentially when the props of the parent container change one can manually trigger a resize event to get the new height for the table. This probably won't be applicable in all situations, but it works for me.

[vaiRk]

Ok, what if we make possible to override the container's width and height? that way if needed, whatever owns the component can make calculations and pass down dimensions.

That, or passing an updater function.

[kevinleclair1]

Sorry the late reply, also been busy. Overriding the container's width and height would work quite well, and would be a pretty simple change to your codebase. Instead of explicitly saying the width and height are 100% in the _getStyle method just create a check against the props for a value and have 100% as the default

[praveenaj]

Came across the same issue. I had to set the wrapper width due to #17 so whenever new rows are added I update the height of both the wrapper and table. But only the wrapper height changes and table remains unchanged.

I have implemented @kevinleclair1's fix for now until a good solution is proposed. Passing height via containerStyle also didn't work for me.

<ResponsiveFixedDataTable
              rowHeight={ROW_HEIGHT}
              rowsCount={rows.length}
              containerStyle={{height:tableHeight}}
              height={tableHeight}
              headerHeight={HEADER_HEIGHT}
              footerHeight={ROW_HEIGHT}>
...