3

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

alanbuchanan
  • 3,993
  • 7
  • 41
  • 64

3 Answers3

9

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.

toki
  • 936
  • 5
  • 18
0

Maybe u can try this out :

function Table({
  columns,
  data,
  updateMyData,

}) {
  const defaultColumn = React.useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: false,
    }),
    []
  )
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    flatColumns,
    prepareRow,
    setColumnOrder,
    state,

    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,

    state: { pageIndex, pageSize },

  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      updateMyData,
      initialState: { pageIndex: 0, pageSize: 10 },
    },
    useColumnOrder,
    usePagination
  )
  const spring = React.useMemo(
    () => ({
      type: 'spring',
      damping: 50,
      stiffness: 100,
    }),
    []
  )
  return (
    <>

      <br></br>
      <div>Showing the {page.length} </div>
      <br></br>
      <div className="pagination" >
        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
          {'<<'}
        </button>{' '}&nbsp;
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          {'<'}
        </button>{' '}&nbsp;
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          {'>'}
        </button>{' '}&nbsp;
        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
          {'>>'}
        </button>{' '}&nbsp;
        <span >
          Page{' '}
          {/* <strong> */}
          {pageIndex + 1} of {pageOptions.length}
          {/* </strong>{' '} */}
        </span>
        <span>
          &nbsp;&nbsp;&nbsp;&nbsp;  Go to page:{' '}
          <input
            type="number"
            defaultValue={pageIndex + 1}
            onChange={e => {
              const page = e.target.value ? Number(e.target.value) - 1 : 1
              gotoPage(page)
            }}
            style={{ width: '100px' }}
          />
        </span>{' '}
        <select
          value={pageSize}
          onChange={e => {
            setPageSize(Number(e.target.value))
          }}
        >
          {[5, 10, 20, 30, 40, 50].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              Show {pageSize}
            </option>
          ))}
        </select>
      </div>
    </>
  )
}
Blessy Julie
  • 899
  • 3
  • 8
  • 19
-1

You should try using these lines of code,

defaultPageSize={10}
pageSizeOptions={[10,20,30,40,50]}
showPaginationBottom={true}

It will show only 10 rows in the table, and later you can change the page size and choose one from pageSizeOptions. showPaginationBottom={true} it will help showing pagination box at the end of the table.

Hope it will help you.

Snehal
  • 121
  • 6