Expandable row to display a child table

[tedtally]

In efforts to use the material table to fit my needs I am wondering if there's any possibility of inserting a an expansion panel containing a mat-table inside of another mat-table or mat-cell (Parent-Child situation). I've been trying to get it to work but nothing outside of the data-bound form control shows up (the panel does not show at all.) Was the cdk-table or material-table design meant to be that flexible?

[irossimoline]

Hi @tedtally ,

I'm not sure how this will behave, but it should behave exactly as @angular/cdk tables do. If you want more specific information, I suggest you to open an issue in in angular repo asking this exact question.

If you can share your code on plunker, please share it and I will check if I can help you with it.

[tedtally]

Please excuse my frustration (due to laziness :-) ). You will do exactly what you suggest. I think that the true issue is figuring out how to handle nested arrays/collections inside the dataSource. Since we assign the dataSource to the table how do we access those items in the child array and display them ?

[irossimoline]

@tedtally, sorry for the delay. If you want to use nested arrays/collections inside the dataSource it should be possible doing something like the following code.

In main-table.component.ts file (outer table component):

displayedColumns: [ innerTable ] // your outer table columns to be displayed
this.dataSource = new TableDataSource<Array>([], Array);

In main-table.component.html:

<mat-table [dataSource]="dataSource">
  <!-- data rows here -->
  <ng-container matColumnDef="innerTable">
    <mat-header-cell *matHeaderCellDef> Inner table </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <app-inner-table [tableData]="row.currentData">
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

In inner-table.component.ts file (innertable component):

@Component({
  selector: 'app-inner-table',
})
export class InnerTableComponent implements OnInit {

  displayedColumns: [ field1 ] // your inner table columns to be displayed
  dataSource: TableDataSource<YourInnerTableDataType>
  @Input() tableData: YourInnerTableDataType[];

  ngOnInit() {
    this.dataSource = new TableDataSource<YourInnerTableDataType>(tableData, YourInnerTableDataType);
  }
}

In inner-table.component.html:

<mat-table [dataSource]="dataSource">
  <!-- your inner table columns here -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

I didn't try it, but I hope it helps you.

[tedtally]

Thanks for all of your help @irossimoline . Truly above and beyond all expectations!