如何在Ag-Grid单个单元格内展示多个子单元格？

需求与现状 #

• 需要在Ag-Grid的单个单元格中展示多个子单元格，期望效果类似Excel中多行子单元格嵌入的样式
• 尝试过Ag-Grid的Row Spanning功能，但该方式仅实现单元格合并，且只能访问设置了rowspan的单元格，不符合需求
• 目前的实现效果与期望效果存在差距

当前代码实现 #

function rowSpan(params: RowSpanParams) {
  return params.data.tasks.length > 0 ? params.data.tasks.length : 1;
}

public columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: 'Code',
      field: 'code',
      editable: true,
      onCellClicked(event) {
        window.location.href = `/shots/${event.data.id}`;
      },
      rowSpan: rowSpan,
      cellClass: "cell",
    },
    {
      headerName: 'Sequence',
      field: 'sequence.code',
      editable: true,
    },
    {
      headerName: 'ANIM',
      children: [
        {
          headerName: 'Status',
          field: 'tasks.status',
          columnGroupShow: 'closed',
        },
        {
          headerName: 'Task Name',
          field: 'tasks',
          columnGroupShow: 'closed',
        },
      ],
    },
  ];

后端返回的数据结构 #

[
 {
  "code": "sc01_0090",
  "description": null,
  "sequence": {
    "code": "sc01"
  },
  "tasks": [
    {
      "content": "layout",
      "status": "wtg"
    },
    {
      "content": "animation",
      "status": "ip"
    },
    {
      "content": "lighting",
      "status": "wtg"
    },
    {
      "content": "compose",
      "status": "wtg"
    }
  ]
 },
 ...
]

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