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.