可扩展 table 行 td-datatable teradata 共价

Question

我一直在使用 Teradata Covalent Datatable for my table structure needs and it has been great and simple till i needed to create an expandable table row. I have searched and found that it's possible with 来实现这一点。

我想知道是否可以使用 Teradata Covalent 的 td-datatable.

来实现相同的目的

Answer 1

好的，在与 gitter 上的 Teradata 人员聊天后，我想出了一个解决方案，使用 CovalentCommonModule[=26= 中的 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

上找到完整的实现