[Vuejs]-Displaying data in a table using bootstrap

by

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,
      }),
👤Sp3ctre

2👍

Prepare your data for presentation – the best way in this case would be using computed values:

new Vue({
  el: "#app",
  data() {
    return {
      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
        }
      }],
      tableFields: [
        "name",
        "january",
        "february",
        "march",
        "april",
        "may",
        "june",
        "july",
        "august",
        "september",
        "october",
        "november",
        "december",
      ]
    }
  },
  computed: {
    tableItems() {
      return this.resources.map(({
        name,
        monthlyState
      }) => ({
        name,
        ...monthlyState
      }))
    },
  },
  template: `
  <b-container>
    <b-row>
      <b-col>
        <b-table
          :fields="tableFields"
          :items="tableItems"
        />
      </b-col>
    </b-row>
  </b-container>
  `
})
<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app"></div>
👤muka.gergely

Leave a comment