テーブルのデータを絞り込む

Firestoreに保存されている商品データを一覧表示し、商品名、カテゴリ、評価で絞り込みを行う

コンポーネントを配置する

1. [カラム] を配置する。
2. [カラム] 内の [+] ボタンから2つのアイテムを追加する。
3. [カラム] の中に左から順に、[インプット] 、 [セレクト] 、[インプット] 、[ボタン] を配置する。
4. [カラム] の下に [テーブル] を配置する。
5. 配置した [インプット] 、 [セレクト] 、[インプット] 、 [ボタン] の [ラベル] にそれぞれ 商品名で絞り込む 、 カテゴリで絞り込む 、 評価で絞り込む 、 検索する と入力する。
6. 評価で絞り込む のインプットを選択し [タイプ] で [Number] を選択する。

絞り込み可能な商品一覧情報をテーブルに表示する

1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
2. データソースで Onboarding Firebase を選択する。
3. [Action] で [List documents] を選択し、 [Collection] に products と入力する。
4. [フィルターを追加する] から3つのフィルターを追加する。
5. 1つ目のフィルターに == を選択した状態で、[Key] に title と入力し、[Value] に {{ input1.value }} と入力する。
6. 2つ目のフィルターに == を選択した状態で、[Key] に category と入力し、[Value] に {{ select1.value }} と入力する。
7. 3つ目のフィルターに >= を選択した状態で、[Key] に rate と入力し、[Value] に {{ input2.value }} と入力する。
8. [実行する] をクリックし、テーブルを選択した状態で、[エディター] の [データ] に {{ listProducts.data }} と入力する。

カテゴリを取得してセレクトに表示し、検索ボタンにデータフローを紐づける

1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistCategories に変更する。
2. データソースで Onboarding Firebase を選択する。
3. [Action] で [List documents] を選択し、 [Collection] に categories と入力する。
4. [実行する] をクリックし、セレクトの [エディター] の [Values] と [Labels] に それぞれ
   {{ listCategories.data.map(d => d.name) }}
{{ listCategories.data.map(d => d.name) }}
   と入力する。
5. ボタンを選択した状態で [エディター] の [データフロー] で listProducts を選択する。