I have an update, I can see the nested datagrid now in the second cell but I can't use colspan for dynamic col and also the height dont change so for now I need just to adjust the height and the width of the cell if the row is added

"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>
  );
}