Set Per Page in React Data Table with Custom Pagination Component

Question

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

score 1 · Answer 1 · answered Nov 03 '22 at 05:28

1

pass the prop paginationRowsPerPageOptions={[2,4,8,12,15]}

answered Nov 03 '22 at 05:28

Hadi

66
5

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Nov 03 '22 at 08:30

score 1 · Accepted Answer · answered Feb 23 '23 at 08:10

I needed the same thing as you paginationRowsPerPageOptions property to have custom component for this element. This is how I solved the issue:

import * as React from "react";
import {
  PaginationComponentProps as DataTablePaginationComponentProps
} from "react-data-table-component/dist/src/DataTable/types";
import {useTranslation} from "react-i18next";

// Inheritance is required from API
interface TablePaginationProps extends DataTablePaginationComponentProps {
  paginationRowsPerPageOptions?: number[];
}

export default function TablePagination({
                                          currentPage,
                                          rowCount,
                                          onChangePage,
                                          paginationRowsPerPageOptions,
                                          rowsPerPage,
                                          onChangeRowsPerPage
                                        }: TablePaginationProps) {
  const {t} = useTranslation();

  return <div className={"d-flex mt-2 justify-content-end align-items-baseline"}>
    <div className={"me-3"}>
      // ... component
    </div>
      // ... component
    <div className={'ms-3 border'}>
      // ... component that uses paginationRowsPerPageOptions
    </div>
  </div>
}

Documentation from API component is located here https://react-data-table-component.netlify.app/?path=/docs/api-props--page
And you can take a look at the actual implementation of the library for its own pagination component https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/Pagination.tsx

I hope you got your answer

Set Per Page in React Data Table with Custom Pagination Component

2 Answers2