Issue
We need to display fewer pages in the mobile view so that it can align with the heading (My Orders) on the same line.
https://i.sstatic.net/JROvk.png
Resource
Current Progress
I have successfully removed the Next and Previous buttons in the mobile view, but I am struggling to find a pre-built property or CSS solution to reduce the number of pages displayed in the mobile view
Desktop View
https://i.sstatic.net/qtouh.png
Mobile View
https://i.sstatic.net/eA5r2.png
Code Example
CSS Styling
@media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
flex-wrap: nowrap;
li {
&:first-child {
flex-basis: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
> button::before {
margin-right: 10px;
content: "Previous ";
}
}
&:last-child {
flex-basis: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
> button::after {
margin-left: 10px;
margin-right: 20px;
content: " Next";
}
}
}
}
}
Custom Component Implementation
import React, { useState } from "react";
import PropTypes from "prop-types";
import Pagination from '@material-ui/lab/Pagination';
export const CustomPagination = ({ onChange, totalRecords, currentPage, className, shape }) => {
return (
<Pagination
count={totalRecords}
shape={shape}
className={className}
onChange={onChange}
page={currentPage}
/>
)
};
CustomPagination.propTypes = {
paginationLength: PropTypes.number,
selectPage: PropTypes.func,
activePage: PropTypes.number,
};