Mui DataGridPro可展开行表格：默认展开及文字替换需求

1. 设置行默认展开 #

要让树形行默认全部展开，可通过initialState配置expandedRowIds，将所有需要展开的行ID传入（DataGrid会自动忽略叶子节点的展开状态）：

// 遍历行数据，生成所有行ID的展开配置
const expandedRowIds = checklistRows.reduce((acc, row) => {
  acc[row.id] = true;
  return acc;
}, {});

然后在DataGridPro组件中添加该配置：

<DataGridPro
  treeData
  rows={checklistRows}
  columns={aColumns}
  getTreeDataPath={getTreeDataPath}
  initialState={{ expandedRowIds }}
/>

如果仅需要展开特定父节点，可先筛选出目标行ID再传入，例如只展开层级长度大于1的节点：

const expandedRowIds = checklistRows
  .filter(row => row.hierarchy.length > 1)
  .reduce((acc, row) => {
    acc[row.id] = true;
    return acc;
  }, {});

2. 替换“Groups”文字 #

直接通过localeText属性修改默认的分组表头文字，无需修改列配置：

<DataGridPro
  treeData
  rows={checklistRows}
  columns={aColumns}
  getTreeDataPath={getTreeDataPath}
  localeText={{
    treeDataGroupHeaderName: '团队层级' // 替换为你需要的文字
  }}
/>

如果需要自定义列的其他样式，也可以手动在aColumns数组中定义树形路径列，覆盖默认标题：

const aColumns = [
  // 其他列配置...
  {
    field: 'treeDataPath',
    headerName: '团队层级', // 自定义标题
    width: 220,
  },
  // 其他列配置...
];

// 生成默认展开的行ID配置
const expandedRowIds = checklistRows.reduce((acc, row) => {
  acc[row.id] = true;
  return acc;
}, {});

return (
  <>
    <div style={{ width: '100%' }}>
      <DataGridPro
        treeData
        rows={checklistRows}
        columns={aColumns}
        getTreeDataPath={getTreeDataPath}
        initialState={{ expandedRowIds }}
        localeText={{
          treeDataGroupHeaderName: '团队层级'
        }}
      />
    </div>
  </>
);

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