Displaying data in a table using bootstrap

Question

Displaying data in a table using bootstrap in Vue js

I get resources I need to display them in a table using bootstrap . At the moment I have it done in scss like in image

I'm not a JS or VUE programmer but I have to write something fast

 resources: [{
        id: 1,
        name: 'Surowiec 1',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 2,
        name: 'Surowiec 2',
        monthlyState: {
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 3,
        name: 'Surowiec 3',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }],
    }),

Now I have only this

   <template>
      <div>
        <b-table :fields="fields" :items="resources">
    
        </b-table>
      </div>
    </template>
....
    fields() {
     
    },

Answer 1

<template>
  <div>
    <div class="d-flex justify-content-center d-block p-2 bg-dark text-white" >
    </div>
    <b-container>
      <b-row>
        <b-col>
          <b-table :fields="tableFields" :items="tableItems">
            <template v-for="month in Object.keys(MonthEnum)" v-slot:[`cell(${month})`]="data">
              magazyn:  {{data.item[month]}}
            </template>
          </b-table>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>





export default {
      name: "ResourcesList",
      computed: {
        ...mapGetters(['resources', "productionPlans", 'products']),
        tableItems() {
          return this.resources.map(({name, monthlyState}) => ({
            name, ...monthlyState
          }))
        },
        tableFields() {
          return  ["name", ...Object.keys(MonthEnum)]
        }
      },
    
    
        data: () => ({
        MonthEnum,
      }),