ReactTable: changing pageSize based on container height #552

Question

I've accomplished to change the pageSize based on my live resizable container: It works well until I change page.

Once I change page, if I reduce the height of the container, the height of the table can't go lower then the height when I changed the page.

In other words when I change the page (from page 1 to page 2 for example), let's say the height is 360px with ~12 rows, if I go higher the 360px rows are "added" smoothly, but when I go under 360px, the height of the table doesn't change anymore.

NOTE: before changing the page everything works smoothly.

export default class Table extends React.Component {

  constructor() {
    ...
  }

  componentWillReceiveProps(newProps) {
    if (this.props.y != newProps.y) {
      // size row
      let rowHeight = 32.88;
      // size resizable panel
      let panelHeight = newProps.y;
      // size of the extra y of the table (header + footer)
      let extraTable = 27 + (this.props.x < 650 ? 75 : 45);
      // setting pageSize of the table
      this.setState({pageSize: parseInt((panelHeight - extraTable) / rowHeight)});
    }
  }

  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        pageSize={this.state.pageSize} 
      />
    )
  }
}

On Github it's been told me that this is an implementation issue but I feel like it can be a work around. Does anybody have an idea how to do this?

score 8 · Accepted Answer · answered Oct 16 '17 at 16:20

Solved by using the defaultPageSize instead of pageSize, and changing the key of the component to force re-render (based on the pageSize itself):

render() {
    return (
      <ReactTable
        key={this.state.pageSize}
        data={this.data}
        columns={this.columns}
        defaultPageSize={this.state.pageSize} 
        showPageSizeOptions={false}
      />
    )
  }

ReactTable: changing pageSize based on container height #552

1 Answers1