可擴展表行td-datatable teradata共價

Question

我一直在使用Teradata Covalent Datatable來滿足我的表結構需求，在我需要創建一個可擴展的表行之前，它一直非常簡單。 我搜索后發現，可以直接使用帶角材料的墊子桌子實現此目的。

我想知道是否可以使用Teradata Covalent的td-datatable來歸檔相同的文件。

Answer 1

好吧，在與Teradata的一些人聊了聊之后，我想出了一個使用CovalentCommonModule中的toggle指令的解決方案，並將其包含到一個自定義的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上找到完整的實現