<p>如何在MUI ReactJS的<code>DataGrid</code>中以程式設計方式讓所有行展開/折疊？ </p> <p><strong>我試了什麼？ </strong> 我根據MUI文件使用了<code>defaultGroupingExpansionDepth</code>屬性：</p> <pre class="brush:php;toolbar:false;">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>;</pre> <p>但問題是，這些按鈕只在樹狀結構<strong>未</strong>部分展開時起作用。 </p> <p>一旦我部分展開樹形網格，這些按鈕就不再運作了。如何使這些按鈕無論樹狀網格的目前展開/折疊狀態如何都能運作？ </p>

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