Set Per Page in React Data Table with Custom Pagination Component

Viewed 3728

I need to set the Per page value in my react data table, by default the data table manage this value automatically, but I'm using React Paginate as a custom pagination component, and it only manages the pages.

How can I change this value without remove the React Paginate?

Data Table:

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

CustomPagination:

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>
  )
}
0 Answers
Related