React Table default pagination page

Murakami picture Murakami · Jun 12, 2018 · Viewed 11k times · Source

I'm new to react-table. Is it possible to set default page in the pagination mode. Is there a certain prop to handle this? F.ex. after my component mounts I'd like to have my table opened on 5th page. Thank you!

Answer

Richard Stoeffel picture Richard Stoeffel · Oct 24, 2018

You probably already discovered this, but to expand on hariharan's answer, you can use the state of a component to control a lot of the props of the table. For the page, you can tell the component that the page is found in the state,

<ReactTable
    ...otherProps
    page={this.state.page}
  />

And when you initialize your state, however you initialize it, have page equal to 5. For example,

class MyClassThatHasReactTableInIt extends Component {
  constructor (props) {
    super(props);
    this.state = {
      page: 5
  }
... // etc code etc

If you do this, you also need to handle the page changing yourself though. luckily, react-table makes this very easy, you can write your custom pageChange handler:

    <ReactTable
    ...otherProps
    page={this.state.page}
    onPageChange={page => this.setState({page})}
  />