Possible ways to create this table in angular without using any libraries

user_18000486 0
Viewed 33

Possible ways to make this nested table in angular 13 with only HTML Table. I've tried many ways but can't figure out how to nest topics and subtopics.

here is the image link of the table https://i.stack.imgur.com/ugkuS.jpg

angular
1 Answers

Imagine you has an array with 14 elements. The properties can be subject,subjectRowspan,topic,topicRowSpan,subtopic,acurrancy,totalCount...

You calcule the properties "subjectRowPan" and "topicRowSpan" to equal to 0,1 or the number of items repeated

  <tr *ngFor="let element of elements">
    <td
      *ngIf="element.subjectRowSpan != 0"
      [attr.rowspan]="element.subjectRowSpan"
    >
      {{ element.subject }}
    </td>
    <td *ngIf="element.topicRowSpan != 0" [attr.rowspan]="element.topicRowSpan">
      {{ element.topic }}
    </td>
    <td>
      {{ element.subtopic }}
    </td>
    ...
  </tr>
user_85581860
Related