How to generate table with rowspan and colspan automatically from json? - vue.js

Question

I retrive data about different plans from an api and I would like to show a nice formated table, where the same feature on a different plan are merged with a colspan, and a feature that requires 2 rows are merged with a rowspan. But I've been through 3-4 iterations and I always face a different problem. I need your help :)
I looked around and I could find a solution for the rowspan or the colspan but I was never successful in merging both solutions.
Similar question:
How to use dynamic table rowspan in vue.js?
The objective:
Current setup:
<table>
<thead>
<tr>
<th></th>
<th v-for="planInfo in data.plans" class="bg-primary">
<h4 class="mb-0 text-light">
{{ planInfo.name }}
</h4>
</th>
</tr>
</thead>
<tbody>
<template v-for="(_row, rowId) in data.rows" :key="_row.key">
<tr>
<th v-if="remconId === 0" :rowspan="_row.rowspan">{{ remcon }}</th>
<th v-else>{{ _row.name }}</th>
<template class="txt-color" v-for="(planFeat, planFeatId) in objectToArray(data.plans, data.rows[rowId].key)" :key="planFeatId">
<td class="txt-color" v-if="_row.key !== 'remote_conn'">
<span v-if="planFeat" v-html="planFeat"></span>
</td>
<template v-else="_row.key === 'remote_conn'">
<td>{{ planFeat }}</td>
</template>
</template>
</tr>
<!-- <tr v-for="(remcon, remconId) in plan.values.remote_conn">
</tr> -->
</template>
</tbody>
</table>
<script setup lang="ts">
const data = {
rows: [
{
name: "Feature A",
key: "feata"
},
{
name: "Feature B",
key: "featb"
},
{
name: "Feature C",
key: "featc",
rowSpan: 2,
},
{
name: "Feature D",
key: "featd"
},
],
plans: [
{
"name": "Plan 1",
"feata": "yes",
"featb": 5,
"featc": {
"value1": 10,
"value2": 5
},
"featd": "no",
},
{
"name": "Plan 2",
"feata": "no",
"featb": 10,
"featc": {
"value1": 0,
"value2": 1
},
"featd": "no",
},
]
}
const objectToArray = (objArr, key) => {
console.log("Looking for ", key, objArr)
return Array.from(objArr, plan => plan.values[key])
}
</script>
Another type of attempt
Some scripts I've been trying below. Unoptimized, probably stupid code, from a differently formatted json where the features are stored in an array, but it wasn't very intuitive:
// Check if the next TD have the same value, if so, increment colSpan by one
let sameCount = 0;
const colspanCount = (i, j, isRecursion = false) => {
console.log(`Col ${j}, Row ${i}`)
if(!isRecursion) {
sameCount = 1;
} else {
console.log(`Is recursion, ${j} ${i}`)
}
// Is j in-range?
if(j >= data.plans.items.length - 1) {
console.log(`${j+1} is out of range, max is ${attr.value.plans.items.length - 1}`)
// This is the last column, there is nothing after that. return 1
if(isRecursion) return false;
} else
// Next value is the same as this one, check the next one
if(attr.value.plans.items[j].features[i] === attr.value.plans.items[j+1].features[i]) {
sameCount++;
console.log(`${i} is the same. ${attr.value.plans.items[j].features[i]} = ${attr.value.plans.items[j+1].features[i]}`);
let nextIsSame = colspanCount(i, j+1, true);
if(nextIsSame) {
if(isRecursion) return true;
} else {
if(isRecursion) return false;
}
}
console.log(`== End, ${sameCount}`)
return sameCount;
}
// Check if we need to add an additional TD
// Don't if the previous TD have the same value
let isFirstVar = true;
const isFirst = (i, j) => {
console.log(`Col ${j}, Row ${i}`)
isFirstVar = true;
// Is j in-range?
if(j <= 0) {
console.log(`${j-1} is out of range`)
return isFirstVar;
// This is the last column, there is nothing after that. return 1
} else
// Next value is the same as this one, check the next one
if(attr.value.plans.items[j].features[i] === attr.value.plans.items[j-1].features[i]) {
isFirstVar = false;
console.log(`${i} is the same. ${attr.value.plans.items[j].features[i]} = ${attr.value.plans.items[j-1].features[i]}`);
}
// if(i <= items.length - 1 && j <= items[i].length - 1) {
// console.log(i, j)
// }
// if((len - 1 < j++) && items[i][j] == items[i][j++]) {
// return 2;
// }
console.log(`== End is it first? ${isFirstVar}`)
return isFirstVar;
}
The json data that goes with the above script:
const attr = ref({
plans: {
features: [
"feata",
"featb",
"featc",
{
name: "featC",
rowspan: 2
}
],
items: [
{
name: "",
features: [
"feata_value", "featb_value", "featc1_value", "featc2_value",
],
},
]
},
})
I would use those 2 functions in the TD like so, where i is the "plan" and j the the "feature" number in a loop:
<td class="txt-color"
:colspan="colspanCount(i, j)" v-if="isFirst(i, j)">
<span v-if="planFeat" v-html="planFeat"></span>
</td>
But I couldn't make this works with rowspan, as the next feature would be on the same row as another one...