Skip to main content

テーブルの使い方

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

テーブル内に表示するデータを{{}}を用いて [エディター] 内の　データ に記述します。
例えば、listUsersというデータフローで取得したユーザー情報を表示する場合は {{ listUsers.data }} と記述します。
※初期値にはダミーデータが入っています。

テーブルにリストを表示する​

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

※RestAPIなどから取得した値がネストしている場合は、 {{ dataflow1.data.users }} などと記述することでネスト先にアクセスすることが可能です。基本的に {{ }} の内部はJavaScriptと同じ記法で記述することができます。

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

表示名で管理画面上の表示名を設定します。
タイプでデータの表示タイプを選択します。
disableをtrueに変更することでカラムを非表示にすることができます。
またエディター上でカラムをドラッグ&ドロップすることでカラムの順番を変更できます。

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

テーブルを選択し、[高さ] という項目を編集することで、テーブルの高さを変更することができます。
取得した値によって動的に変更したい場合は、 {{ dataflow1.data.length }} と入力することで動的な高さを設定することが可能です。

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

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

ページネーションを設定します。
[サーバーサイドで行う] をチェックした場合、Limit-Offsetベースのページネーションもしくは、Cursorベースのページネーションを設定できます。

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

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

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

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

  1. [データフローリスト] の右側にある [新規作成] をクリックする。
  2. データフロー名をcountUsersに変更する。
  3. [アクション] で [Onboarding DB] を選択する。
  4. [オプションの入力] から以下のSQLを入力する。
SELECT COUNT(*) as count FROM users;
  1. [状態管理] をクリックし、[データフロー] からcountUsersを選択し、dataの0番目に count:100 が入っていることを確認する。
  2. 配置したテーブルをクリックし、[エディター] の[ページネーション　サーバーサイドで行う] にチェックをつける。
  3. [タイプ]で OffsetBased を選択する。
  4. [データ総数] に{{ countUsers.data[0].count }}と記述する。

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

  1. [状態管理] の[UIエレメント]　欄を開き、[table1] をクリックしてpaginationOffsetに値が入っていることを確認する。
  2. 作成したlistUsersをクリックし、[オプションの入力]　からSQLを書き換える。
SELECT * FROM users LIMIT 20 OFFSET 0;

↓

SELECT * FROM users
LIMIT 10
OFFSET {{ table1.pagenationOffset }};
  1. Offsetベースのページネーションができていることを確認する。

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

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

  1. [データフローリスト] の右側にある [新規作成] をクリックする。
  2. データフロー名をlistUsersに変更する。
  3. [アクション] で [Onboarding firebase] を選択し、[変更が発生したら自動でクエリを実行]　にチェックをつける。
  4. [オプションの入力] をクリックし、[Action]でLISTDOCSを選択する。
  5. [collections] にusers、 [limit] には10と入力する。
  6. [orderBy] にidと入力する。
  7. [実行する]　を押して実行する。
  8. [テーブル] をドラッグ&ドロップして、[データ] に {{ listUsers.data }} と入力する。

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

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

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

  1. listUsersをクリックし、[オプションの入力] から[Start after] に{{ table1.nextPageCursorValue }}と入力する。
  2. [End at] に{{ table1.previousPageCursorValue }}と入力する。
  3. Cusorベースのページネーションができていることを確認する。