React Table usePagination not applying pagination

Question

Codesandbox example: https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

I am using the react-table package (version 7.1.0).

I have a table which shows some invoices.

I retrieve all the data on initial load. Then I want to apply client-side pagination to this data so that only some of the results show at any one time.

My data has 139 items in it.

The user will initially see 10 results and be able to 'Show More'. Currently this is implemented in a select field, which updates the pageSize

(In my example I am using fake data not coming from any endpoint.)

I am using the usePagination hook in the same way as in this official example: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination?file=/src/App.js

useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, pageSize: 10 }
    },
    useSortBy,
    usePagination
  );

However there must be something I am missing, because the pagination doesn't get applied, despite pageIndex and pageSize clearly being set.

  "pageIndex": 0,
  "pageSize": 10,

All the results show at once, instead of only 10.

What is the cause of the pagination not being applied here?

Codesandbox example: https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

You're iterating over rows in table.jsx, which is contrary to your intended result. rows is the list of all rows held by the data, as described in the API docs:

An array of materialized row objects from the original data array and columns passed into the table options

What you should be using is page, as described in the usePagination docs:

An array of rows for the current page, determined by the current pageIndex value.

Here is a fork of your codesandbox with this change implemented. Everywhere you iterated over the elements of 'rows' has been changed to instead iterate over 'page', and it works as expected.