Filtering Data in a Table

Display and filter product data stored in Firestore by product name, category, and rating

Place Components

1. Place a [Column].
2. Add two items from the [+] button inside the [Column].
3. In sequence from left to right within the [Column], place [Input], [Select], [Input], and [Button].
4. Place a [Table] below the [Column].
5. Enter Filter by Product Name, Filter by Category, Filter by Rating, and Search in the [Label] of the placed [Input], [Select], [Input], and [Button] respectively.
6. Select the [Input] for Filter by Rating and choose [Number] for the [Type].

Display a Filterable Product List in a Table

1. Click [Create] in [Dataflows] and change the dataflow name to listProducts.
2. Select Onboarding Firebase as the data source.
3. Choose [List documents] in [Action] and enter products in [Collection].
4. Add three filters from [Add Filter].
5. For the first filter, select ==, enter title in [Key], and {{ input1.value }} in [Value].
6. For the second filter, select ==, enter category in [Key], and {{ select1.value }} in [Value].
7. For the third filter, select >=, enter rate in [Key], and {{ input2.value }} in [Value].
8. Click [Run], and with the table selected, enter {{ listProducts.data }} in [Data] of the [Inspect].

Retrieve Categories to Display in Select and Link Dataflow to Search Button

1. Click [Create] in [Dataflows] and change the dataflow name to listCategories.
2. Select Onboarding Firebase as the data source.
3. Choose [List documents] in [Action] and enter categories in [Collection].
4. Click [Run], and in the [Inspect] of the select, enter {{ listCategories.data.map(d => d.name) }} for both [Values] and [Labels].
5. With the button selected, choose listProducts in [Dataflow] of the [Inspect].