Material UI pagination component initial view of number override the default

user_6159441 0
Viewed 1727

In the Material UI the pagination component is shown below.

  <Pagination count={10} />

Material Ui Pagination

Here the pagination starts from 1 and first view ends at 5, I need to show 1 to 4 as shown below

I tried using the siblingCount and boundaryCount, but that didn't work. Is there way or am I missing something in the above prop.

Limit till 4

material-ui reactjs
1 Answers

There is not currently a way to do this.

This is controlled by the following block of code (from https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui-lab/src/Pagination/usePagination.js#L57):

  const siblingsEnd = Math.min(
    Math.max(
      // Natural end
      page + siblingCount,
      // Upper boundary when page is low
      boundaryCount + siblingCount * 2 + 2,
    ),
    // Less than endPages
    endPages[0] - 2,
  );

When page, boundaryCount, and siblingCount are all 1, siblingsEnd will be 5 (because of boundaryCount + siblingCount * 2 + 2). If you use a siblingCount of 0, you get a siblingsEnd of 3, but this causes it to behave in a way that doesn't look as nice when you start progressing to later pages. There isn't a way currently to have the first block of numbers end at 4 when page is 1.

user_74959300
Related