# Table

Tableは主にデータ表示の際に使うコンポーネントです。Dashcombが提供しているTableは、通常のHTMLのTableをベースにして、管理画面の用途に合わせ、より豊富な機能を内蔵しています。

固定データはもちろん、バックエンドのデータソースから取得したURLや画像を含むさまざまなデータをそれぞれの形で表現できます。もちろん、列や行の並び順も可能です。列ごとのタイトルの設定や表示設定、行ごとのアクション設定もできます。

さらに、TableとDashcombが提供しているInput、SelectやButtonなどと組み合わせて使うと、さまざまな条件を設定しデータを絞り込んで表示することもできます。

## プロパティ

Tableコンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-f94cd44c781b0614294b66a16ad7279e30bfc7f8%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

テーブルオブジェクトの変数名です。Tableをドラッグ＆ドロップすると、そのオブジェクトが自動的に `table1`、`table2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{table1.data.length}}` で `table1` の行数を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、テーブルが非表示になります。

### データ <a href="#data" id="data"></a>

**ラベル文字**

テーブルの項目名を表すラベルテキストです。Table コンポーネントをドラッグ＆ドロップすると、自動的に `Table` に設定されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）`Table` を `検索結果 {{table1.data.length}} 件` に書き換えると、Tableの行数が表示されます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

**ソースデータ**

Tableソースデータの初期値は下記のようなJSON式の配列になっています。

```json
[
  {
    "id": 1,
    "name": "tonny",
    "age": 40,
    "email": "tonny@dashcomb.com"
  },
  {
    "id": 2,
    "name": "arai",
    "age": 30,
    "email": "arai@dashcomb.com"
  },
  {
    "id": 3,
    "name": "collin",
    "age": 50,
    "email": "collin@dashcomb.com"
  }
]
```

上記のように値を固定的する設定以外にも、 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `table2` のソースデータに `{{table1.data}}` を入力することによって、`table1` のデータがリアルタイムで `table2` に反映することができます。

（例）事前にDBクエリ `query1` を作成して、オブジェクト `table1` のソースデータに `{{query1.data}}` を入力することで、`query1` のデータがリアルタイムで `table1` に表示することができます。

#### nullの表示

データが空欄、もしくは存在していなかった場合に表示するテキストを設定できます。

（例）nullの表示　の入力欄に「なし」を入力すると、テーブルの中のデータ欠損部分に「なし」が表示されます。

#### ページサイズ

一度に表示するデータ件数を指定します。指定された値よりもデータ件数が多かった場合、ページングされます。

#### 固定サイズで表示

データの表示行数を、ページサイズで指定した行数に固定します。実際のデータ件数がページサイズに指定した値よりも少ない場合も、ページサイズに指定した行数が表示され、不足部分は空欄になります。

**タイトル表示**

トグルスイッチをOFFにすると、テーブルのタイトルが非表示になります。

**コラム**

テーブルの列の設定を表します。

コラム、ローアクションともにドラッグで順番の入れ替えができます。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-5e5317c3bae68f76d9b7ffd37f2ba95eb3df270f%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9Atable%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3.png?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="138">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>フィールド</td><td>データソースのコラム名です。変更できません。</td><td></td></tr><tr><td>タイトル</td><td>Tableに表示される時の選択したコラムのタイトル名です。クリックして変更できます。</td><td></td></tr><tr><td>非表示</td><td>トグルスイッチをONにすると、選択したフィールドが非表示になります。</td><td></td></tr></tbody></table>

フィールドの行を上下にドラッグ＆ドロップすることで、画面表示時のコラムの左右の位置関係が決まります。

詳細な設定方法は[コラムエディタ](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/region/column-editor.md)をご覧ください。

**固定列の数**

テーブルデータの左から数え、何列目まで固定して表示するかを指定します。初期値は0に設定されており、0からTableの最大列数まで指定できます。

**CSVダウンロードボタンを表示**

トグルスイッチをONにすると、CSV Downloadボタンがテーブルの左下に表示されます。ボタンをクリックすると、TableのデータがCSVファイルとしてダウンロードされます。

### テーブルアクション・ローアクション <a href="#action" id="action"></a>

実行するごとにアクションを作成できます。また、作成したアクションボタンはドラッグで順序を入れ替えることができます。

詳細な使い方は[アクションエディタ](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region/action-editor)をご覧ください。

### 外観

#### **ラベル**

テーブルのラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、テーブルのラベルが非表示になりますが、テーブル本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr></tbody></table>