DEV Community

Multi Filter Column in Vuetify Data Table

Bruno Panassi on April 24, 2021

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 wo...

Read full post

Comment deleted

Bruno Panassi • Feb 1 '22 • 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.

inane • Feb 1 '22

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

Bruno Panassi • Feb 1 '22

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?

inane • Feb 1 '22

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

Bruno Panassi • Feb 1 '22

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

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

Rithy SKUN • Jun 29 '21

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

Venkata Ratnam Vemula • Jun 30 '21

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

inane • Feb 1 '22

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.

Rithy SKUN • Feb 6 '22

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

Bruno Panassi • Feb 7 '22

Nice!

Bruno Panassi • Jul 5 '21

Awesome!

Chloé Boucher • Sep 8 '21

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 ?

Bruno Panassi • Sep 9 '21

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)
 }

Chloé Boucher • Sep 10 '21

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 ?

Bruno Panassi • Sep 10 '21

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

Chloé Boucher • Sep 10 '21

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

Bruno Panassi • Sep 10 '21

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

jayantamgr • Nov 8 '21

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

jayantamgr • Nov 8 '21 • 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

Bruno Panassi • Nov 11 '21

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!

jayantamgr • Dec 22 '21

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

Venkata Ratnam Vemula • Jun 21 '21

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?

Bruno Panassi • Jul 5 '21

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

serena • Mar 27 '22

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.

Bruno Panassi • Mar 28 '22

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.