Hide a particular header and it's corresponding column in vuetify datatable

Question

it's listed here that we can attach some class to it and it will be taken care of .i'm still confused on how to use this.

https://github.com/vuetifyjs/vuetify/pull/1863

The codepen

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

suppose i want to hide the calories column. then how should i do it.

Answer 1

The headers object can be a computed property, so you don't need CSS to hide it. Have your computedHeaders function filter your headers array.

computed: {
   computedHeaders () {
      return this.headers.filter(....Your filter logic here)  
   }
}

Change your headers bind in your html to point to 'computedHeaders' instead of headers

:headers="computedHeaders"

Answer 2

In case you still need the column to be filterable (with a search input for instance) you can simply add d-none (with a leading space) to the align property of the header.

headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name',
    },
    { text: 'Category', value: 'category', align: ' d-none' }, // ' d-none' hides the column but keeps the search ability
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ]

Example, if I want to hide the category column but be able to search through it.

https://codepen.io/simondepelchin/pen/JjjEmGm

Edit: Note that this will still show the header when the table switched to mobile rows.