Développez et réduisez tous les nœuds dans MUI DataGrid via la programmation ReactJS

Question

Comment développer/réduire toutes les lignes par programme dans DataGrid

Qu'ai-je essayé ? J'ai utilisé la propriété defaultGroupingExpansionDepth selon la documentation MUI :

export const EXPAND_ALL = -1;
exporter const COLLAPSE_ALL = 0 ;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...

return <Pile>
        <Espacement de pile={2} direction="ligne" m={1}>
            <Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>Développer tout</Button>
            <Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>Tout réduire</Button>
        </Pile>
        <DataGridPro
            arbreDonnées
            ...
            apiRef={dataGridApi}
            defaultGroupingExpansionDepth={expandedState}
            ... />
    </Pile>;

Le problème est que ces boutons ne fonctionnent que lorsque l'arborescence est pas

Une fois que j'ai partiellement développé la grille de l'arborescence, les boutons ne fonctionnent plus. Comment puis-je faire fonctionner ces boutons quel que soit l'état actuel développé/réduit de la grille arborescente ?

Answer 1

Il semble que vous utilisiez la propriété defaultGroupingExpansionDepth pour contrôler l'état d'expansion initial du DataGrid, mais il se peut qu'elle ne se mette pas à jour dynamiquement lorsque vous développez ou réduisez les lignes. Afin de faire fonctionner le bouton dans l'état développé/réduit actuel, vous pouvez utiliser la méthode contrôléestate pour gérer l'état développé :

<DataGridPro
    treeData
    apiRef={dataGridApi}
    groupingExpansionState={expandedState === EXPAND_ALL}
    onGroupingExpandedChange={(params) =>
      setExpandedState(params.expanded ? EXPAND_ALL : COLLAPSE_ALL)
    }
    // ...
  />