ReactTable：コンテナの高さに基づいてpageSizeを変更する＃552

Question

私のライブサイズ変更可能なコンテナに基づいてpageSizeを変更することができました。

ページを変更すると、コンテナの高さを低くすると、ページを変更したときにテーブルの高さが高さを下げることができなくなります。

つまり、たとえば1ページから2ページにページを変更すると、高さが〜12行の360ピクセルであるとします。高くなると360ピクセルの行がスムーズに「追加」されますが、 360px未満になると、テーブルの高さはそれ以上変わりません。

注：ページを変更する前に、すべてがスムーズに機能します。

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} 
     /> 
    ) 
    } 
} 

はGithubの上では、これは実装の問題であることを私に言われていますが、それは周りに仕事をすることができような気がします。誰にどのようにこれを行うアイデアを持っていますか？

Answer 1

defaultPageSizeを使用して代わりにpageSizeを、及び再描画強制する成分のキーを変更することによって解決（pageSizeを自体に基づく）：

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