In this chapter, we’ll learn how to filter database content displayed in a table, using a Select component as a filter trigger.
First, drag and drop the DataGrid component onto your page.
Connect it to your internal database and select the appropriate table.
You should now see your table data displayed in the grid.
Go to your NoCode database, and make sure the column you want to use for filtering (e.g., Department) is of type Single Select.
This allows the Select component to bind cleanly with the data source.
Now drag and drop a Select component onto the page.
In its configuration, connect it to the same table and column (e.g., Department).
This will automatically populate the dropdown with the available values from that column.
Click on the DataGrid component to open its configuration.
Scroll down to the “Filters” section.
Add a new filter:
Validate. Now, when the user selects a department, the DataGrid will only display rows matching that department.