React Table usePagination 不应用分页

Question

Codesandbox 示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我正在使用 react-table 包（版本 7.1.0）。

我有一个 table 显示了一些发票。

我在初始加载时检索了所有数据。然后我想对这些数据应用客户端分页，以便在任何时候只显示部分结果。

我的数据中有 139 项。

用户最初会看到 10 个结果，并且能够 'Show More'。目前这是在 select 字段中实现的，该字段更新 pageSize

（在我的示例中，我使用的是并非来自任何端点的虚假数据。）

我使用 usePagination 钩子的方式与这个官方示例相同：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
  );

但是一定有一些我遗漏的东西，因为分页没有得到应用，尽管 pageIndex 和 pageSize 已经明确设置。

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

一次显示所有结果，而不是只有 10 个。

这里没有应用分页是什么原因？

Codesandbox 示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

您应该尝试使用这些代码行，

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

它会在 table 中只显示 10 行，稍后您可以更改页面大小并从 pageSizeOptions 中选择一个。 showPaginationBottom={true} 这将有助于在 table 末尾显示分页框。

希望对您有所帮助。

Answer 2

也许你可以试试这个:

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

Answer 3

您在 table.jsx 中迭代 rows，这与您的预期结果相反。 rows 是数据持有的所有行的列表，如 in the API docs:

所述

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

您应该使用 page，如 usePagination docs:

中所述

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

Here is a fork of your codesandbox 已实施此更改。您在 'rows' 的元素上迭代的所有地方都已更改为在 'page' 上迭代，并且它按预期工作。

React Table usePagination 不应用分页

React Table usePagination not applying pagination

javascript

pagination

reactjs

react-table