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