如何使用 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;

希望這有幫助。