使用行分组时将空行不可扩展在材料UI DataGrid Premium中

Question

下面的组件使用材料UI DataGrid Premium来显示奖学金列表，如果学生申请了奖学金，则将通过奖学金名称分组，并使用行分组进行扩展。

我希望所有奖学金都在桌上出现，即使没有学生申请；但是，它们不应扩展。目前，它们是可扩展的，当您扩展它们时，一个空排在其下方扩展。 我很难弄清楚如何在其下面没有分组行的行中禁用行扩展性。

import React, { useEffect, useState } from "react";
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from "@mui/x-data-grid-premium";
import { Box, Button } from "@mui/material";
import useGetFSDocs from "../../../shared/hooks/db/useGetFSDocs";
import {
  ScholarshipApplicationRecord,
  ScholarshipRecord,
  StudentRecord,
} from "../../../shared/types/types";
import { Collection } from "../../../shared/types/enums";
import UploadScholarshipDialog from "./UploadScholarshipsDialog";
import { useRecoilValue } from "recoil";
import { allSchoolStudentsAtom } from "../../recoil/studentsAtoms";
import { GridColDef } from "@mui/x-data-grid-premium"; // Use this instead of '@mui/x-data-grid'

type Row = {
  id: string;
  scholarshipName: string | null;
  studentName: string | null;
  submittedOn: string | null;
  status: string | null;
  awardAmount: number | null;
  hasApplications: boolean;
};

const ScholarshipTable = () => {
  const [rows, setRows] = useState<Row[]>([]);
  const allStudents = useRecoilValue(allSchoolStudentsAtom);
  const { getFSDocs } = useGetFSDocs();
  const apiRef = useGridApiRef();
  const [uploadOpen, setUploadOpen] = useState(false);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ["scholarshipName"],
      },
      aggregation: {
        model: {
          awardAmount: "sum",
        },
      },
    },
  });

  const handleUploadOpen = () => {
    setUploadOpen(true);
  };

  const buildRow = ({
    scholarships,
    applications,
    students,
  }: {
    scholarships: ScholarshipRecord[];
    applications: ScholarshipApplicationRecord[];
    students: StudentRecord[];
  }) => {
    const rows: Row[] = [];
    scholarships.forEach((scholarship) => {
      const studentApplications = applications.filter(
        (app) => app.scholarshipId === scholarship.id
      );
      if (studentApplications.length > 0) {
        studentApplications.forEach((application) => {
          const student = students.find((student) => student.id === application.studentId);
          if (!student) return;
          rows.push({
            id: application.id,
            scholarshipName: `${scholarship.name} - ${scholarship.sponsorName}`,
            studentName: `${student.firstName} ${student.lastName}`,
            submittedOn: application?.appliedDate || "",
            status: application.status,
            awardAmount: Number(application.awardAmount) || 0,
            hasApplications: true,
          });
        });
      } else {
        // Scholarships with no applications
        rows.push({
          id: scholarship.id,
          scholarshipName: `${scholarship.name} - ${scholarship.sponsorName}`,
          studentName: null, // No student
          submittedOn: null, // No submission date
          status: null, // No status
          awardAmount: null, // No award amount
          hasApplications: false, // Mark as no applications
        });
      }
    });
    return rows;
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [tempscholarshipApplications, tempscholarships] = await Promise.all([
          getFSDocs<ScholarshipApplicationRecord>({
            col: Collection.SCHOLARSHIP_APPLICATIONS,
          }),
          getFSDocs<ScholarshipRecord>({
            col: Collection.SCHOLARSHIPS,
          }),
        ]);
        const tempRows = buildRow({
          scholarships: tempscholarships,
          applications: tempscholarshipApplications,
          students: allStudents,
        });
        setRows(tempRows);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, [allStudents, getFSDocs]);

  return (
    <>
      <Box sx={{ py: 2, display: "flex", justifyContent: "right", gap: 2 }}>
        <Button onClick={handleUploadOpen} variant="outlined">
          Upload Scholarships
        </Button>
        <Button variant="outlined">Add New Scholarship</Button>
      </Box>

      <Box sx={{ height: 520, width: "95%" }}>
        <DataGridPremium
          columns={columns}
          rows={rows}
          apiRef={apiRef}
          initialState={initialState}
          getRowId={(row) => row.id} // Ensure unique row IDs
        />
      </Box>
      <UploadScholarshipDialog open={uploadOpen} setOpen={setUploadOpen} />
    </>
  );
};

export default ScholarshipTable;

const columns: GridColDef[] = [
  {
    field: "scholarshipName",
    headerName: "Scholarship Name",
    width: 400,
  },
  {
    field: "awardAmount",
    headerName: "Award Amount",
    minWidth: 80,
    flex: 1,
    type: "number",
  },
  {
    field: "studentName",
    headerName: "Student Name",
    minWidth: 80,
    flex: 1,
  },
  {
    field: "submittedOn",
    headerName: "Submitted On",
    minWidth: 80,
    flex: 1,
  },
  {
    field: "status",
    headerName: "Status",
    minWidth: 80,
    flex: 1,
  },
];

我只是遇到了同样的问题。 我无法完全隐藏可扩展的图标，但可以使它们被禁用。

<DataGridPremium
...
    getDetailPanelContent={(props) => {
            

        if (props?.row?.children === true) 
           return <DetailPanelContent {...props} />
    }}
/>

Answer 1