0
310
VistasHow to make some of the columns of the table to contain a dropdown box to filter the table?
I'm using VueJs and Vuetify. I have Vuetify's table where I present the data. I'm trying to edit the header column of some of the columns so I could add a dropdown search bar to filter the table. Something like:
Where Select Item is actually the header (please see the sort symbol aside of it). I could add it the dropdown above the table, like it's shown in the official docs, but I'm trying to make the dropdown as the header column itself and not just above the table.
The current code:
<v-data-table
class="elevation-1"
:headers="headers"
:items="items"
:items-per-page="tableItemsPerPage"
:footer-props="tableFooterSettings"
:loading="tableLoading"
hide-default-footer
>
where headers is a simple array of the headers, for example:
{ text: 'data', value: 'pretty_data', align: 'center', sortable: true },
Of course I want the column to be still sortable (like it's shown in the image [the arrow]). How can I make it done?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Created this working Demo. Hope it will work as per your expectation.
new Vue({
el: '#app',
data: () => ({
selected: [],
headers: [
{
text: 'Name',
align: 'left',
value: 'name'
}
],
filters: {
name: []
},
desserts: [
{
name: 'Frozen Yogurt'
},
{
name: 'Ice cream sandwich'
},
{
name: 'Eclair'
},
{
name: 'Cupcake'
},
{
name: 'Gingerbread'
},
{
name: 'Jelly bean'
},
{
name: 'Lollipop'
},
{
name: 'Honeycomb'
},
{
name: 'Donut'
},
{
name: 'KitKat'
}
]
}),
computed: {
filteredDesserts() {
return this.desserts.filter(d => {
return Object.keys(this.filters).every(f => {
return this.filters[f].length < 1 || this.filters[f].includes(d[f])
})
})
}
},
methods: {
columnValueList(val) {
return this.desserts.map(d => d[val])
}
}
})<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.10/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.10/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="filteredDesserts"
item-key="name"
class="elevation-1"
>
<template slot="headers" slot-scope="props">
<tr class="grey lighten-3">
<th
v-for="header in props.headers"
:key="header.text"
>
<div v-if="filters.hasOwnProperty(header.value)">
<v-select flat hide-details small multiple clearable :items="columnValueList(header.value)" v-model="filters[header.value]">
</v-select>
</div>
</th>
</tr>
</template>
<template slot="items" slot-scope="props">
<tr>
<td>{{ props.item.name }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta