Dynamically show/hide table columns in vue using vuetify data table

Question

Looking like example:

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

I've made something very similar, but for some reason, the table doesn't get re-rendered when I change the header data:

<template>
  <v-container>
    <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">(+{{ value.length - 1 }} others)</span>
      </template>
    </v-select>
    <br />
    <v-data-table :headers="this.selectedHeaders" :items="xyz">
      <template slot="items" slot-scope="props">
        <td
          v-for="header in this.selectedHeaders"
          :key="header"
          v-show="show[header.text]"
        >{{ props.item[header.value] }}</td>
      </template>
    </v-data-table>
  </v-container>
</template>


<script lang="ts">
const charData: Array<object> = [
  {
    id: 10,
    firstName: "Kyle",
    lastName: "Broflovski",
    saying: "Goddamnit Cartman!"
  },
  {
    id: 20,
    firstName: "Eric",
    lastName: "Cartman",
    saying: "Screw you guys, Im going home"
  },
  {
    id: 30,
    firstName: "Stanley",
    lastName: "Marsh",
    saying: "WTF"
  },
  {
    id: 40,
    firstName: "Kenny",
    lastName: "McCormick",
    saying: "hmhpmhphmphmhp"
  }
];

let headers: Array<object> = [];
let selectedHeaders: Array<object> = [];
const show: any = {};
const value: Array<object> = [];
let selectedData: Array<object> = [];

import Vue from "vue";

export default Vue.extend({
  name: "PFTable",
  data: () => ({
    charData,
    headers,
    value,
    selectedHeaders,
    selectedData,
    show
  }),

  computed: {
    xyz: () => {
      return selectedData;
    }
  },

  watch: {
    value(val) {
      selectedHeaders = val;

      const res = selectedHeaders.map(x => x.text);
      selectedData = [];

      for (const k in charData) {
        const element: any = charData[k];

        const filtered = Object.keys(element)
          .filter(key => res.includes(key))
          .reduce((obj: any, key: any) => {
            obj[key] = element[key];
            return obj;
          }, {});

        selectedData.push(filtered);
      }
    }
  },

  beforeCreate() {
    headers = [];
    const headersData = Object.keys(charData[0]);

    headersData.forEach(element => {
      headers.push({ text: element, value: element });
    });

    selectedHeaders = headers;
    selectedData = charData;
  }
});
</script>

I can’t find any way to show/hide columns selected in the select list.

I have selectedData array, which is bound to the data table as its items property. selectedData is returned as a computed property, and is changed in watcher method when the select list changes. However, the data table never gets updated. Shouldn’t computed property re-evaluate whenever the underlying property changes too?

Estradiaz Estradiaz · Accepted Answer · 2020-06-08T07:24:21

I think you loose the reference to this.selectedHeaders in your watcher after assigning value to your outa scoped selectedHeaders ? Thus your template never gets any changes and behaves as expected.

Change:

watch: {
   value(val) {
      selectedHeaders = val;

To

     selectedHeaders.splice(0).push(...val)

Or

     this.selectedHeaders = val

Dynamically show/hide table columns in vue using vuetify data table

2 Answers