可扩展的表行td-datatable teradata Covalent

Question

我一直在使用Teradata Covalent Datatable来满足我的表结构需求，并且它非常简单直到我需要创建一个可扩展的表行。我搜索过并发现用mat-table directly using angular material来实现这一点是可能的。

我想知道是否可以使用Teradata Covalent的 td-datatable 来实现相同的目标。

Answer 1

好的，在与Teradata人聊天后，我想出了一个解决方案，使用 CovalentCommonModule 中的切换指令并将其包含在自定义td中-datatable我设法得到了接近那个的东西。

<强> app.component.html

<table td-data-table #dataTable>
  <thead>
    <tr td-data-table-column-row>
      <th td-data-table-column
          *ngFor="let column of configWidthColumns"
          [numeric]="column.numeric">
        {{column.label}}
      </th>
    </tr>
  </thead>
  <tbody *ngFor="let row of data;let i=index">
    <tr class="cursor-pointer" td-data-table-row (click)="toggle(i)">
      <td td-data-table-cell *ngFor="let column of configWidthColumns" [numeric]="column.numeric">
        {{column.format ? column.format(row[column.name]) : row[column.name]}}
      </td>
    </tr>
    <tr [tdToggle]="toggleDiv[i]">
      <td colspan="7">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </td>
    </tr>
  </tbody>
</table>

<强> app.component.ts

  toggleDiv: boolean[] = [];

  constructor(private _dataTableService: TdDataTableService) {
    this.toggleDiv = Array(this.data.length).fill().map((e, i) => true);
  }

  toggle(i: any): void {
    this.toggleDiv[i] = !this.toggleDiv[i];
  }

对于任何需要此功能的人，您可以在stackblitz

上找到完整的实施方案