如何将Material UI treeData分组列标题从Group改为MyCustomHeading？

• 要替换默认的"Group"标题，你需要在DataGrid的columns数组中显式定义分组列（列字段为__tree_group__），并通过headerName设置自定义标题：

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

const columns = [
  {
    field: '__tree_group__',
    headerName: 'MyCustomHeading',
    width: 200, // 可根据需求调整宽度
  },
  // 其他业务列配置...
];

// 示例treeData结构数据
const rows = [
  { id: 1, name: '父项1', parentId: null },
  { id: 2, name: '子项1-1', parentId: 1 },
  { id: 3, name: '父项2', parentId: null },
  // 更多数据...
];

export default function CustomTreeGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        treeData
        getParentId={(row) => row.parentId}
      />
    </div>
  );
}

• 原理说明：Material UI的DataGrid启用treeData模式时，会自动生成字段为__tree_group__的分组列，默认标题为"Group"。通过显式声明该列并配置headerName，即可覆盖默认标题。

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