CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular5
NanoPish
NanoPish

Reputation: 1501

material angular table multiple rows directive

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.

Upvotes: 4

Views: 10421

Answers (1)

Carolina BM
Carolina BM

Reputation: 71

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

Upvotes: 7

Related Questions