0

我需要在我的 react 数据表中设置 Per page 值，默认情况下数据表会自动管理该值，但我使用 React Paginate 作为自定义分页组件，它只管理页面。

如何在不删除 React Paginate 的情况下更改此值？

数据表：

<DataTable
    noHeader
    pagination
    paginationComponent={CustomPagination}
    paginationPerPage={store.perPage}
    paginationRowsPerPageOptions={[10, 25, 50, 100]}
    className={dataTableStyles}
    columns={columns}
    noDataComponent={<img src={EmptyState}/>}
    progressPending={spinner}
    paginationDefaultPage={currentPage}
    progressComponent={<Spinner color="primary" size="md" className="justify-self-center align-self-center"/>}
    conditionalRowStyles={customDisabledStyle ? customDisabledStyle : disabledStyle}
    sortIcon={<ChevronDown size={10} />}
    data={dataToRender()}
/>

自定义分页：

const CustomPagination = (e) => {
  const count = Number((store.total / rowsPerPage))
  return (
    <Row className='mx-0'>

      <Col className='d-flex justify-content-start mt-2' sm='6'>
        <p>Mostrando {showingFrom} a {showingTo} de {showingOf} registros {totalRows}</p>
      </Col>

      <Col className='d-flex justify-content-end' sm='6'>
        <ReactPaginate
          previousLabel={''}
          nextLabel={''}
          forcePage={currentPage !== 0 ? currentPage - 1 : 0}
          onPageChange={page => handlePagination(page)}
          pageCount={count || 1}
          breakLabel={'...'}
          pageRangeDisplayed={2}
          marginPagesDisplayed={2}
          activeClassName={'active'}
          pageClassName={'page-item'}
          nextLinkClassName={'page-link'}
          nextClassName={'page-item next'}
          previousClassName={'page-item prev'}
          previousLinkClassName={'page-link'}
          pageLinkClassName={'page-link'}
          breakClassName='page-item'
          breakLinkClassName='page-link'
          containerClassName={'pagination react-paginate pagination-sm justify-content-end pr-1 mt-1'}
        />
      </Col>
    </Row>
  )
}
4

0 回答 0