在数据网格 mui nextjs 中显示数据网格

Question

我正在使用 MUI 的 DataGrid 来显示任务列表。我的目标是在单击时在每个任务行正下方有一个可扩展的详细信息行。目前，我正在尝试在所选任务下添加一个新行，所有列都跨越以显示简单的消息。但是，我面临两个问题：

新的详细信息行未按预期显示。 虽然我可以看到展开的行上有红色背景，但列没有跨越，并且没有显示任何消息。 这是我当前的代码：

"use client";

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Box from "@mui/material/Box";

export default function TaskTable({ tasks }) {
    const [expandedTaskId, setExpandedTaskId] = React.useState(null);

    // Colonnes pour les tâches
    const columns = [
        { field: "title", headerName: "Titre", width: 200 },
        { field: "description", headerName: "Description", width: 300 },
        { field: "status", headerName: "Statut", width: 120 },
        { field: "priority", headerName: "Priorité", width: 120 },
        { field: "startDate", headerName: "Date de début", width: 150 },
        { field: "dueDate", headerName: "Date de fin", width: 150 },
        { field: "createdAt", headerName: "Créé le", width: 150 },
        { field: "updatedAt", headerName: "Mis à jour le", width: 150 },
        {
            field: "files",
            headerName: "Fichiers",
            width: 200,
            renderCell: (params) => (
                <ul>
                    {(params.value || []).map((file, index) => (
                        <li key={index}>
                            <a href={file.url} target="_blank" rel="noopener noreferrer">
                                {file.name}
                            </a>
                        </li>
                    ))}
                </ul>
            ),
        },
    ];

    // Fonction pour afficher/masquer le panneau des sous-tâches
    const handleRowClick = (params) => {
        setExpandedTaskId((prevId) => (prevId === params.row.id ? null : params.row.id));
    };

    //  les lignes de la table principale incluant les lignes cachées pour les sous-tâches
    const rows = tasks.flatMap((task) => {
        const mainRow = {
            id: task._id,
            title: task.title,
            description: task.description,
            status: task.status,
            priority: task.priority,
            startDate: task.startDate ? new Date(task.startDate).toLocaleDateString() : "N/A",
            dueDate: task.dueDate ? new Date(task.dueDate).toLocaleDateString() : "N/A",
            createdAt: task.createdAt ? new Date(task.createdAt).toLocaleDateString() : "N/A",
            updatedAt: task.updatedAt ? new Date(task.updatedAt).toLocaleDateString() : "N/A",
            files: task.files || [],
        };

        // Si la tâche est développée, ajouter une ligne supplémentaire avec un texte
        if (task._id === expandedTaskId) {
            return [
                mainRow,
                {
                    id: `${task._id}-expanded`,
                    message: "Détails supplémentaires pour cette tâche",
                    isExpandedRow: true,
                    colSpan: columns.length,
                },
            ];
        }

        return [mainRow];
    });

    return (
        <Box sx={{ width: "100%" }}>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                getRowId={(row) => row.id}
                onRowClick={(params) => {
                    if (!params.row.isExpandedRow) handleRowClick(params);
                }}
                getRowClassName={(params) =>
                    params.row.isExpandedRow ? "expanded-row" : ""
                }
                components={{
                    Row: (props) => (
                        <>
                            <props.components.Row {...props} />
                            {props.row.isExpandedRow && (
                                <Box
                                    sx={{
                                        pl: 2,
                                        width: "100%",
                                        bgcolor: "rgba(255, 0, 0, 0.1)",
                                        gridColumn: `span ${columns.length}`,

                                    }}
                                >
                                    <Box sx={{ padding: 1, color: "black" }}>
                                        <p>Test</p>
                                        {/* <p>{props.row.message}</p> */}
                                    </Box>
                                </Box>
                            )}
                        </>
                    ),
                }}
                sx={{
                    "& .MuiDataGrid-row.expanded-row": {
                        bgcolor: "rgba(255, 0, 0, 0.1)",
                        color: "black",
                        "& .MuiDataGrid-cell": {
                            display: "flex",
                            justifyContent: "center",
                            fontStyle: "italic",
                        },
                    },
                }}
            />
        </Box>
    );
}

任何见解或建议将不胜感激。谢谢！

Answer 1

我有一个更新，我现在可以在第二个单元格中看到嵌套数据网格，但我不能使用 colspan 进行动态 col 并且高度也不会改变，所以现在我只需要调整单元格的高度和宽度，如果该行已添加

"use client";
import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Box from "@mui/material/Box";
import SubTaskTable from "./SubTaskTable";

export default function TaskTable({ tasks }) {
  const [expandedTaskId, setExpandedTaskId] = React.useState(null);

  const columns = [
    { field: "title", headerName: "Titre", width: 200 },
    {
      field: "description",
      headerName: "Description",
      width: 300,
      renderCell: (params) => {
        if (params.row.isSubTask) {
          return (
            <Box
              sx={{
                gridColumn: `span ${columns.length}`, 
                bgcolor: "rgba(240, 240, 240, 0.5)",
                padding: 2,
                textAlign: "center",
                fontWeight: "bold",
                minHeight: 250, 
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <SubTaskTable subTasks={params.row.subTasks || []} />
            </Box>
          );
        }
        return params.value;
      },
    },
    { field: "status", headerName: "Statut", width: 120 },
    { field: "priority", headerName: "Priorité", width: 120 },
    { field: "startDate", headerName: "Date de début", width: 150 },
    { field: "dueDate", headerName: "Date de fin", width: 150 },
    { field: "createdAt", headerName: "Créé le", width: 150 },
    { field: "updatedAt", headerName: "Mis à jour le", width: 150 },
    {
      field: "files",
      headerName: "Fichiers",
      width: 200,
      renderCell: (params) => (
        <ul>
          {(params.value || []).map((file, index) => (
            <li key={index}>
              <a href={file.url} target="_blank" rel="noopener noreferrer">
                {file.name}
              </a>
            </li>
          ))}
        </ul>
      ),
    },
  ];

  const handleRowClick = (params) => {
    setExpandedTaskId((prevId) => (prevId === params.row.id ? null : params.row.id));
  };

  const rows = tasks.flatMap((task) => {
    const mainRow = {
      id: task._id,
      title: task.title,
      description: task.description,
      status: task.status,
      priority: task.priority,
      startDate: task.startDate ? new Date(task.startDate).toLocaleDateString() : "N/A",
      dueDate: task.dueDate ? new Date(task.dueDate).toLocaleDateString() : "N/A",
      createdAt: task.createdAt ? new Date(task.createdAt).toLocaleDateString() : "N/A",
      updatedAt: task.updatedAt ? new Date(task.updatedAt).toLocaleDateString() : "N/A",
      files: task.files || [],
    };

    if (task._id === expandedTaskId) {
      return [
        mainRow,
        {
          id: `${task._id}-subTask`,
          isSubTask: true,
          title: "",
          description: "",
          subTasks: task.subTasks || [],
        },
      ];
    }

    return [mainRow];
  });

  return (
    <Box sx={{ width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        getRowId={(row) => row.id}
        onRowClick={(params) => {
          if (!params.row.isSubTask) handleRowClick(params);
        }}
        sx={{
          "& .MuiDataGrid-row.isSubTask .MuiDataGrid-cell": {
            display: "none",
          },
          "& .MuiDataGrid-row.isSubTask .MuiDataGrid-cell--withRenderer": {
            display: "block",
            gridColumn: `span ${columns.length}`,
          },
          "& .MuiDataGrid-row.isSubTask": {
            bgcolor: "rgba(240, 240, 240, 0.5)",
          },
        }}
      />
    </Box>
  );
}