如何基于布尔字段控制DataGridPremium的分组展示状态

要实现基于布尔字段切换分组/内联展示，核心是根据布尔值动态调整DataGrid的分组模型和排序规则，以下是具体实现方案：

核心思路 #

• 当布尔条件为真时：启用分组，设置分组字段为myGroupingField，并按分组字段排序
• 当布尔条件为假时：清空分组模型，移除分组排序，数据以内联形式展示

完整代码示例 #

import { useState, useEffect } from 'react';
import { DataGridPremium, useGridApiRef, useKeepGroupedColumnsHidden } from '@mui/x-data-grid-premium';
// 可选：引入Material UI开关组件用于手动切换分组状态
import { Switch, FormControlLabel } from '@mui/material';

export default function DynamicGroupingGrid({ data, loading }) {
  const apiRef = useGridApiRef();
  // 这里用本地状态模拟控制分组的布尔字段，可替换为你的业务字段（如props传入的状态）
  const [isGroupEnabled, setIsGroupEnabled] = useState(true);

  // 生成初始状态：根据布尔值设置分组和排序规则
  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      sorting: {
        sortModel: isGroupEnabled ? [{ field: "__row_group_by_columns_group__", sort: "asc" }] : [],
      },
      rowGrouping: {
        model: isGroupEnabled ? ["myGroupingField"] : [],
      },
    },
  });

  // 监听布尔字段变化，实时更新表格的分组和排序状态
  useEffect(() => {
    if (!apiRef.current) return;

    if (isGroupEnabled) {
      apiRef.current.setRowGroupingModel(["myGroupingField"]);
      apiRef.current.setSortModel([{ field: "__row_group_by_columns_group__", sort: "asc" }]);
    } else {
      apiRef.current.setRowGroupingModel([]);
      apiRef.current.setSortModel([]);
    }
  }, [apiRef, isGroupEnabled]);

  return (
    <>
      {/* 可选：添加UI切换控件，方便手动控制分组状态 */}
      <FormControlLabel
        control={<Switch checked={isGroupEnabled} onChange={(e) => setIsGroupEnabled(e.target.checked)} />}
        label="启用分组展示"
        style={{ margin: '16px' }}
      />
      
      <DataGridPremium
        rows={data}
        columns={[
          { field: 'myGroupingField', align: 'left', headerName: 'Group Id', width: 180, headerAlign: 'left' }
        ]}
        apiRef={apiRef}
        loading={loading}
        disableRowSelectionOnClick
        initialState={initialState}
        slots={{ toolbar: CustomToolbarWithButton }}
      />
    </>
  );
}

关键说明 #

1. 布尔字段替换：将示例中的isGroupEnabled替换为你的业务布尔字段（比如从props获取的状态、后端返回的配置等）
2. 动态状态更新：通过useEffect监听布尔值变化，调用DataGrid的apiRef方法实时修改分组和排序模型，确保界面实时响应
3. 初始状态适配：useKeepGroupedColumnsHidden生成的初始状态会根据布尔值自动适配，保证组件加载时展示正确的模式
4. UI切换控件：示例中添加了开关控件，方便手动测试分组切换，不需要的话可以直接移除

内容的提问来源于stack exchange，提问作者Profer