Customer StoriesUsecasesQuerier Blog

テーブルの使い方

Suggest Edits

テーブルにデータを表示する

  1. [データフローリスト] の横の [新規作成] をクリックする。
  2. [データソースの選択] で [Onboarding DB] を選択する。
  3. [実行する] ボタンの横のデータフロー名を listUsers に変更する。
  4. [SQL] に以下のクエリを記述する。
SELECT * FROM users LIMIT 20;
  1. [実行する] を押して、実行する。
  2. [テーブル] を配置する。
  3. [テーブル] の [データ] に {{ listUsers.data }} と入力する。

※Rest APIなどから取得した値がネストしている場合は、 {{ listUsers.data.users }} などと記述することでネスト先にアクセスすることが可能です。

テーブル内のカラムの表示を変更する

[表示名] でカラムの表示名を設定します。

[タイプ] でデータの表示タイプを選択します。

[非表示にする] をオンにすることでカラムを非表示にすることができます。

また、カラム一覧の各カラムをドラッグ&ドロップすることでカラムの順番を変更できます。

テーブルの高さを変更する

テーブルを選択し、[高さ] という項目を編集することで、テーブルの高さを変更することができます。

取得した値によって動的に変更したい場合は、 {{ dataflow1.data.length }} と入力することで動的な高さを設定することが可能です。

※高さの最大値は20です。

ページネーションを設定する

テーブルコンポーネントから、ページネーションを設定することができます。

現在、Limit-Offsetベース、Cursorベースのページネーションに対応しています。

Limit-Offsetベースのページネーションを設定する

テーブルにユーザー情報を表示する

  1. [データフローリスト] の右側にある [新規作成] をクリックする。
  2. [実行する] ボタンの横のデータフロー名を listUsers に変更する。
  3. [データソースの選択] で [Onboarding DB] を選択し、 [変更発生時に自動で実行]　にチェックをつける。
  4. [SQL] に以下のSQLを入力する。
SELECT * FROM users LIMIT 10 OFFSET 0;
  1. [実行する] をクリックし、実行する。
  2. [テーブル] をキャンバスにドラッグ&ドロップして、 [データ] に {{ listUsers.data }} と入力する。

データ総数をテーブルに反映する

  1. [データフローリスト] の右側にある [新規作成] をクリックする。
  2. [実行する] ボタンの横のデータフロー名を countUsers に変更する。
  3. [データソースの選択] で [Onboarding DB] を選択する。
  4. [SQL] に以下のSQLを入力する。
SELECT COUNT(*) as count FROM users;
  1. 配置した [テーブル] をクリックし、[エディター] の [ページネーション >　サーバーサイドで行う] にチェックをつける。
  2. [タイプ]で Offset-based を選択する。
  3. [データ総数] に {{ countUsers.data[0].count }} と記述する。

データフローでLimit/Offsetの設定をする

  1. データフロー一覧から listUsers をクリックし、以下のSQLに書き換える。
SELECT * FROM users
LIMIT 10
OFFSET {{ table1.pagenationOffset }};
  1. ページネーションの動作を確認する。

Cursorベースのページネーションを設定する

テーブルにユーザー情報を表示する

  1. [データフローリスト] の右側にある [新規作成] をクリックする。
  2. [実行する] ボタンの横のデータフロー名を listUsers に変更する。
  3. [データソースの選択] で [Onboarding Firebase] を選択し、[変更発生時に自動で実行]　にチェックをつける。
  4. [Action]で List documents を選択する。
  5. [Collection] に users 、 [Limit] には 10 と入力する。
  6. [Order by] に id と入力する。
  7. [実行する]　を押して実行する。
  8. [テーブル] をキャンバスにドラッグ&ドロップして、 [データ] に {{ listUsers.data }} と入力する。

テーブルコンポーネントでCursorを使ったページネーションの準備をする

  1. 配置したテーブルをクリックし、 [エディター] の [ページネーション　> サーバーサイドで行う] にチェックをつける。
  2. [タイプ]で Cursor-based を選択する。
  3. [Next page cursor] に以下を入力する。
{{ dataflow1.data[dataflow1.data.length - 1].id }}
  1. [Previous page cursor] に以下を入力する。
{{ dataflow1.data[0].id }}
  1. [Has more] に以下を入力する。
{{ dataflow1.data.length >= 10 }}

データフローでCursorの設定をする

  1. データフロー一覧から listUsers をクリックし、 [Start after] に {{ table1.nextPageCursorValue }} と入力する。
  2. [End at] に {{ table1.previousPageCursorValue }} と入力する。
  3. ページネーションの動作を確認する。

Updated 5 months ago