I am attempting to display a table of students where each column represents a subject, and underneath each column are the names of the students who failed in that particular subject. The challenge I am facing is that my data is structured in rows instead of columns. Here is an example of the data for a table row:
[{"name":"dummy1","pass":true},{"name":"dummy1","pass":false},{"name":"dummy1","pass":false}]
In this scenario, there are 3 subjects and therefore the row length is 2 (containing 3 items).
If the second student's row looks like this:
[{"name":"dummy2","pass":false},{"name":"dummy2","pass":false},{"name":"dummy2","pass":false}]
What happens is that the first column starts with a blank cell because the first student passed the first subject, and the name for that column will only appear in the second row.
The HTML code used is as follows:
<div class="table-row" v-for="(row, i) in trows">
<div class="item" v-for="(item, i) in row" >
<span class="item-content" v-if="!item.pass">{{item.name}}</span>
<span class="item-content" v-else></span>
</div>
</div>
My main concern is how to adjust the data so that there are no empty cells between rows when viewing it from a column perspective?
To illustrate further:
name name name name name name
name == > name name name
name name name
name name name