反应表usePagination不应用分页

Question

代码沙盒示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

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

我有一张显示一些发票的表格。

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

我的数据中有 139 项。

用户最初会看到 10 个结果并能够“显示更多”。目前这是在一个选择字段中实现的，它更新了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 个。

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

代码沙盒示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

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

来自原始数据数组的具体化行对象数组和传递到表选项的列

您应该使用的是page，如usePagination docs 中所述：

当前页面的行数组，由当前的pageIndex 值确定。

Here is a fork of your codesandbox 已实施此更改。您迭代“行”元素的所有地方都已更改为迭代“页面”，并且它按预期工作。

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

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

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

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

希望对你有所帮助。