如何使用 CustomPagination 將 MUI DataGrid 分頁表移至左側
P粉491421413
P粉491421413 2024-03-27 20:29:45
0
1
462

大家好,我試圖更好地理解MUI 資料網格,並滿足表格視圖的設計規範,我正在使用MUI 中的DataGrid 進行分頁,我正在使用他們的自訂實現,但我不知道如何操作由於CustomPagination 被DataGrid 的根覆蓋,它會改變位置,我將分享來自MUI 的CodeSandbox 以實現自訂實作以及我想要實現的目標。

codesanbox示範=> https://codesandbox.io/s/ybuq4n?file=/demo.tsx 搜尋結果在此輸入圖片描述

我嘗試搜尋相關文檔,但沒有結果。

P粉491421413
P粉491421413

全部回覆(1)
P粉955063662

遺憾的是,無法將對齊方式傳遞到 MUI DataGrid 的頁尾。因此,您需要製作自訂頁腳並重新排程頁尾元件的預設順序。所以你的程式碼需要看起來像這樣。

DataGrid 用法: 如果您使用的是更新版本的 MUI 資料網格,請使用 slot 屬性而不是元件,它已被棄用。

自訂頁尾: 您需要確保您的自訂分頁首先位於 GridFooterContainer 內。組件將是 在 html 中從上到下生成,因此將從左到右顯示。

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

export default CustomFooter;

希望這有幫助。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!