Dynamically display table column/row with data that contains different size of nested array? - vue.js

Question

I'm trying to display the data that I took from firestore and want to display it on a table using Vue.js and Element UI. I've tried looking for a solution but most shows for fixed amount of data whilst for my case I have an uneven number of data.
The structure of my data are as follows:
suppData: [{
comp_name: "company 1",
country: "country 1",
contInfo: [{
cpName: "John Doe",
phone: "123123",
email: "john#doe.com
},
prodList: [{
product: "eggs",
product: "shoes"
}
}],
comp_name: "company 2",
country: "country 2",
contInfo: [{
cpName: "Jack Doe",
phone: "1231231",
email: "jack#doe.com
},
{
cpName: "Michelle",
phone: "12412",
email: "mmichelle#doe.com
},
prodList: [{
product: "eggs",
}
}]
}]
The code I'm using for the table right now, played around with other methods such as formatter, flattening the data, but can't get it to work so help is appreciated!
<el-table-column label="Company Name" prop="company_name"></el-table-column>
<el-table-column label="Country" prop="country"></el-table-column>
<el-table-column label="Contacs" prop="contactName.cpName"></el-table-column>

Answer 1

For adding a row you just have to add an entry to your dataset. For columns you could create a seperate array with column data. You could manage this array yourself. This is an example how you could achieve it:
HTML:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="item in tableStructure" :key="item.prop" prop="item.prop" :label="item.label"></el-table-column>
</el-table>
<el-button #click="addRow">Add row</el-button>
<el-button #click="addColumn">Add column</el-button>
</template>
JS:
data() {
return {
tableStructure: [
{ label: "date", prop:"date" },
{ label: "name", prop:"name" }
],
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
}
},
methods: {
addRow() {
this.tableData.push({
date: '2021-001-01',
name: 'New row',
address: 'Other address'
})
},
addColumn() {
this.tableStructure.push({ label: "address", prop:"address" })
}
}
}
Here is the example in codepen: https://codepen.io/reijnemans/pen/mdrOXgZ?editors=1011