How to show hide columns of vuetify data table using v-select list?

Question

I am working on VueJs template and I have one data table of Vuetify I have created a select list of headers of tables.

On the basis of the select list, I want to show and hide columns of the table if any heading is unchecked then that will hide from the table same as if checked then that will appear in table.

Select List:

<v-select
  v-model="value"
  :items="headers"
  label="Select Item"
  multiple
>
  <template v-slot:selection="{ item, index }">
    <v-chip v-if="index === 0">
      <span>{{ item.text }}</span>
    </v-chip>
    <span
      v-if="index === 1"
      class="grey--text caption"
    >(+{{ value.length - 1 }} others)</span>
  </template>
</v-select>

Codepen

chans chans · Accepted Answer · 2019-10-29T14:16:17

Yes, it is possible to display only the selected headers from dropdown

working codepen here: https://codepen.io/chansv/pen/PooKMNb

<div id="app">
  <v-app id="inspire">
    <v-select
      v-model="value"
      :items="headers"
      label="Select Item"
      multiple
      return-object
    >
      <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
          <span>{{ item.text }}</span>
        </v-chip>
        <span
          v-if="index === 1"
          class="grey--text caption"
        >(+{{ value.length - 1 }} others)</span>
      </template>
    </v-select>
    <v-data-table
      :headers="selectedHeaders"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <v-chip :color="getColor(item.calories)" dark>
          {{desserts.map(function(x) {return x.id; }).indexOf(item.id)}}
        </v-chip>
      </template>
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      value: [],
      selectedHeaders: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          id: 3,
          name: 'Frozen Yogurt',
          calories: [237,456,789,789],
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          id: 83,
          name: 'Ice cream sandwich',
          calories: [237,456,789,789],
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          id: 11,
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          id: 545,
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          id: 909,
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
      ],
    }
  },
  methods: {
    getColor (calories) {
      if (calories > 400) return 'red'
      else if (calories > 200) return 'orange'
      else return 'green'
    },
  },
  watch: {
    value(val) {
      this.selectedHeaders = val;
    }
  },
  created() {
    this.selectedHeaders = this.headers;
  }
})

How to show hide columns of vuetify data table using v-select list?

1 Answers