はじめに
2025年1月5日現在、Bubbleではβ版としてTableエレメントが実装されています。本記事ではTableエレメントの概要（Repeating Groupとの違い）と簡単な使い方をまとめました。
目次
１．Tableエレメントとは
２．TableエレメントとRepeating Groupエレメントの違い
３．Tableエレメントを利用するべき場面
４．Tableエレメントの導入方法
参照サイト
主に以下のBubble公式サイトを参照しています。
１．Tableエレメントとは
これまでデータを表形式で表示するためには、Repeating Groupエレメントを利用しなければなりませんでしたが、これに代わって、表をより簡単・綺麗に作成するためのエレメントとしてTableエレメントが実装されました。
２．TableエレメントとRepeating Groupエレメントの違い
公式サイトで言及されているTableエレメントとRepeating Groupエレメントの主な違いは以下の通りです。
- Repeating Groupエレメントは個々のセルを１つのまとまりとして扱うのに対し、Tableエレメントでは複数のセルをまとめた行を１つのまとまりとして扱う（Repeating Groupで表を作成する場合は、各セルの中身を分割して列のように見せる必要がある）
- Tableエレメントは標準で、ヘッダー（データを反映しない静的な行）が作成される
- Tableエレメントでは、下スクロール時にヘッダーが上部に固定される
- Tableエレメントでは、列（カラム）の幅などを一括で調整できる（Repeating Groupエレメントの場合は、ヘッダー部分と動的コンテンツの部分で別々に調整が必要）
- 行や列をコピー&ペーストできる
３．Tableエレメントを利用するべき場面
公式サイトで推奨されているTableエレメントを利用するべき場面は以下の通り。
- ログインアカウントに関連するリスト情報を表示する場合
- 検索結果を表示する場合
- 商品などのリストや価格表を表示する場合
- ダッシュボードを表示する場合
- アプリケーションの管理者向けにアカウント一覧などを表示する場合
逆にRepeating Groupエレメントを利用するべき場面は以下の通り。
- 列（カラム）を１つしか必要としない場合
- カードデザイン（縦長のパネルなど）を表示する場合
- 複数のヘッダーや列を必要としないメイソンリーグリッド（Masonry grids）形式でデータを表示する場合
- その他マーケットアプリにてアイテムを表示する場合など
４．Tableエレメントの導入方法
最後にTableエレメントの導入方法を簡単に紹介します。簡潔さを重視し、Tableエレメントで動的なコンテンツを表示するための最低限の操作のみ紹介します。
前提
Tableエレメントに表示するデータとして以下のようなDBテーブルとサンプルデータを作成しています。
データベーステーブル
サンプルデータ
① Tableエレメントの配置
エディター画面の左のメニューからTableエレメントを選択し、任意の場所に配置します。
② 列の数の調整とヘッダーの作成
不要な列を右クリックして削除し、列の数を調整します。
ヘッダー（番号が０の行）にTextエレメントを配置し、任意の内容に編集します。
※テキストの配置は調整しています。
③ データの表示
Tableエレメント全体を選択し（Tableエレメントの左上の３本線をクリック）、Tableエレメントで表示するデータ元（DBテーブル）を選択します。
Tableエレメントの番号が１の行にTextエレメントを配置します。
配置したTextエレメントに、動的コンテンツ（dynamic data）として、表示したいDBテーブルのデータを選択します。
完成イメージ
以上の操作を完了しプレビュー表示すると、自動的にDB内のデータが読み込まれ以下のような表が表示されます。表示するデータを制御する場合は、「③ データの表示」でTableエレメントのデータ元を選択する際に、条件を組み込みます。
終わりに
本記事の不明点や誤っている箇所、他の解説リクエストなどありましたらコメント頂けますと幸いです。