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.

Open in Anvil

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 self.text_box_search.

The event handler code will always be the same - call search_employees with whatever is in self.text_box_search.text:

  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:

Open in Anvil

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: