React Table default pagination page

Question

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!

score 7 · Accepted Answer · answered Oct 24 '18 at 18:41

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

score 0 · Answer 2 · answered Jun 12 '18 at 07:34

0

just add page prop in <ReactTable /> component

  <ReactTable
    ...otherProps
    page={5}
  />

Just change 5 to the page number that you want.

answered Jun 12 '18 at 07:34

Hariharan L

1,291
1
11
17

if you just add page number. pagination will not work. this needs to be handled. – Naresh Thakur Oct 24 '18 at 02:09
@thakurinbox But he asked to display the nth page in the initial render. handling page change was not in the scope of the question – Hariharan L Oct 24 '18 at 10:13

React Table default pagination page

2 Answers2

Linked