Skip to main content

Retool app tutorial: Map and filter data

Learn how to map data to components and filter table rows.

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the Retool apps tutorial in sequence.

The Table component in the subscriptions page currently displays all subscription data. The next step is to filter the results by selecting a customer.

1. Map customers to select options​

For components that support multiple options, you can either manually configure each option or dynamically map them from an array of data, such as query results. Retool evaluates each item in the array of data and makes it available as item to define option lists.

Navigate to the subscriptions page and map the customer data to the Select component's list of options.

  1. Click on the Select component to view its settings in the Inspector.
  2. Set the component to Mapped mode and set the Data source to getCustomers.

Configure the following in Mapped options:

  • Value: {{ item.id }}
  • Label: {{ item.first }} {{item.last }}
  • Caption: {{ item.email }}

When set, each option value references the customer's ID. The label for each option is the customer's full name, with their email address appearing as the caption.

2. Connect the subscriptions API and update the table​

Use the mock API generator below to generate a fully functional temporary REST API with customer data that you can use.

  1. Select the Subscriptions sample data set.
  2. Specify the number of Items that the data set should include. This should be equal to or greater than the nummber used for the customers API.
  3. Click Generate API to generate the API with sample data.
Mock API generator

Next, add a resource query and and create a resource for the subscriptions API. This is the same process you used to connect the customers API.

3. Filter table results based on the selected customer​

The Select component contains a list of customers from which to select. When you select a customer, the component's value property is set to the customer ID.

The subscription data contains a customer_id field. Configure the Table component with a default filter so that it only displays matching subscriptions. The table then automatically updates whenever you select a different customer.

  1. Click on Table Select component to view its settings in the Inspector.
  2. In the Default filters settings, click .
  3. Select the Customer ID column by which to filter.
  4. Select the = operator.
  5. Set the filter value to {{ select1.value }}.

4. Disable selection of customers without a subscription​

Although the table now displays subscription data for a selected customer, there are some customers without any subscriptions. You can write JavaScript expressions that perform conditional logic. For instance, you can configure the Disabled mapped option for the Select component to disable any customer options where the customer has no subscription.

Update the mapped options for the Select component and set the Disabled setting to the following expression:

{{ query3.data.filter(subscription => subscription.customer_id === item.id).length === 0 }}

This expression filters the subscription data and checks if the current customer ID matches any of the customer IDs. If there are no results, the expression returns true and disables the customer option.

Next steps​

You've now mapped query data to a component and configured a default table filter. Move on to the next section and learn how to temporarily store values.