Pagination - change number of visible page on screen

[Tamir198]

Summary

I want to have a pagination that will only display 3 pages on the screen like this :

< ... 3 2 1>
< 9 8 7 ...>
< ... 6 5 4 ...> 

Examples

I tried to have an example like this :

<Pagination siblingCount={0} boundaryCount={1} count={10}/>

This is what I see :

is it possible to have a pagination with only 3 pages visible?

Motivation

No response

Search keywords: pagination override

[siriwatknp]

You can try to use renderItem with <PaginationItem />:

<Pagination siblingCount={0} boundaryCount={1} count={10} renderItem={item => {
  if (…condition that you don't want to show) {
    return null;
  }
  return <PaginationItem {...item} />
}} />

https://mui.com/material-ui/react-pagination/#custom-icons

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Tamir198 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[siriwatknp]

Or using this:

<Pagination count={9} defaultPage={6} boundaryCount={0} />

See https://mui.com/material-ui/react-pagination/#pagination-ranges