vue.jsvuetify.js

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

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.

Solution

  • 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"