I'm new in vue.js, please help. I need filters in my table. Each column must have multiple select filter by values. When we click on column header - dropdown multi select opens, and we can select filtered values. For example like this Vuetify Data Table Inline Filter but this example doesn't work with vuetify 2.
My html:
<template>
<v-card class="elevation-3">
<v-card-title>
{{ other_title }}
<v-btn style="background-color: white; box-shadow: none;" @click="csvExport(other_title, otherIncidentsData)">
CSV<i class="fas fa-file-csv"></i>
</v-btn>
<v-btn text @click="exportToPdf()">
Pdf<v-icon>mdi-file-pdf-box-outline</v-icon>
</v-btn>
<v-btn text @click="showExportModal">
<v-icon>mdi-email-receive-outline</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:search="search"
:headers="headers"
:items="otherIncidents"
:items-per-page="10"
>
<template v-slot:item.priority.name="{ item }">
<v-chip :color="getPriorityColor(item.priority.name)" dark>{{ item.priority.name }}</v-chip>
</template>
</v-data-table>
</v-card>
</template>
And JS:
export default {
mixins: [
mixin
],
data() {
return {
search: '',
title: 'MediaMyne reports',
project_title: 'PROJECTS (open at the end of the reporting period)',
new_title: 'NEW REQUESTS (created during the reporting period)',
other_title: 'OTHER REQUESTS (remaining open or changed during the reporting period)',
tabs: [
{ name: 'Projects' },
{ name: 'New Requests' },
{ name: 'Other Requests' },
],
headers: [
{
text: 'Company', align: 'start', sortable: true, value: 'customer.name', width: '14%',
},
{
text: 'Name (Costumer Contact)', align: 'start', sortable: true, value: 'reported_By_Customer_Contact.name', width: '16%',
},
{
text: 'Title', align: 'start', sortable: true, value: 'name', width: '17%',
},
{
text: 'Days open', align: 'center', sortable: true, value: 'daysOpen', width: '9%',
},
{
text: 'Days waiting', align: 'center', sortable: true, value: 'daysWaiting', width: '10%',
},
{
text: 'Workflow step', align: 'start', sortable: true, value: 'workflow_Step.name', width: '12%',
},
{
text: 'Support type', align: 'start', sortable: true, value: 'custom_Fields.customFields.custom_266', width: '12%',
},
{
text: 'Priority', align: 'start', sortable: true, value: 'priority.name', width: '10%',
},
],
otherIncidents: [],
newIncidents: [],
projectIncidents: [],
activeTab: 0,
pdfReportTitle: ''
};
},
components: {
ExportModal
},
computed: {
...mapGetters([
'isLoggedIn'
]),
otherIncidentsData() {
return this.otherIncidents.map(item => ({
Company: item.customer.name,
Costumer_contact_name: item.reported_By_Customer_Contact.name,
Title: item.name,
Days_open: item.daysOpen,
Days_waiting: item.daysWaiting,
Workflow_step: item.workflow_Step.name,
Support_type: item.custom_Fields.customFields.custom_266,
Priority: item.priority.name
}));
},
methods: {
...mapActions([
'setLoginState'
]),
getPriorityColor(priority) {
switch (priority.toLowerCase()) {
case 'critical':
return '#fc0000';
case 'high':
return '#c20202';
case 'normal':
return '#dd7417';
case 'low':
return '#318d14';
default:
return 'rgb(0,0,0,0)';
}
}
};
