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
?
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>
);
}