angular - 可扩展表行 td-datatable teradata Covalent

Question

我一直在使用Teradata Covalent Datatable来满足我的表结构需求，在我需要创建可扩展的表行之前，它非常简单易用。我已经搜索并发现可以使用 mat-table 直接使用角材料来实现这一点。

我想知道是否可以使用 Teradata Covalent 的td-datatable 来存档。

Answer 1

好的，在与 gitter 上的 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上找到完整的实现