material angular table multiple rows directive

Question

I want to make an expandable datatable using mat-table from material angular 2. A row CAN contain subrows.

My rows data is an object that can contain other sub-objects.

Using material angular table component or mat-table, it is possible to define multiple rows types and chose which one to apply to the current iteration.

But is there a way to generate multiple kind of rows during the same iteration ?

Am I forced to add the sub-items to the datasource that feeds the mat-tabke, or it possible to give it items that contain sub-items and generate 1 row with the item data and 1 row for each sub-item ?

I tried to follow the model from this answer.

So I have these rows defined in my component.ts

<mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>
        <mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>

But it seems that when the isExpansionDetail is true and the second row type is chosen, it 'overrides' the first one, which wont be generated.

@BlackBeard Can you expand a bit on this ? Did you use only divs or put a div somewhere in the template ? Or a div in the mat row to emulate a conditional row ? — NanoPish
@BlackBeard But how were you able to benefit from the mat-table functionalities then ? — NanoPish

Carolina BM Carolina BM · Accepted Answer · 2019-09-23T19:12:28

Check if this work for you, add the next attribute to your table multiTemplateDataRows

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>

Read more about here https://material.angular.io/cdk/table/api

material angular table multiple rows directive

1 Answers