.svg)
Chapter - 7 filter data using Data Table
In this chapter, we’ll learn how to filter database content displayed in a table, using a Select component as a filter trigger.
Add the Data Grid to Display Your Table
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.
Prepare Your Table with a ‘Single Select’ Column
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.
Connect the Select Component to the Database
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.
Link the Select Component to the Data Grid Filter
Click on the DataGrid component to open its configuration.
Scroll down to the “Filters” section.
Add a new filter:
- Column: select Department
- Condition: is
- Value: drag and drop your Select component into the value field
Validate. Now, when the user selects a department, the DataGrid will only display rows matching that department.