If you have a table that displays your data you can give your users the ability to filter the data in the table, with a few lines of code.
First let’s set up the elements you need, then we’ll add the code.
-
Set up your table in the regular way using a dataset and the Connect to Data panel to display some content in your collection. This is the only element that’s going to be connected to your dataset.
-
Add an Input element where your user will enter the value they want to filter the table on. For this example give the Input element the ID filterInput in the Properties panel.
-
The last thing to do is to add a button and change its label to Filter .
Now we need to add a bit of code.
-
Select the Filter button and add a click event to it in the Properties panel.
-
Now we are going to add a filter to the dataset using the following code and the setFilter function . This code needs to be added to the inside of the click event handler you created:
$w("#dataset1").setFilter(wixData.filter()
.contains("title", $w("#filterInput").value));
What this code does is create a filter using the contains function from wix-data. Contains accepts 2 parameters. The first one is the field key of the field you want to filter on - in our case title. The second parameter is the term that you want to filter for. So here we are saying “Filter the items that my dataset is currently displaying in my table, for only those whose title field matches what the user entered in my filterInput Input element.”
Once the user clicks the Filter button, this code runs and applies the filter to the dataset. Then the table which is connected to the dataset only displays the filtered content.
In this code our dataset is named “dataset1” and we are assuming that the field in your collection that you want to filter the table on is “title”. In your code, replace “dataset1” with the ID of your dataset, and if you want to filter on a different field in your collection, use its field key instead of “title”.
Don’t forget to add the import statement for ‘wix-data’. When you’re done, the code on your page should look like this:
import wixData from 'wix-data';
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
export function filterButton_onClick(event) {
$w("#dataset1").setFilter(wixData.filter()
.contains("title", $w("#filterInput").value));
}
13 Likes
I did something similar this morning! Took me FOREVER to make it work! lol
Sorry I didn’t get this out earlier Nayeli - but it’s good to know that this content can be helpful.
Very helpful 
And I love reading all the new ticks … makes for great content for my videos … brings in a lot of curious minds to the forum 
can this be done in conjuntion with a search on the same table? In other words, I have a table that I would like to search a title using a search box. Each of my titles has a “type” field and i would like to be able to filter on that field also. Could you tell me what code to use? this is what I attempted to use:
import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
export function input1_keyPress() {
wixData.query(‘Meditations’)
.contains(‘title’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
export function filterButton_onClick() {
$w(“#table1”).setFilter(wixData.filter()
.contains(“type”, $w(“#selection1”).value));
})
}
Hi, there is some problem with filter by “number” on database,
$w(“#dynamicDataset”).setFilter(wixData.filter()
.contains(“title”, $w(“#input1”).value) WORK
.contains(“category”, $w(“#text10”).text) WORK
.contains(“size”, $w(“#selection1”).value) WORK
.ge(“price2”, $w(“#input2”).value) DOES NOT WORK
);
Could you please help me with this? thank you!!!
Hey Jonathan,
The answer is you can do what you are trying to, but not the way you’re trying to do it
The issue is that you are using 2 different methods to populate your table rows: 1) connecting the table to a dataset (and then filtering that dataset) 2) running a query on your collection and using table.rows. You can’t use both at the same time. You are either manually adding data to your table using the API or letting us do the magic by connecting your table to a dataset.
The simplest solution is to just add another .contains condition to the filter, like this:
$w("#dataset1").setFilter(wixData.filter()
.contains("type", $w("#selection1").value)
.contains("title", $w("#selection2").value)
);
Does that work for you?
-Jeff
1 Like
Thank for fast answer:)
Solution you gave don`t not work for me.
But something else is working great for me:
$w(“#dynamicDataset”).setFilter(wixData.filter()
.contains(“category”, $w(“#text10”).text) work
.contains(“title”, $w(“#input1”).value) work
.contains(“size”, $w(“#selection1”).value) work
.between(“newprice”, parseFloat($w(“#input2”).value), parseFloat($w(“#input3”).value)) work
.between(“YEAR”, parseFloat($w(“#input4”).value), parseFloat($w(“#input5”).value)) WORK
);
Hey Ivan,
That answer was for Jonathan
I’m still looking into your issue. Stay tuned
Hey Ivan,
The value of an input field is not affected by the input type. So if you want to use it as a number you need to convert it first. Try this:
.ge("price2", Number($w("#input2").value))
Let me know if this works.
-Jeff
Hi Jeff
Do I add that new code into my existing code? If so, where?
When you say selection 1 and selection 2, what are you referring to? My input fields??
Hey Jonathan,
If you’re going with the solution I suggested you would remove the code you have that runs the query and the code in your filterButton_onClick event handler would look like this:
export function filterButton_onClick() {
$w("#dataset1").setFilter(wixData.filter()
.contains("type", $w("#selection1").value)
.contains("title", $w("#selection2").value)
);
})
BTW - please note that the setFilter is on the dataset, not on the table, as you had it. The table takes its data from the dataset, so if you apply a filter to the dataset it filters the data in the table.
And yes, selection 1 and 2 are your input fields. Let me know how it goes.
-Jeff
I am not having luck. Here is the code I have used:
import wixData from ‘wix-data’;
export function input1_keypress() {
$w(“meditations”).setFilter(wixData.filter()
.contains(“title”, $w(“#input1”).value)
.contains(“code”, $w(“#input2”).value)
);
})
Is “meditations” your dataset? Remember that the setFilter is on the dataset, not on the table or the collection.
yes “meditations” is the name of my database in wix
Oh…I think I know what you mean now…I should be using #dataset1
Let me try that
I received these errors:
public/pages/umzm4.js: Unexpected token (8:4) 6 | .contains(“type”, $w(“#selection1”).value) 7 | ); > 8 | }) | ^Loading the code for the Copy of Meditations page. To debug this code, open umzm4.js in Developer Tools.There was an error in your scriptTypeError: n is not a function. (In ‘n()’, ‘n’ is null)
can you post your site URL? I’ll be able to look and see.