ReactJS中MUI X 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)}>Expand All</Button>
            <Button variant="contained" onClick={() => setExpandedState(COLLAPSE_ALL)}>Collapse All</Button>
        </Stack>
        <DataGridPro
            treeData
            ...
            apiRef={dataGridApi}
            defaultGroupingExpansionDepth={expandedState}
            ... />
    </Stack>;

但存在问题：仅当树状表格未被部分展开时，这些按钮才生效。一旦表格被部分展开，按钮就不再起作用。需要实现不受表格当前展开/折叠状态影响的全局控制方法。

解决方案 #

问题根源在于defaultGroupingExpansionDepth仅负责初始化展开层级，当用户手动操作行的展开状态后，DataGrid会维护独立的内部展开状态，此时修改该属性无法覆盖已有状态。要实现强制全局展开/折叠，需通过apiRef直接调用DataGrid的API方法：

针对分组（Grouping）模式 #

如果你使用的是行分组功能，直接调用内置的API方法即可：

// 首先创建apiRef
import { useGridApiRef } from '@mui/x-data-grid-pro';

const dataGridApi = useGridApiRef();

// 修改按钮点击事件
<Button variant="contained" onClick={() => dataGridApi.current.expandAllGroups()}>
  展开全部
</Button>
<Button variant="contained" onClick={() => dataGridApi.current.collapseAllGroups()}>
  收起全部
</Button>

针对树状数据（treeData）模式 #

如果是treeData结构，需要遍历所有行ID并设置子行展开状态：

import { useGridApiRef } from '@mui/x-data-grid-pro';

const dataGridApi = useGridApiRef();

// 展开所有树状行
const expandAllTreeRows = () => {
  dataGridApi.current.getAllRowIds().forEach(rowId => {
    dataGridApi.current.setRowChildrenExpansion(rowId, true);
  });
};

// 收起所有树状行
const collapseAllTreeRows = () => {
  dataGridApi.current.getAllRowIds().forEach(rowId => {
    dataGridApi.current.setRowChildrenExpansion(rowId, false);
  });
};

// 按钮调用
<Button variant="contained" onClick={expandAllTreeRows}>展开全部</Button>
<Button variant="contained" onClick={collapseAllTreeRows}>收起全部</Button>

关键说明 #

通过apiRef调用的API方法会直接修改DataGrid的内部状态，无论用户之前是否手动调整过展开状态，都能强制生效，完美解决你遇到的失效问题。

内容的提问来源于stack exchange，提问作者Shubham A.