Comment déplacer la table de pagination MUI DataGrid vers la gauche à l'aide de CustomPagination

Question

Salut à tous, j'essaie de mieux comprendre MUI DataGrid et de répondre aux spécifications de conception des vues de table, j'utilise DataGrid dans MUI pour la pagination, j'utilise leur implémentation personnalisée mais je ne sais pas comment le faire à cause à CustomPagination Remplacé par la racine du DataGrid, il changera de position et je partagerai le CodeSandbox de MUI pour une implémentation personnalisée et ce que je veux réaliser.

démo codessanbox=> https://codesandbox.io/s/ybuq4n?file=/demo.tsx Résultats de la recherche, entrez la description de l'image ici

J'ai essayé de rechercher de la documentation pertinente, mais aucun résultat.

Answer 1

Malheureusement, il n'est pas possible de transmettre l'alignement au pied de page d'un MUI DataGrid. Par conséquent, vous devez créer un pied de page personnalisé et réorganiser l’ordre par défaut des composants du pied de page. Votre code doit donc ressembler à ceci.

Utilisation de DataGrid : Si vous utilisez une version plus récente de MUI Data Grid, utilisez l'attribut slot au lieu du composant, il est obsolète.

Pied de page personnalisé : Vous devez d'abord vous assurer que votre pagination personnalisée se trouve dans un GridFooterContainer. Le composant sera Généré de haut en bas en HTML, il sera donc affiché de gauche à droite.

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

export default CustomFooter;

J'espère que cela vous aidera.