Expandable table row that expand more set of rows coming from different datasource

Question

How to expand the table row when a row is clicked it will show like for example 4 to 5 set of the row in the same column as the table. I am using angular-material here.

I want to click on a row in the table that will expand another set of rows that are sharing the same table column but the data coming is not from the same data source from the table but only sharing the column header

when clicked one of the rows it will show like this:

then when clicked again on the expanded row it will return to the default table

back to this:

if two rows are clicked it will be like this

Im using angular 8 and typescript

Hey can you please post some example code of what was attempted? Or maybe did you look at https://stackoverflow.com/a/46931989/2490286 — misha130, Jun 17 '21 at 06:25

score 1 · Accepted Answer · answered Jun 17 '21 at 08:17

if you're using mat-table its only add a new property to the array (e.g. "expanded") then just

reemplace the condition expanded in the div

<div class="example-element-detail"
   [@detailExpand]="element.expanded? 'expanded' : 'collapsed'">
...
</div>

And the (click) funtion in row

<tr mat-row ...
      [class.example-expanded-row]="expandedElement === element.expanded"
      (click)="element.expanded=!element.expanded">
</tr>

see stackblitz

If you're using your onw table, is the same, add a new property "expanded" to each element of the "array" and use this property

NOTE: You can also create an array of bools

expanded:boolean[]=[]

And use this array, if in the *ngFor you use *ngFor="let item of myArray;let i=index"

(click)="expanded[i]=!expanded[i]"

And

*ngIf="expanded[i]"

Expandable table row that expand more set of rows coming from different datasource

1 Answers1