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
– NanoPish, Commented Apr 26, 2018 at 10:14
@BlackBeard But how were you able to benefit from the mat-table functionalities then ? — NanoPish
– NanoPish, Commented Apr 26, 2018 at 10:24

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

8

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, 2019 at 19:12

Carolina BM

811 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

material angular table multiple rows directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related