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

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.


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"

Expanding on SimonDepelchin's answer:

The align property in the header specification of a given column, e.g.

{ text: 'some text', value: 'category', align: 'XXX' },

is converted into a class property of the given <td> element like this

<td class="text-XXX">{{item.category}}</td>

If XXX begins with a space, you can use this to give the td cell any class you like:

{ text: 'some text', value: 'category', align: ' d-none' },

becomes

<td class="text- d-none">{{item.category}}</td>

d-none is defined in vuetify.min.css as .d-none{display:none!important}.v-application. However, you do not need to load vuetify.min.css for this trick to work: just put .d-none{display:none!important} anywhere in your css definition.

Note, however, that when the table responsively changes to mobile view, the value of align is ignored, and thus the corresponding element is not hidden.