# テーブルコンポーネント

*スキルレベル: 中級*

## 開始する前に

* [データベース](https://help.adalo.com/ja/database)の設定方法を知っていること
* この機能を使用するには有料のAdaloプランは必要ありません

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXey0P9tYSSgLFRMBRiOTT1ZnxnFICQ1fHherWy-ACU6I5TWbE9kCij8JykbPDQOg_2WSPyTa6xNP5PGGsReRD8UpLTeptURObmIx28YM7o7vlQwF5C4COWB7tNLwhcCj_0mQ0I6CEXb67LkRkbWGeMUKN26?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### テーブルにデータを追加する

テーブルにデータを追加するには、サイドバーで最初に表示されるドロップダウンで追加したいコレクションを選択するだけです。リスト用の典型的なコントロールがすべて利用可能です：フィルター、ソートなど。また、テーブルにのみ存在する新しいオプションも表示され、1ページあたりのアイテム数を指定できます。Adaloのほとんどのリストが無限にスクロールするのに対し、テーブルは明示的なページネーションを持ち、次へ、前へのボタンがあります。

### ページネーション

テーブルのページングはAdaloコレクションおよびXanoで構築されたアプリに対応しています。Xanoでバックアップされたアプリを構築している場合は、ページングを有効にするためにGET APIエンドポイントでページングを利用する必要があります。

各APIサービスには独自のページング形式があるため、外部コレクションではテーブルのページングが機能しません。これらのコレクションでは、APIエンドポイントから返されるすべてのレコードが表示され、他のAdaloのリストと同様です。

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdl9kBMfY4mAheY5u4jWpbhP7Fp4mcKz1futqOD09_UBvl3TCa0HbqzcaRAbFHPit7ZPvOYt1KxDbPq2ii2HgbXRmASqmc3vStd6qU-Y8v_KK5SmwPqFJOp2cHYdjsHMGtjhOkD8gMPbAOsDqqvdhFEivY?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### 列の設定

テーブルをコレクションに接続したら、表示する利用可能なプロパティを列として選択できます。プロパティを追加するには ***“ADD COLUMN”*** をクリックします。プロパティをドラッグアンドドロップして並べ替えることもできます。

{% hint style="info" %}
選択した列の数が画面に収まらない場合、ユーザーは水平にスクロールできます。
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfEAOmb0Q5qTkr-JasIhyRvZYMBE0i5jI9XVH_n2VoF6KCxEYRpnn-AJa7maIh8uTV993jancYaqWKMhyRhRt9M-IjwzX8EQ8qgbNhwBZfUVNbyap9q_hE4BX0T-lQUEECG0_tXsY6-KsbQNr9JnPlj0Kg1?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### 列のオプション

各プロパティタイプには独自の書式オプションがあります。たとえば、日付プロパティを選択すると、日付の書式オプションが表示されます。また、各列の幅を設定することもできます。

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeSq9FeDTt5RYfq10XRxl7E5FbXVSulR6Ep0qpSFXJQUYc1J7tEzqjC8Fd3-q3F9BxBgmEoqxt5B6PJXMLRQKaliVhDqXD2WKRB6pZ-fNpgOFzCBHcUb1YnAarpJVPcR10pW9fgkYkhW59f-efTJ8Fd4DHa?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### テーブルとリレーションシップ

テーブルに関係性を追加する際には、考慮すべき制限事項があります。まず、現時点ではテーブル内の関係性を1つのレベルまでしか掘り下げることを許可していません。関係性ツリーの深さが増すにつれ、クエリが複雑になり、パフォーマンスが低下することがよくあります。通常、テーブルは多くのデータを表示するために使用されるため、パフォーマンスを維持するために1つのレベルの関係性制限を実装することにしました。

リスト内のリストも読み込みを遅くする傾向があるため、これを防ぐための別の取り組みとして、多対多の関係性についてのみカウントを表示することを許可しています。以下の例では、各投稿に関連付けられたタグがありますが、タグの名前ではなく、その数のみを表示できます。

### クリックアクション

テーブルの各行にクリックアクションを追加するには、「アクションの追加」ボタンをクリックします。クリックアクションは行全体に対して適用されます。現時点では、列ごとに固有のアクションを設定することはできません。

### テーブルのスタイリング

「テーブルスタイル」の下には、テーブルの色、境界線、角丸、影などをカスタマイズするための多くのオプションが表示されます。