透過ReactJS程式設計方式實現MUI DataGrid中所有節點的展開與折疊

Question

如何在MUI ReactJS的DataGrid中以程式設計方式讓所有行展開/折疊？

我試了什麼？ 我根據MUI文件使用了defaultGroupingExpansionDepth屬性：

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

return <Stack>
        <Stack spacing={2} direction="row" m={1}>
            <Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>展開全部</Button>
            <Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>折疊全部</Button>
        </Stack>
        <DataGridPro
            treeData
            …
            apiRef={dataGridApi}
            defaultGroupingExpansionDepth={expandedState}
            ... />
    </Stack>;

但問題是，這些按鈕只在樹狀結構未部分展開時起作用。

一旦我部分展開樹形網格，這些按鈕就不再運作了。如何使這些按鈕無論樹狀網格的目前展開/折疊狀態如何都能運作？

Answer 1

看起來你正在使用defaultGroupingExpansionDepth屬性來控制DataGrid的初始展開狀態，但它可能不會隨著你展開或折疊行而動態更新。為了讓按鈕在目前展開/折疊狀態下運作，你可以使用受控狀態的方法來管理展開狀態：

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