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

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>:

<template slot="items" scope="props">
    <td>{{ props.item.first_name }}</td>
    <td>{{ props.item.last_name }}</td>
    <td class="hidden-xs-only">{{ props.item.email }}</td>
    <td class="hidden-xs-only">{{ props.item.phone }}</td>
    <td class="hidden-sm-and-down">{{ props.item.country }}</td>
    <td class="text-xs-right hidden-xs-only">{{ props.item.quotes_count }}</td>
</template>

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.

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:

<template slot="headers" scope="props">
    <tr>
        <th v-for="header in props.headers" :key="header.text"
            :class="[
                'column sortable', 
                table.pagination.descending ? 'desc' : 'asc', 
                header.value === table.pagination.sortBy ? 'active' : '',
                header.align === 'left' ? 'text-xs-left' : '',
                header.visibility''
            ]"
            @click="changeSort(header.value)"
        >
            <v-icon v-if="!header.align || header.align === 'right'">arrow_upward</v-icon>
            {{ header.text }}
            <v-icon v-if="header.align === 'left'">arrow_upward</v-icon>
        </th>
    </tr>
</template>

and for the header data:

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