javascript - React Table usePagination not applying pagination - Stack Overflow

admin管理员组

文章数量:1344531

Codesandbox example:

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 ing from any endpoint.)

I am using the usePagination hook in the same way as in this official example: =/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:

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 ing 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

• javascript
• reactjs
• pagination
• react-table

Share Improve this question Follow asked May 31, 2020 at 11:12 alanbuchananalanbuchanan 4,17388 gold badges4343 silver badges6666 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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.

本文标签： javascriptReact Table usePagination not applying paginationStack Overflow