Does anyone have any idea on how I can move the standard XGrid pagination to above the table? Or am I going to have to create my own custom pagination and not use the inbuilt with XGrid?
MUI: Moving pagination to the top of DataGrid?
Viewed 2362
2 Answers
There is no public API to put the pagination component on the top, but you can use this CSS trick:
const useStyles = makeStyles({
grid: {
display: "flex",
flexDirection: "column-reverse"
}
});
export default function App() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 100,
maxColumns: 4
});
const classes = useStyles();
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
className={classes.grid}
autoHeight
pageSize={5}
rowsPerPageOptions={[5, 10, 20]}
{...data}
/>
</div>
);
}
Live Demo
What I did in my project is I removed the pagination of the DataGrid by adding hideFooterPagination prop and added a TablePagination component on top of the table.
Related