小编Kat*_*ar6的帖子

使用自定义分页组件在 React 数据表中设置每页

我需要在我的反应数据表中设置每页值,默认情况下数据表自动管理该值,但我使用 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()}
/>
Run Code Online (Sandbox Code Playgroud)

自定义分页:

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 …
Run Code Online (Sandbox Code Playgroud)

reactjs react-redux react-data-table-component

9
推荐指数
1
解决办法
1万
查看次数