How to move MUI DataGrid pagination table to the left using CustomPagination

Question

Hi everyone, I'm trying to understand the MUI data grid better and meet the design specifications for table views, I'm using the DataGrid in MUI for pagination, I'm using their custom implementation but I don't know how to do it Since the CustomPagination is overridden by the root of the DataGrid, it changes position, I will share the CodeSandbox from MUI for custom implementation and what I want to achieve.

codesanboxDemo=> https://codesandbox.io/s/ybuq4n?file=/demo.tsx Search results enter image description here

I tried searching for relevant documentation, but no results.

Answer 1

Unfortunately, it is not possible to pass alignment to the footer of a MUI DataGrid. Therefore, you need to make a custom footer and rearrange the default order of footer components. So your code needs to look like this.

DataGrid Usage: If you are using a newer version of the MUI Data Grid, use the slot attribute instead of the component, it has been deprecated.

Custom footer: You need to make sure your custom pagination is inside a GridFooterContainer first. The component will be Generated from top to bottom in html, so will be displayed from left to right.

const CustomFooter = () => {
    
    const gridApi = useGridApiContext();
    
    return (
        
            
            {
                !!gridApi.current.getSelectedRows().size && 
                    
            }
        
    );
};

export default CustomFooter;

Hope this helps.