cssreactjsmaterial-uimui-x-data-grid

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?


Solution

  • 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

    Edit 67112873/moving-pagination-to-top-header-of-table