1

I am using React-Virtualized to display a table with a long list of values. So it's a combination of WindowScroller, AutoSizer and Table. I am having an issue when the browser is resized. This is my code:

  render() {
    return (
        <WindowScroller>
            {({ height, isScrolling, scrollTop }) => (
                <AutoSizer>
                    {({ width }) => (
                        <Table
                            ref={(ref: Table) => { this.TableRef = ref; }}
                            autoHeight={true}
                            height={height}
                            width={width}
                            isScrolling={isScrolling}
                            scrollTop={scrollTop}
                            _noRowsRenderer={this._noRowsRenderer}
                           ...
                            >
                            <Column
                                ...
                            />
                        </Table>
                    )}
                </AutoSizer>)}
        </WindowScroller>
    );
}

When the browser is resized the width of the table is not updated accordingly and so a vertical scroll bar is being displayed although it's not needed; unless it's zoom-in or zoom-out and then it's all redrawn-positioned correctly. Does anyone has any idea how to fix this?

AziiiRa
  • 11
  • 1
  • 2
  • Sounds like it probably has something to do with the styles of one of the parent elements on the page. I would suggest checking out this doc page (https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md) and if it doesn't work, post back with a repro. – bvaughn Sep 21 '17 at 22:36
  • @brianvaughn: Tnx for your reply. Actually I have set the flex-grow and flex-shrink to be 0 for all columns except the last one which has flex-shrink:0 and flex-grow:1.The reason is that if I don't set this values the header columns and respected tables values are not aligned and for last column I wanted to use the remaining available space. So when we maximize it can simply grow, while when we minimize as flex-shrink is 0, it cannot resize and the size assigned to container remain the same and that's why the scroll is not disappeared. what else can be done? what would be your suggestion? – AziiiRa Sep 21 '17 at 23:46

0 Answers0