I am currently working on creating a collapsible table where clicking on a row will reveal its sub-rows, similar to the image shown in this picture
https://i.sstatic.net/DGkvw.jpg
At this stage, my goal is to display all rows and sub-rows, but I am encountering difficulties in accomplishing this.
The structure of a single row Object looks something like this:
{
cells: ["cell1", "cell2", "cell3"],
childRows: [{
cells: ["child cell1", "child cell2", "child cell3"],
childRows: []
}]
}
To manage the <tr>, I have created a separate component with customized code (not included here for brevity).
Using an "attribute" style selector for my <tr> component, as directly adding a tag inside the <table> tag causes W3C validation to fail.
@Component({
selector: '[app-table-row]',
})
I have integrated the component selector into the <tbody> of the table:
<tbody app-table-row [table]="table" [rows]="table.rows">
This represents my component template, wherein I attempted recursive calling as follows:
<ng-container *ngFor="let row of rows">
<tr >
<td *ngFor="let cell of row.cells">
{{cell}}
</td>
</tr>
<!--issue arises here
Display sub-rows if current row has any-->
<ng-container *ngIf="row.childRows" app-table-row [table]="table" [rows]="row.childRows"></ng-container><
</ng-container >
An error message is generated stating:
ERROR DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
This may be due to attempting to append a <tr> element to a <ng-container. Despite multiple attempts, I remain stuck at resolving this issue!