MUI DataGrid Развернуть и свернуть все узлы программно с помощью ReactJS

Question

Как я могу программно расширить/свернуть все строки в MUI ReactJSDataGrid?

Что я пробовал? я использовал опоруdefaultGroupingExpansionDepthна основе документации MUI :

      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>;

Но проблема в том, что эти кнопки работают только тогда, когда дерево еще не развернуто частично.

Как только я частично разворачиваю древовидную сетку, эти кнопки перестают работать. Как заставить эти кнопки работать независимо от текущего состояния развертывания/свертывания древовидной сетки?

Answer 1

Похоже, что вы используете свойство defaultGroupingExpansionDepth для управления начальным состоянием расширения DataGrid, но оно может не обновляться динамически при расширении или сворачивании строк. Чтобы кнопки работали независимо от текущего состояния раскрытия/свертывания, вы можете управлять состоянием раскрытия, используя подход с контролируемым состоянием:

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