MUI: Moving pagination to the top of DataGrid?

Question

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 ?

Answer 1

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

Answer 2

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.