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, Apr 26 '18 at 10:14
@BlackBeard But how were you able to benefit from the mat-table functionalities then ? — NanoPish, Apr 26 '18 at 10:24
@BlackBeard Yes, typo. I meant how can you use sort, pagination and all if you use divs ? — NanoPish, Apr 26 '18 at 10:27
I did not used any feature of `mat-table`. I think people using `
` will have to write those logic manually. — BlackBeard, Apr 26 '18 at 10:29
@BlackBeard I see thanks for explanation. But I should use mat-table — NanoPish, Apr 26 '18 at 10:30

score 5 · Answer 1 · answered Sep 23 '19 at 19:12

5

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

answered Sep 23 '19 at 19:12

Carolina BM

51
1
4

material angular table multiple rows directive

1 Answers1