I'm currently using React-Table and it's working great.

I want to have a dynamic pageSize according to the data filtered in the table.

<ReactTable
    ...
    filtered={[{
             "id": "stage",
             "value": 1
           }]}

    getTdProps={(state, rowInfo, column, instance) => {
        return {
            onClick: () =>
                this.setState({
                  preliminary:state.sortedData.length
                })
            };
        }}
    pageSize={this.state.preliminary}
/>

And my state in the constructor

this.state = {
    preliminary: 10
};

This works great when clicking because of the onClick() event. I want it to fire onLoad() of the page. Changing onClick() to onLoad() doesn't do anything.

Any help appreciated!

I'm currently using React-Table and it's working great.

I want to have a dynamic pageSize according to the data filtered in the table.

<ReactTable
    ...
    filtered={[{
             "id": "stage",
             "value": 1
           }]}

    getTdProps={(state, rowInfo, column, instance) => {
        return {
            onClick: () =>
                this.setState({
                  preliminary:state.sortedData.length
                })
            };
        }}
    pageSize={this.state.preliminary}
/>

And my state in the constructor

this.state = {
    preliminary: 10
};

This works great when clicking because of the onClick() event. I want it to fire onLoad() of the page. Changing onClick() to onLoad() doesn't do anything.

Any help appreciated!

• javascript
• reactjs
• react-table

• When the ponent loads, where does the filtered data e from? Async request in ponentDidMount? – Brett DeWoody Commented Dec 19, 2017 at 16:24
• manually from filtered={[{ "id": "stage", "value": 1 }]} in the <ReactTable ponent – Yan Commented Dec 19, 2017 at 16:25

2 Answers 2

Adding an onLoad event to the getTdProps() method doesn't make much sense because td elements don't have an onload event.

Sounds like you'll want to make use of onFilteredChange to update this.state.preliminary to a new value, which will update the pageSize prop of the <ReactTable /> ponent.

Here's a simplified example. The table starts with a pageSize of 5. Inserting a filter of any kind into either column will change the pageSize to 10. This uses the onFilteredChanged prop. I imagine you would want to include some logic in the handleFilterChange function to set the pageSize to an appropriate value however.

class MyTable extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      pageSize: 5,
      filter: false
    }
  }
  
  handleFilterChange = (column, value) => {
    this.setState({
      pageSize: 10
    })
  }

  render() {
    const data = [{
      name: 'Tanner Linsley',
      age: 26
    },
    {
      name: 'Brett DeWoody',
      age: 38
    },
    {
      name: 'Santa Clause',
      age: 564
    }]

    const columns = [{
        Header: 'Name',
        accessor: 'name' // String-based value accessors!
      }, {
        Header: 'Age',
        accessor: 'age',
        Cell: props => <span className = 'number'> {
          props.value
        } </span> 
      }]

      return (
         <div>
         <ReactTable.default 
           data={data} 
           columns={columns} 
           filterable={true}
           onFilteredChange={this.handleFilterChange}
           pageSize={this.state.pageSize} />
         </div>
      )
  }
}

ReactDOM.render(<MyTable /> , document.getElementById("app"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-table/6.7.5/react-table.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/react-table/6.7.5/react-table.css" rel="stylesheet" />

<div id="app"></div>

Following @Brett DeWoody advice, the solution was to find the length of the filtered data

For that, I used lodash

pageSize={_.filter(data.items, { 'stage': 1, 'status': 1 }).length}

Thanks!