Skip to main content

Classic app tutorial: Map and filter data

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

Classic apps

You're viewing documentation for classic apps, which use Retool's original app editor. The AI app builder is the recommended way to build apps and where Retool focuses new development.

Note

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the classic 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, such as Select, 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 query1.

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. Import subscriptions data and update the table​

The subscriptions data is stored in Retool Database, like the customers data. To import it:

  1. Download sample_subscriptions.csv.
  2. Navigate to Resources and select Retool Database.
  3. Click Import CSV and select Into a new table.
  4. Upload sample_subscriptions.csv and then click Create table.

Next, return to your app and add a resource query for the sample_subscriptions table. This is the same process you used to query the customers data.

Once you're done, set the Data source for your new table to query3.

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 that you just added contains a customer_id field. Configure the Table component with a default filter so that it only displays subscriptions that correspond ot the selected customer. The table then automatically updates whenever you select a different customer.

  1. Click on the Table component to view its settings in the Inspector.
  2. In the Default filters settings, click .
  3. Set the Column to the Customer ID 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. Update the Select component so that customers with no descriptions are disabled.

You can do so by setting a mapped option to an embedded expression that performs 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.

Click the Select component and set the Disabled setting to the following expression:

{{ formatDataAsArray(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.