使用行分组时，让MUI X Data Grid Premium空行不可展开

云原生阿岚

2026-6-17

解决方案

要禁用无学生申请的奖学金分组行的展开功能，可通过以下方式修改代码：

1. 添加展开权限判断

在DataGridPremium组件中新增isRowExpandable属性，利用apiRef判断当前行是否存在子行，仅当子行数量大于0时允许展开：

<DataGridPremium
  columns={columns}
  rows={rows}
  apiRef={apiRef}
  initialState={initialState}
  getRowId={(row) => row.id}
  // 控制行展开权限
  isRowExpandable={(params) => {
    const childrenCount = apiRef.current.getRowChildrenCount(params.id);
    return childrenCount > 0;
  }}
/>

2. 优化空值显示（可选）

为提升表格可读性，给空值字段设置默认显示文本，修改列定义：

const columns: GridColDef[] = [
  {
    field: "scholarshipName",
    headerName: "奖学金名称",
    width: 400,
  },
  {
    field: "awardAmount",
    headerName: "奖励金额",
    minWidth: 80,
    flex: 1,
    type: "number",
    valueFormatter: (params) => params.value ?? "无",
  },
  {
    field: "studentName",
    headerName: "学生姓名",
    minWidth: 80,
    flex: 1,
    valueFormatter: (params) => params.value ?? "无申请",
  },
  {
    field: "submittedOn",
    headerName: "提交日期",
    minWidth: 80,
    flex: 1,
    valueFormatter: (params) => params.value ?? "-",
  },
  {
    field: "status",
    headerName: "状态",
    minWidth: 80,
    flex: 1,
    valueFormatter: (params) => params.value ?? "-",
  },
];