angular - Can I insert a child table under cdk-row?

I am using cdk-table in Angular and I want to add a child table under cdk-row to display. So, I implemented it as follows. But the child table is not displayed. I also can't find the child table element in DevTools of Chrome. Someone can help me to solve this issue?

<table cdk-table [dataSource]="ELEMENT_DATA">
  <!-- Position Column -->
  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;">
    <td colspan="4">
      <!-- Nested table -->
      <table style="width: 100%; margin-top: 10px;">
        <tr>
          <th>Detail</th>
          <th>Value</th>
        </tr>
        <tr *ngFor="let detail of row.details">
          <td>{{ detail.name }}</td>
          <td>{{ detail.value }}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table cdk-table [dataSource]="ELEMENT_DATA">
  <!-- Position Column -->
  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;">
    <td colspan="4">
      <!-- Nested table -->
      <table style="width: 100%; margin-top: 10px;">
        <tr>
          <th>Detail</th>
          <th>Value</th>
        </tr>
        <tr *ngFor="let detail of row.details">
          <td>{{ detail.name }}</td>
          <td>{{ detail.value }}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Share Improve this question edited Mar 5 at 15:50 asked Mar 5 at 15:47 Eric 33 bronze badges

You can choose another way like on click of row you can open mat-dialog and in this mat-dialog you can show this child table data. – Aman Gojariya Commented Mar 6 at 3:28
I've post answer you can use this Angular Material Template. – Aman Gojariya Commented Mar 6 at 4:17

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

You can use Angular Material Table with expandable rows for show child table. Click here for more info

You're trying to add the table directly in the row, which CDK's table row rendering won't support. Instead, you should create an expandable row and then use a row template that can be toggled. Something like this should work, with a little work on your end:

component.html

<table cdk-table [dataSource]="ELEMENT_DATA" multiTemplateDataRows>
  <!-- Position Column -->
  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container cdkColumnDef="expandedDetail">
    <td cdk-cell *cdkCellDef="let element" [attr.colspan]="displayedColumns.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <table style="width: 100%; margin-top: 10px;">
          <tr>
            <th>Detail</th>
            <th>Value</th>
          </tr>
          <tr *ngFor="let detail of element.details">
            <td>{{ detail.name }}</td>
            <td>{{ detail.value }}</td>
          </tr>
        </table>
      </div>
    </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let element; columns: displayedColumns;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr cdk-row *cdkRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

component.ts

import { Component, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class YourComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  ELEMENT_DATA = [
    {
      position: 1, 
      name: 'Hydrogen', 
      weight: 1.0079, 
      symbol: 'H',
      details: [
        {name: 'State', value: 'Gas'},
        {name: 'Group', value: '1'}
      ]
    },
    // ...more elements
  ];
  expandedElement: any | null;

  constructor() { }

  ngOnInit(): void { }
}

component.scss

tr.example-detail-row {
  height: 0;
}

tr.example-element-row:not(.example-expanded-row):hover {
  background: whitesmoke;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

You can find more info in the docs about expandable rows

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

angular - Can I insert a child table under cdk-row? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)