DEV Community

Cover image for Multi Filter Column in Vuetify Data Table
Bruno Panassi
Bruno Panassi

Posted on

Multi Filter Column in Vuetify Data Table

I know that there is a solution for this if you see the documentation for custom filter in data table, but i tried and for some reason it didn’t work. So i search for other solution and i find many other ways, but the only one that allowed multi filter column independent of the filtering order, was the one that i will show here.

So, i will take the common v-data-table used in the Vuetify documentation:
Vuetify Data Table

The first thing to do is use a slot for the header of the column name, that we will add a icon to activate a menu, that will have a v-text-field to filter the data and a button to clean the input.
Alt Text

And we will have this:
Alt Text

Now we gonna need a variable, that we will called it dessertName to filter the data. To this we add it to the property v-model of the v-text-field in the menu of the column template, and add a click event on the v-btn to clean the input data.
Alt Text

A method is needed to filter the data when dessertName is filled, so we call it filterDessertName, and pass a argument called item to access the property name of the desserts array.
Alt Text

But, to the method work and return the data filtered, we need to create a computed property and call it in the prop items of the v-data-table.

In the computed property filteredDesserts we create the array conditions, and check every time that the variable dessertName is filled, if so, we add the method filterDessertName to the conditions, and then, we return the desserts array filtering every condition that have in the conditions array:
Alt Text

And the v-data-table will be like this:
Alt Text

And the column name filtered will be like:
Alt Text

Ok, for now, he have a column that allow you to filter the data in it, but this is not a multi filtering, so we gonna do the same for the columns Calories and Fat, and add more data to the dessert array. The data will be Eclair Dark and Eclair Light with new values, to test the multi filtering in the right way.
Alt Text

The methods:
Alt Text

The computed property filteredDesserts:
Alt Text

And the v-data-table header templates for Calories and Fat. To have a better vision of which column is filtered, a small function is added in the color property of every v-icon:
Alt Text

And if we filter the column name with the text ec, the column calories with the value 2, and the column fat with the value 16, independent of the order that you put the values, we will see this row:
Alt Text

You can see the code and test the orders of the filter in this CodePen:
https://codepen.io/BrunoPanassi/pen/dyNQZQP

Shure, you can make better the computed property filteredDesserts by decreasing the if statements and joining the filter variables and filter methods in one Object, but the purpose of this article, is only to show another way to do the multi filtering in the data table, other than by the documentation.

So if you know a better way to do this or have something to say, fell free to comment!

Thanks for reading!

Top comments (27)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
brunopanassi profile image
Bruno Panassi • Edited

Hello,

Sorry, which autocomplete component are you talking about? I can't find it.

And there is a "autofocus" in the autocomplete docs, you can find here:
vuetifyjs.com/en/api/v-autocomplet...

Hope that can help you.

Collapse
 
inane profile image
inane

Yes, but that prop is not working with the code of this tutorial 🤔

Thread Thread
 
brunopanassi profile image
Bruno Panassi

But there is not a autocomplete component in the code, or at least, i can't find it, aren't you trying to add a focus on the v-text-field?

Thread Thread
 
inane profile image
inane

Yes, sorry for the gap. Exactly, I would like to add focus to this text field component.

Thread Thread
 
brunopanassi profile image
Bruno Panassi

I added the prop :autofocus = "true" on each text-field and updated the CodePen, see here:

codepen.io/BrunoPanassi/pen/dyNQZQ...

Collapse
 
rithyskun_18 profile image
Rithy SKUN

I am looking for multi filter with v-data-table of Vuetify too, Thank @brunopanassi
I also modified the code according to my project and you could check out here: codepen.io/rithyskun/pen/poPoZMo

FYI, @vvenkataratnam

Collapse
 
inane profile image
inane

Is it possible to add "autofocus" to that autocomplete component?

I have tried this tutorial but it appears blocked in the console and it is not working.

Collapse
 
rithyskun_18 profile image
Rithy SKUN

You may consider about auto-select-first(When searching, will always highlight the first option) as I had updated coded: codepen.io/rithyskun/pen/poPoZMo

Thread Thread
 
brunopanassi profile image
Bruno Panassi

Nice!

Collapse
 
brunopanassi profile image
Bruno Panassi

Awesome!

Collapse
 
vvenkataratnam profile image
Venkata Ratnam Vemula

Thanks @rithyskun_18 . That helps to write generalize the filters.

Collapse
 
jayantamgr profile image
jayantamgr

Hi @brunopanassi and all,

This article was very helpful
I managed to generalize all the columns dynamically for my project. But my client does not want the button to bring the text field popped up to insert query. So I removed it. Now problem is whenever you click any of the text field, that column is also getting sorted either way. Do you know any solution ? A miniature example is in the codepen, try to click on the text field and you will see what i mean.

codepen.io/jayanta-barman/pen/NWvMdrp

Many thanks in advance

Collapse
 
jayantamgr profile image
jayantamgr • Edited

got the answer from stack overflow, code pen updated,

added, click.stop at div inside template,

here is the link from stackoverflow:

stackoverflow.com/questions/698817...

Thanks a lot guys anyways

Collapse
 
brunopanassi profile image
Bruno Panassi

Hi @jayantamgr

Sorry for not helping you earlier, i am very busy at work.

Anyway, congrats that you have finded a way for your solution!

Thread Thread
 
jayantamgr profile image
jayantamgr

Hi Bruno, thanks for responding, I hope my solution posted here will help others as well ... I hope that we keeep in touch in this medium in future as well.

R
Jay

Collapse
 
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

I'm a beginner and I was wondering, In the "filterDessertName" function, where does the parameter "item" comes from ? I have that a lot in my javascript code but I never understood where it came from and also, how to add other parameters to these kind of functions without skipping the first invisible one when we call it ? Can someone help ?

Collapse
 
brunopanassi profile image
Bruno Panassi

Hi Chloé, maybe i can help you.

The parameter "item" will be used in the line 142 , on the command "return condition(dessert)", in this case "dessert" is the item, because "conditions" its an array of boolean functions, and will return "true" or "false" to the "conditions.every" on line 141.

So will not be an invisible parameter, because in the "return condition(dessert)", "condition" can be one of the filter methods, like "filterCalories" and "dessert" its the "item". You can add a second parameter on the method like "index" if you pass a value inside the "conditions.every", for example:

return this.desserts.filter((dessert) => {
    return conditions.every((condition, index) => {
        return condition(dessert, index);
        })
    })

filterCalories(item, index) {
    return item.calories.toString().includes(this.calories) && item.indexOf(index)
 }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

Thank you very much! And thank you for your code btw! Is there a way to avoid repetitions if we want to add a filter to 6 columns for example ? I mean having only one filter method and also only one template in the html instead of 6 ?

Thread Thread
 
brunopanassi profile image
Bruno Panassi

This was exactly what i thought when i make this code, but i did not have time to think in a solution for this, but im almost sure that there is a solution for this, unfortunately by now i dont have a solution :(

Thread Thread
 
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

Hey thanks anyway! I just worked on it and found a solution for the methods :) Probably not the best but it's working and it's shorter! How can I share it here in the comments like you did ? I'm new to this website

Thread Thread
 
brunopanassi profile image
Bruno Panassi

If you want to share only the part of JS, you can type here in comments, otherwise if you want to show the full project you can upload it on the CodePen and share the link here :)

Collapse
 
stephan_b_84a97ff54308bef profile image
Stephan B

Actually a great article. But it took me very long to figure out that the click on the filter button does not work because the v-slot:activator code is outdated.

It needs to be changed to

<template v-slot:activator="{ props }">
<v-btn icon v-bind="props">

Collapse
 
serenast14 profile image
serena

Hi, first of all thank you for sharing this tutorial! However I do have a question. I already followed the tutorial but I am getting an error message that says

'conditions' is not defined

Do you know what does this mean? Thank you so much.

Collapse
 
brunopanassi profile image
Bruno Panassi

Hi there,

In the computed method filteredDesserts did you declare the conditions variable?

in the CodePen example, it's in the line 125 of the JS file.

Collapse
 
vvenkataratnam profile image
Venkata Ratnam Vemula

Hi, Thanks for sharing the multi filters on vuetify data table. Is there a way to generalize these filters, instead of writing filter for each column?

Collapse
 
brunopanassi profile image
Bruno Panassi

Sorry for not answering sooner, good that you make it with the help of @rithyskun_18 !