MIU Pagination - Set number of rows per page-CodePudding

How do I change the default rows per page (5) using the standard MIU Pagination from import Pagination from '@mui/material/Pagination';? I want to show 10 rows per page but looking through the documentation I couldn't find a prop to handle this.

      <Pagination
        count={props.totalPages}
        page={props.pageNo}
        onChange={props.handleClick}
      />

CodePudding user response：

It is mentioned in the docs, if you need further help, please don't hesitate to ask

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

CodePudding user response：

You can use siblingCount:

const {
  Container,
  Pagination,
} = MaterialUI;

function App() {
  return (
    <Container maxWidth="sm">
      <Pagination count={11} defaultPage={6} siblingCount={5} />
    </Container>
  );
}


const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);

<script type="text/javascript" src="//unpkg.com/react/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons" />

<div id="app"></div>

Make sure you use a number that is about half of what you want. For instance, if you want 10 bullets, siblingCount={5} will display at most 11 bullets (5 siblings before, 1 for the current page, 5 siblings after).