React-table: Page Index Resets?

[jhrams]

When I am handling server-side data and moving from page 1 to page 2, the page index resets to 1 every time. Any ideas why this could happen?

[tannerlinsley]

When using server-side data, there is only one page of data present in the table at a time. You must set the page prop to the page index you are displaying.

[jhrams]

Is there a reason why page does not need to be displayed in the detailed Server-Side Data Example? There is a pages, but not a page.

[tannerlinsley]

In the example, there is no page prop, which means react-table will manage the state for the current page internally. When the Next button is clicked for example, the internal page index is incremented, then onFetchData is called with the new state. pages is something that cannot be managed internally by react-table, since it is information only the server knows about (since you are only displaying one page of data at a time). For this reason, you can optionally return a pages number to let react-table know how many pages are on the server for the given query.

[jhrams]

I am still a bit confused. Initially, I set the page to 0. When I fetch the data, I set a store value for page to be the new index. However, it doesn't seem to change. Am I doing something wrong here?

<ReactTable ... pages={ store.getState().pages } page={ store.getState().page } manual onFetchData={(state, instance) => { DocumentActions.fetchDocs(state.pageSize, state.page, state.sorted, state.filtered); }}

[tannerlinsley]

If you are using the page prop, then you would also need to use the onPageChange prop. Otherwise the page would always equal store.getState().page

...
page={store.getState().page}
onPageChange={newPage => DocumentActions.setPage(newPage)}
...

[kwallace50]

In following the example given above I'm running into the same issues, there seems to be a bit of a race condition when storing the page value in React setState.

...
page={this.state.page}
onPageChange={pageIndex => this.setState({page: pageIndex})}
onFetchData={(state, instance) => {getData(state.pageSize, state.page)}}
...

When onFetchData gets call, setState has not finished updating the this.state.page value yet. Any ideas on what's going on?

[sonlexqt]

I'm having the same issue, hopefully this ticket will be re-opened

[elcolie]

@kwallace50 I got the same problem. So the pageIndex got reset back to first value again and again. When I tried to set the value it will recursively change the state.

Any update on this?

[risaac]

I'm having the same issue, any help will be much appreciated.

[maxtotheguenther]

Me as well. someone could bypass the problem?

[elcolie]

@maxtotheguenther The widget itself is designed to do eager load. If you are going to do server pagination, you'd better hack a bit. Please let me know that you have a PR on this. For I myself I bypass by do eager load.

[JoshMcCullough]

So is this not fixed, then? But it's closed...

[JoshMcCullough]

If we are storing page/sort/etc. params in URL, and a user browses back (via the browser's back button) to our page with page=1 in the querystring, is there no way to properly pass this value to react-table in a way that will work correctly?

Currently when we pull page=1 from the querystring, pass it through to react-table and set it as page={page}, it still immediately fires off onFetchData with state.page set to 0. So we immediately query page 0's data (which we don't need), and then clobber the page value in the querystring since we're relying on react-table to be the source of truth for paging and sort parameters.

So it seems that react-table fires onFetchData before its state has even been initially set. Any ideas?

[qingmulanyun]

Any update on this issue?

[qingmulanyun]

To people who's using useTable hook, when using server-side data,You must set the pageIndex of initialState to the page index you are displaying.
Since pageIndex will be default as 0 if you don't set it. Every time you query data from server side it will rerender whole table page with new data and

initialState: {
        pageIndex: #pageIndex,
        pageSize: #pageSize,
      },

So if you don't set that pageIndex a dynamic value, it will rerender to its default value 0.

All overall, something like this:

= useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: controlledPageIndex,
        pageSize: 50,
      },
      manualPagination: true,
      pageCount: controlledPageCount,
    },
    usePagination
  )

controlledPageIndex is a prop from parent component.

[GnaneshKunal]

Adding to the above comment, we should also set autoResetPage to false in order to prevent the table getting reset after the data has changed.

= useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: controlledPageIndex,
        pageSize: 50,
      },
      manualPagination: true,
      pageCount: controlledPageCount,
+     autoResetPage: false,
    },
    usePagination
  )