I've been struggling to find a solution with my code provided below. Despite multiple attempts, the issue remains unresolved.
import React from "react";
import {
gridPageCountSelector,
gridPageSelector,
gridPageSizeSelector,
useGridApiContext,
useGridSelector,
} from "@mui/x-data-grid";
import Pagination from "@mui/material/Pagination";
import PaginationItem from "@mui/material/PaginationItem";
import { Stack, TextField } from "@mui/material";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles(() => ({
pagination: {
"& .MuiPaginationItem-root": {
padding: "14px",
margin: "0", // Your custom pagination item styles here
color: "#222124",
fontSize: "14px",
},
},
}));
export default function CustomPagination() {
const apiRef = useGridApiContext();
const page = useGridSelector(apiRef, gridPageSelector);
const pageCount = useGridSelector(apiRef, gridPageCountSelector);
const pageSize = gridPageSizeSelector(apiRef, gridPageSizeSelector)
const classes = useStyles();
return (
<Stack direction="row" justifyContent="space-between" width="100%" alignItems="center" sx={{ background: "#FAFAFA", padding: "16px" }}>
<Stack direction="row" alignItems="center" style={{ fontSize: "14px" }}>
<div>
Currently Displaying:
</div>
<div>
<TextField
variant="outlined"
type="number"
value={pageSize}
onChange={(e) => {
if (!isNaN(e.target.value) && e.target.value >= 1 && e.target.value <= apiRef.current.getRowsCount()) {
apiRef.current.setPageSize(e.target.value);
}
}}
sx={{
display: 'flex',
width: '68px',
alignItems: 'center',
gap: '8px',
background: "white",
margin: "0 5px"
}}
/>
</div>
<div>
Total Results: <span style={{ fontWeight: "700" }}>{apiRef.current.getRowsCount()}</span> {/* Corrected method name to getRows() */}
</div>
</Stack>
<Pagination
className={classes.pagination}
color="primary"
variant="outlined"
shape="rounded"
size="small"
page={page + 1}
count={pageCount}
renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
onChange={(event, value) => apiRef.current.setPage(value - 1)}
/>
</Stack>
);
}