如何使用 CustomPagination 将 MUI DataGrid 分页表移动到左侧

Question

Hello guys I am tring to better understand MUI data grid, and to fufill a design specification for a table view I am using DataGrid from MUI for the pagination I am using their custom implementation but I can't find out how to manipulated it to change places since the CustomPagination is being overriten by the root of the DataGrid, I am gonna share the CodeSandbox from MUI for the Custom implementation and what I am trying to achive.

codesanbox demo => https://codesandbox.io/s/ybuq4n?file=/demo.tsx searched result enter image description here

I have tried searching on documentation about that but to no avail.

Answer 1

You can achieve this quite easily by substituting the footer with the pagination component. Be aware that if you do this you loose the "rows selected" count... As this DataGrid doesn't have the ability to select more than one row anyway, that really shouldn't matter anyway...

If you want more functionality in your footer, you quite simply build your pagination into a custom footer. If you do that you can also control what you want left and right by using css.

    return (
        <Box sx={{ height: 400, width: '100%' }}>
          <DataGrid
            pagination
            pageSize={5}
            rowsPerPageOptions={[5]}
            components={{
              Footer: CustomPagination,
            }}
            {...data}
          />
        </Box>
      );