Setup complex table format

Question

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

Answer 1

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.