Reputation: 2984
The table I am attempting to setup is supposed to be formatted as follow:
### Title (category)
ColumnName(result)|January|February|...|December|Total|
------------------|-------|--------|---|--------|-----|
Column1 |2 |33 |...|32 |122 |
Column2 |102 |2 |...|42 |200 |
Column3 |32 |31 |...|22 |132 |
Seems simple enough, and I have put my object in this format:
[
{
"category": "Title",
"result": "Column Name",
"total": 32,
"date": "March"
},
//...
]
To print it in the frontend I put it in this format:
{
"Category": {
"March": [
{
"st_category": "Category",
"date": "March",
"column1": 0
},
],
"April": [/*...*/],
"May": [/*...*/],
},
"OtherCategory": {/*...*/},
"OtherCategory": {/*...*/},
}
Now, the logic for the table is what is getting me confused. I am not sure how to break it down into 4 separate groups and give the results in the order of the table I need it at:
export default {
props: ['dataEffects'],
data() {
return {
effects: JSON.parse(this.dataEffects)
}
},
computed: {
headers() {
return this.effects.headers;
},
results() {
return this.effects.table;
},
availableEffects() {
return this.effects.effects;
},
}
}
<template>
<div class="card">
<div class="card-header">
Student Effect
</div>
<div class="card-body">
<div v-for="(result, index) in results"
v-bind:key="index">
<h5 class="mt-3">{{ index }}</h5>
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th v-for="(month, monthIndex) in result"
v-bind:key="monthIndex">
{{ monthIndex }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(effects, key) in availableEffects"
v-bind:key="key">
<th>{{ effects.description }}</th>
<td v-for="(effect, effectIndex) in result"
v-bind:key="effectIndex">
{{ totals }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
But I just cannot get it as far as:
### Title (category)
ColumnName(result)|January|February|...|December|Total|
------------------|-------|--------|---|--------|-----|
Column1 |- |- |...|- |- |
Column2 |- |- |...|- |- |
Column3 |- |- |...|- |- |
But I cannot add the total count of the values in the month columns and at the end the total count.
I am not sure exactly I am missing here, but I need some help trying to figure this out.l
Upvotes: 0
Views: 47
Reputation: 3226
Stated you can supply your data in a format like:
[
{
"column_name": "Column1",
"january": 123,
"february": 321,
...
},
{
"column_name": "Column2",
"january": 456,
"february": 654,
...
},
...
]
A suggestion would be to make a custom table component to be used for many occasions:
// MyTable.vue
<template>
<table>
<thead>
<tr>
<th v-for="column in columns" :key="`head_${column}`">
{{ column }}
</th>
</tr>
</thead>
<thead>
<tr v-for="(row, index) in rows" :key="`row_${index}`">
<th v-for="column in columns" :key="`row_${index}_${column}`">
{{ column }}
</th>
</tr>
</thead>
</table>
</template>
export default {
name: 'my-table'
props: {
columns: : {
type: Array,
default: () => []
},
rows: {
type: Array,
default: () => []
}
}
};
You can use this component like:
<my-table :columns="['column_name', 'january', 'february', ...]" :rows="this.effects"
Note: this code has not been tested.
Upvotes: 1