テーブルの使い方
テーブルにリストを表示する
- [データフローリスト] の横の [新規作成] をクリックする。
- [Onboarding DB] を選択する。
- [SQL] に以下のクエリを記述する。
SELECT * FROM users LIMIT 20;
- [実行する] を押して、実行する。
- [テーブル] を配置する。
- [テーブル] の [データ] に
{{ dataflow1.data }}
と入力する。
※RestAPIなどから取得した値がネストしている場合は、 {{ dataflow1.data.users }}
などと記述することでネスト先にアクセスすることが可能です。基本的に {{ }}
の内部はJavaScriptと同じ記法で記述することができます。
テーブル内のカラムの表示を変更する
表示名
で管理画面上の表示名を設定します。
タイプ
でデータの表示タイプを選択します。
disable
をtrue
に変更することでカラムを非表示にすることができます。
またエディター上でカラムをドラッグ&ドロップすることでカラムの順番を変更できます。
テーブルの高さを変更する
テーブルを選択し、[高さ] という項目を編集することで、テーブルの高さを変更することができます。
取得した値によって動的に変更したい場合は、 {{ dataflow1.data.length }}
と入力することで動的な高さを設定することが可能です。
※高さの最大値は20です。
ページネーションを設定する
ページネーションを設定します。
[サーバーサイドで行う] をチェックした場合、Limit-Offsetベースのページネーションもしくは、Cursorベースのページネーションを設定できます。
1. Limit-Offsetベースのページネーションを設定する
テーブルにユーザー情報を表示する
- [データフローリスト] の右側にある [新規作成] をクリックする。
- データフロー名を
listUsers
に変更する。 - [アクション] で [Onboarding DB] を選択し、[変更発生時に自動で実行] にチェックをつける。
- 以下のSQLを入力する。
SELECT * FROM users LIMIT 20 OFFSET 0;
- [実行する] をクリックし、実行する。
- [テーブル] をドラッグ&ドロップして、[データ] に
{{ listUsers.data }}
と入力する。
データ総数をテーブルに反映する
- [データフローリスト] の右側にある [新規作成] をクリックする。
- データフロー名を
countUsers
に変更する。 - [アクション] で [Onboarding DB] を選択する。
- 以下のSQLを入力する。
SELECT COUNT(*) as count FROM users;
- [状態管理] をクリックし、[データフロー] から
countUsers
を選択し、data
の0番目にcount:100
が入っていることを確認する。 - 配置した
テーブル
をクリックし、[エディター] の[ページネーション サーバーサイドで行う] にチェックをつける。 - [タイプ]で
OffsetBased
を選択する。 - [データ総数] に
{{ countUsers.data[0].count }}
と記述する。
データフローでLimit/Offsetの設定をする
- [状態管理] の[UIエレメント] 欄を開き、[table1] をクリックして
paginationOffset
に値が入っていることを確認する。 - 作成した
listUsers
をクリックし、SQLを書き換える。
SELECT * FROM users LIMIT 20 OFFSET 0;
↓
SELECT * FROM users
LIMIT 10
OFFSET {{ table1.pagenationOffset }};
- Offsetベースのページネーションができていることを確認する。
2. Cursorベースのページネーションを設定する
テーブルにユーザー情報を表示する
- [データフローリスト] の右側にある [新規作成] をクリックする。
- データフロー名を
listUsers
に変更する。 - [アクション] で [Onboarding firebase] を選択し、[変更発生時に自動で実行] にチェックをつける。
- [Action]で
LISTDOCS
を選択する。 - [Collection] に
users
、 [limit] には10
と入力する。 - [Order by] に
id
と入力する。 - [実行する] を押して実行する。
- [テーブル] をドラッグ&ドロップして、[データ] に
{{ listUsers.data }}
と入力する。
テーブルコンポーネントでCursorを使ったページネーションの準備をする
- 配置した
テーブル
をクリックし、[エディター] の[ページネーション サーバーサイドで行う] にチェックをつける。 - [タイプ]で
cusorBased
を選択する。 - [Next page cursor] に以下を入力する。
{{ dataflow1.data[dataflow1.data.length - 1].id }}
- [Previous page cursor] に以下を入力する。
{{ dataflow1.data[0].id }}
- [Has more] に以下を入力する。
{{ dataflow1.data.length >= 10 }}
データフローでCursorの設定をする
listUsers
をクリックし、[Start after] に{{ table1.nextPageCursorValue }}
と入力する。- [End at] に
{{ table1.previousPageCursorValue }}
と入力する。 - Cusorベースのページネーションができていることを確認する。