React Table use分页未应用分页

Question

Codesandbox示例：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。

未在此应用分页的原因是什么？

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

Answer 1

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

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

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

希望它会帮助您。

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