MUI: Moving pagination to the top of DataGrid?

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

Live Demo