May I ask for your help, I'm currently working making the columns show/hide using vuetifyjs, I stumbled on these reference:

putedHeaders () {
  if(this.hideCalories){
    return this.headers.filter(header => header.text !== "Calories")
  }

  return this.headers;
}

},

My problem on it is that it can only hide 1 header/column. Can you help me to make it hide multiple headers. I want to achieve these kind of output:

Thank you very much.

May I ask for your help, I'm currently working making the columns show/hide using vuetifyjs, I stumbled on these reference:

https://codepen.io/anon/pen/jeWRvN

putedHeaders () {
  if(this.hideCalories){
    return this.headers.filter(header => header.text !== "Calories")
  }

  return this.headers;
}

},

My problem on it is that it can only hide 1 header/column. Can you help me to make it hide multiple headers. I want to achieve these kind of output:

Thank you very much.

• javascript
• vue.js
• frameworks
• vuetify.js

• 1 do you want to hide fat and carbs headers also and their columns ? – Boussadjra Brahim Commented Sep 4, 2019 at 14:14
• What are all the columns need to hide? you just want to remove the specific columns or remove all, on click on the Hide Calories? – Sam Commented Sep 4, 2019 at 14:16
• @BoussadjraBrahim my apologies if it was not that clear, I've edited my question/post with an image. Hopefully that would make it more clearer. thank you guys – Ace Valdez Commented Sep 4, 2019 at 14:33
• @Sam my apologies if it was not that clear, I've edited my question/post with an image. Hopefully that would make it more clearer. thank you guys – Ace Valdez Commented Sep 4, 2019 at 14:34
• the screenshot doesn't correspond to the codepen snippet – Boussadjra Brahim Commented Sep 4, 2019 at 14:36

1 Answer 1

The headers property can be puted

  puted: {
    headers() {
      let headers = [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        }
      ]

      if (!this.hideCalories) {
        headers.push({ text: 'Calories', value: 'calories' })
      }
      if (!this.hideFat) {
        headers.push({ text: 'Fat (g)', value: 'fat' })
      }
      // ...

      headers.push({ text: 'Carbs (g)', value: 'carbs' })
      headers.push({ text: 'Protein (g)', value: 'protein' })
      headers.push({ text: 'Actions', value: 'name', sortable: false })

      return headers
    }
  }

Then pass headers to table as before.