I am attempting to create a dynamic datatable with expandable rows using mat-table from the material angular 2 framework. Each row has the capability of containing subrows.
The data for my rows is structured as an object that may also include other sub-objects.
Utilizing the material angular table component or mat-table, it is feasible to define various types of rows and select which one to apply to the current iteration.
However, I am curious if there is a method to generate multiple types of rows within the same iteration?
Must I manually include the sub-items in the datasource supplying the mat-table, or is there a way to input items containing sub-items and consequently produce one row for the item data and additional rows for each sub-item?
I attempted to follow the approach outlined in this response.
Here are the row definitions I have incorporated into my component.ts file:
<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>
Yet, it appears that when the condition for isExpansionDetail is met and the second row type is selected, it seems to 'overwrite' the first one, resulting in the first row not being generated.