Vuetify: v-data-table: add header parameter to control visibility

[dschreij]

To account for different viewing devices with varying screen dimensions, it is custom to show or hide columns in a table depending on the viewport width. Vuetify already offers classes to do so, which can easily be applied in the table items slot of <v-data-table>:

~vue

~

However, for the table headers this is much more difficult to achieve. It is of course possible to create custom header markup which contains the display classes within <template slot="headers" scope="props">, but, as far as I know, this also forces one to wire up all the code for pagination and sorting himself, instead of relying on the built-in features.

Would you think it is feasible and desirable to add an extra field to the header items object that controls for visibility? e.g.

~javascript
headers: [
{
text: 'Contact',
value: 'contact.name',
align: 'left',
},
{
text: 'E-mail',
value: 'contact.email',
align: 'left',
visibility: 'hidden-sm-and-down'
},
{
text: 'Created',
value: 'created_at',
align: 'left',
visibility: 'hidden-xs-only'
}
],
~

[dschreij]

I currently implemented this functionality with:

~vue

~

and for the header data:

~~~javascript
headers: [
{
text: 'Contact',
value: 'contact.first_name',
align: 'left',
},
{
text: 'E-mail',
value: 'contact.email',
align: 'left',
visibility: 'hidden-xs-only'
},
{
text: 'Created',
value: 'created_at',
align: 'left'
},
{}
],

~~~

So the only line that I think needs to be added to make this work in the internal header code of v-data-table is

~
header.visibility
~
to the header fields class definitions.

[nekosaur]

I would suggest naming the field class or classes instead of visibility to make the solution more generic

[dschreij]

Agreed. Probably there are more situations in which you want to attach custom classes to the headers.

[AGPDev]

Awesome!!

[Webifi]

Nice work-around, but I'd really like to see native to vuetify style and class properties for headers that get passed to the th.

[dschreij]

Why wouldn't that be possible with this method?

[hscstudio]

But how to hide all header only for xs ?? I do this but sorting not run well

<template slot="headers" slot-scope="props">
    <tr v-if="$vuetify.breakpoint.xs" style="display:none">
        </tr>
        <tr v-else>
          <th v-for="header in props.headers" :key="header.text" >
              {{ header.text }}
          </th>
      </tr>
</template>

[johnleider]

@hscstudio If you have any additional questions, please direct them to the official Discord server.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord