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 ponent 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 ponent.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.

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 ponent 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 ponent.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.

• javascript
• angular
• typescript
• angular-material
• angular5

• I had same issue, solved it with plain old <div>. – Niladri Basu Commented Apr 26, 2018 at 10:09
• @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 Commented Apr 26, 2018 at 10:14
• I created the entire table using only <div>. – Niladri Basu Commented Apr 26, 2018 at 10:23
• @BlackBeard But how were you able to benefit from the mat-table functionalities then ? – NanoPish Commented Apr 26, 2018 at 10:24
• Do you mean mat-table? – Niladri Basu Commented Apr 26, 2018 at 10:27

1 Answer 1

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