How to fix pagination reset issue in react-table?

Question

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 e.g. current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Eel

Was this issue solved? – Hummel

Answer 1

Set autoResetPage: false https://react-table.tanstack.com/docs/api/usePagination#table-options

its gonna avoid rendering all the time.

Chuvash

Thank you for this. It's a hard bit of info to find. – Stilbestrol

Answer 2

I had the same issue in my react table, in the solution for that, in the componentWillReceiveProps method I update the page props of the react-table and set it to the "0" when react-table gets new filtered data (Props changed ), its work for me fine, so in your code just set page props as 0 when your table get new data from the parent

componentWillReceiveProps(nextProps: Readonly<IProps>): void {

    if (nextProps.properties !== this.props.properties && nextProps.properties.length > 0) {
        this.setState({
            selectedPageNumber : 0
        })
    }
}

Vagina

Answer 3

Setting autoResetPageIndex: false will prevent pagination from resetting whenever the given data changes. Then you can use the code snippet below to automatically reset navigation anytime the page index is left on an empty page.

//Evaluate if Pagination needs to be reset.
if (table.getRowModel().rows.length == 0 && table.getRowCount() != 0) {
    table.firstPage();
}

Saez

Answer 4

This issue could be solved by the hacky solution found here: TroyWolf's solution. And read the whole post there - it may be that your current case is in another comment. If the post will be removed somehow I post it here:

store a reference to the ReactTable's instance. It works to directly update myReactTableInstance.state.page = 0

Beestings

Answer 5

With similar use cases, I have found its best to use once's own controlled page state for index, as mentioned here:

Check here as mentioned in the docs

It becomes simpler to handle the page reset actions on custom filtering/custom sorting, and trigger accordingly

Noonberg

Answer 6

I am using react table's out of the box pagination and the issue I had was how to extract the current pageIndex from react table. Because every time there was an action on the row of React table, that did not alter the no. of rows, the React table would go back to page 0.

Following worked for me, hacky but works -

On parent component calling React table - signalTableData is where I have my data for columns and datarows. this could be your data.

const [pageIndex, setPageIndex] = useState(0);

<ReactTable
     columns={signalTableData ? signalTableData.headerRow : <div>Loading...</div>}
                  data={signalTableData.dataRows ? signalTableData.dataRows : <div>Loading...</div>}
                  sortbyCollumn='originDate'
                  desc={true}
                  pageIndex = {pageIndex}
                  setPageIndex = {setPageIndex}
              />

One React Table js -

function Table({ columns, data, sortbyCollumn, desc, pageIndex, setPageIndex }) {...

and

useTable(
    {
      columns,
      data,
      defaultColumn, // Be sure to pass the defaultColumn option
      filterTypes,
      autoResetPage: false,
      initialState: {
        pageSize: 5,
        pageIndex: pageIndex,
        sortBy: [
          {
            id: sortbyCollumn,
            desc: desc
          }
        ] },
    },

Greenleaf