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.

5 min

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.