CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
merlin
merlin

Reputation: 307

MUI Pagination Dynamic count

I am using mui react for my project.

In the Pagination component, I am supposed to provide the count to show the total number of pages.

In this instance, I have 27 total products, and I'm supposed to have 2 pages since each page contains 20 products. This is what i get.

enter image description here

How do i make it integers.

<Pagination
                count={
                  productsCount % 20 === 0
                    ? productsCount / 20
                    : productsCount / 20 + 1
                }
                page={page}
                onChange={handlePageChange}
                color='primary'
                variant='outlined'
              />

Upvotes: 0

Views: 2335

Answers (1)

Akis
Akis

Reputation: 2252

What you are looking for is this to have round up numbers for the pagination. Let me know if it helps.

<Pagination
                count={Math.ceil(productsCount / 20)}
                page={page}
                onChange={handlePageChange}
                color='primary'
                variant='outlined'
              />

Here is a codesandbox with a working example including an example with a higher number of products.

Upvotes: 1

Related Questions