angularjs - 嵌套 ngx-datatable

有人可以告诉我是否可以在另一个 ngx-datatable 中嵌套 ngx-datatable 吗？例如，我想在另一个数据表的某一列中添加一个单独的 ngx-datatable。

这是我正在尝试的

rows = [
    {
        "name": "Ethel Price",
        "gender": "female",
        "company": "Johnson, Johnson and Partners, LLC CMP DDC",
        "age": 22
    },
    {
        "name": "Claudine Neal",
        "gender": "female",
        "company": "Sealoud",
        "age": 55
    },
    {
        "name": "Beryl Rice",
        "gender": "female",
        "company": "Velity",
        "age": 67
    },
    {
        "name": "Wilder Gonzales",
        "gender": "male",
        "company": "Geekko"
    }] ;

<ngx-datatable class="table-bordered schedule-work-grid" [columnMode]="'force'" [rowHeight]="'auto'" [headerHeight]="150"
  *ngIf="locations.length > 0" [rows]="rows">
  <ngx-datatable-column name="Name"></ngx-datatable-column>
  <ngx-datatable-column>
    <template>
      <ngx-datatable class="table-bordered schedule-work-grid" [columnMode]="'force'" [rowHeight]="'auto'" [headerHeight]="150"
        *ngIf="locations.length > 0" [rows]="rows">
        <ngx-datatable-column name="Name"></ngx-datatable-column>
      </ngx-datatable>
    </template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Age"></ngx-datatable-column>
</ngx-datatable>

有人能确认嵌套数据表是否可能吗？如果可以，我该如何操作？

编辑

我想创建以下结构

据我了解，ngx-datatable 当前不支持 colspan 和 rowspan 功能。恳请您提供一些指导，以便我可以继续进行实现。

答案＃1

网上有一个带嵌套 ngx-datatable 的示例，也许会有帮助 :) https://codepen.io/SBackUp/pen/MzpzEv

 <ngx-datatable
    #prefilteredRestrictionTable
    class='material expandable'
    columnMode="force"
    [headerHeight]="0"
    [footerHeight]="42"
    [rowHeight]="'auto'"
    [scrollbarV]="false"
    [scrollbarH]="false"
    [rows]='displayedData'
    [sortType]="multi"
    [limit]="5">

    <!-- Manage display data columns of first table -->
    <!-- Here I want to group by date from my object and see the date -->
    <ngx-datatable-column 
      *ngFor="let col of columnsNameTableOne"
      [prop]="col.prop"
      [name]="col.name">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <div style="font-size: 20px; font-weight: bold;" [ngStyle]="{'paddingLeft.px': rowTitleCentered}" (click)="toggleExpandRow(row)">
          {{ row.date }}
        </div>
      </ng-template>
    </ngx-datatable-column>

    <!-- Manage actions columns of first table -->
    <!-- Here I want to manage an action column where I can have an icon to open or close the row specified -->
    <ngx-datatable-column
      [width]="50"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false"
      [frozenLeft]="true">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a
           href="javascript:void(0)"
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          [ngClass]="{'hide': isHidden(row)}"
          title="Expand/Collapse Row"
          class="expand-color"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>

    <!-- Row Detail Template -->
    <!-- Here, based on https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts -->
    <!-- I just configured that each row detail is a table -->
    <ngx-datatable-row-detail [rowHeight]="'auto'" class="test">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div class="offset-subarray">
          <ngx-datatable
            class="material"
            columnMode="force"
            [headerHeight]="60"
            [footerHeight]="42"
            [rowHeight]="'auto'"
            [scrollbarV]="false"
            [scrollbarH]="true"
            [rows]="row.value"
            [sortType]="multi"
            [limit]="10">

            <!-- Manage display data columns -->
            <!-- Here it's to custom each cell of a specific column-->
            <ngx-datatable-column 
              *ngFor="let col of columnsName"
              [prop]="col.prop" 
              [name]="col.name"
              [width]="col.width"
              [ngSwitch]="col.prop">
              <ng-template *ngSwitchCase="'case1'" let-row="row" ngx-datatable-cell-template>
                <span *ngFor="let x of row.x; let last = last">
                  {{ x }}<span *ngIf="!last">, </span>
                </span>
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    
  </ngx-datatable>