Searching and filtering a Data Grid is an extremely common requirement. It’s also very easy to achieve. Let’s look at how to create a very straightforward search box that displays all data rows that match the search term in any of their columns.
Clone the basic Data Grids example app to follow along with this tutorial - we’ll use it as a starting point.
Add a search header
Imagine your UX guru has decided to put the search box below the column headings, before the data itself. That visually associates it with the table.
To add a header you can drag-and-drop components into your Data Grid above the Repeating Panel. In this case, drag in a Column Panel and put a TextBox and Button inside it to form the UI of the search widget. Of course, you must give the Button the classic ‘magnifying glass’ icon or it’s not a proper search box!
Write a search function
You’ve got a search box and you need some code to enact the search when it’s pressed.
The actual search operation will take place on the server side. That will reduce the amount of data passed from server to client. It’s quite simple, it gets a Data Table and filters it using a list comprehension:
@anvil.server.callable def search_employees(query): result = app_tables.employees.search() if query: result = [ x for x in result if query in x['first_name'] or query in x['last_name'] or query in str(x['pay_grade']) or query in x['team'] ] return result
The list comprehension checks each field for each record, to see if the query is a substring of that field. If the query is empty, the filtering is bypassed - the entire result set is returned.
Set up event handlers
The search should run when
self.button_search is clicked, and when enter is pressed inside
The event handler code will always be the same - call
search_employees with whatever is in
def search(self, **event_args): self.repeating_panel_employees.items = anvil.server.call( 'search_employees', self.text_box_search.text )
So you need to configure the
self.button_search.click event and the
self.text_box_search.pressed_enter event to use this
search method. Just enter the method name into the Events section of the Properties panel for each component:
Search and enjoy
You can now search the data!
Of course, there are as many designs for search and filter behaviour as there are UX designers. We’ve shown how to create one of the simplest, in order to focus on the principle rather than the details.
You might want to add dropdowns for team and grade. Or maybe you would allow complex search terms such as
employee="Jane Smith" team="Bravo" grade<8, by writing a function to parse the query and filter the data accordingly.
Whatever your requirements, the basic pattern of adding some search components to the page, wiring up their event handlers to pass the query to the server, filtering the data and passing it back, will probably remain the same.
Here’s a clone link for the final app:
Feel free to use it and share it - our code examples are open-source under the Apache License.
Here are our other tutorials on Data Grids: