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

Question

大家好，我试图更好地理解 MUI 数据网格，并满足表视图的设计规范，我正在使用 MUI 中的 DataGrid 进行分页，我正在使用他们的自定义实现，但我不知道如何操作由于 CustomPagination 被 DataGrid 的根覆盖，它会改变位置，我将分享来自 MUI 的 CodeSandbox 以实现自定义实现以及我想要实现的目标。

codesanbox演示=> https://codesandbox.io/s/ybuq4n?file=/demo.tsx 搜索结果在此输入图片描述

我尝试搜索相关文档，但没有结果。

Answer 1

遗憾的是，无法将对齐方式传递到 MUI DataGrid 的页脚。因此，您需要制作自定义页脚并重新安排页脚组件的默认顺序。所以你的代码需要看起来像这样。

DataGrid 用法： 如果您使用的是更新版本的 MUI 数据网格，请使用 slot 属性而不是组件，它已被弃用。

自定义页脚： 您需要确保您的自定义分页首先位于 GridFooterContainer 内。组件将是 在 html 中从上到下生成，因此将从左到右显示。

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

export default CustomFooter;

希望这有帮助。