Is it possible to pass pageshowtotal's data to an outter component?

[thundermiracle]

Thanks for creating this amazing library!
I created my own component to show page infos.
Is there an example to show how to pass (from, to, total) to the outter component?

[my Page infos component]
[react-bootstrap-datatable]

I've tried the following method but it seems deadlock occurred for endless re-rendering.

paginationShowsTotal = (from, to, total) => {
    this.setState({message: `Total(${total}) ${from}-${to}`});
    return null;
}

<div>
<div>
  {this.state.message}
</div>
<BootstrapTable options={{paginationShowsTotal: (from, to, total) => this.paginationShowsTotal(from, to, total)}}>
</div>

error:
warning.js?554bc8e:36 Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

[AllenFang]

yes, because paginationShowsTotal will be called when render the pagination part, so if you call setState in this function will trigger another render again.

Please take following example, it's just a roughly answer,

main.js

paginationShowsTotal = (from, to, total) => {
    this.refs.pageInfo.update(from, to, total);
    return null;
}
render() {
    const options = {
        paginationShowsTotal: this.paginationShowsTotal
    };
    return (
    <div>
        <PaginationInfo ref='pageInfo'/>
        <BootstrapTable options={options}/>
    </div>
    );
}

The other solution is you can options.onPageChange.
when page when, you calculate the from and to and call setState but you need to wrap BootstrapTable into a custom Component and use shouldComponentUpdate to avoid rerender.

Please let me know if you still have any questions Thanks

[thundermiracle]

Thank you very much for your reply.
I tried the first solution but cannot find out how to set the PaginationInfo at the first time.
The paginationShowsTotal function will be called twice before datatable is rendered when this.refs.pageInfo is still null.

And about the second solution. onPageChange will only be triggered after clicking the pagition.
At the first time, How can I get the (from, to, total) from datatable?

[AllenFang]

@thundermiracle, nice question about the first time load, I'll consider to implement a componentDidMount-like function on BootstrapTable to let you get some useful information, not only pagination information but also other important data, thanks