Table
最終更新
最終更新
Tableは主にデータ表示の際に使うコンポーネントです。Dashcombが提供しているTableは、通常のHTMLのTableをベースにして、管理画面の用途に合わせ、より豊富な機能を内蔵しています。
固定データはもちろん、バックエンドのデータソースから取得したURLや画像を含むさまざまなデータをそれぞれの形で表現できます。もちろん、列や行の並び順も可能です。列ごとのタイトルの設定や表示設定、行ごとのアクション設定もできます。
さらに、TableとDashcombが提供しているInput、SelectやButtonなどと組み合わせて使うと、さまざまな条件を設定しデータを絞り込んで表示することもできます。
Tableコンポーネントには、以下のプロパティが含まれています。
テーブルオブジェクトの変数名です。Tableをドラッグ＆ドロップすると、そのオブジェクトが自動的に table1、table2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{table1.data.length}} で table1 の行数を取得することができます。
トグルスイッチをONにすると、テーブルが非表示になります。
ラベル文字
テーブルの項目名を表すラベルテキストです。Table コンポーネントをドラッグ＆ドロップすると、自動的に Table に設定されます。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）Table を 検索結果 {{table1.data.length}} 件 に書き換えると、Tableの行数が表示されます。
ソースデータ
Tableソースデータの初期値は下記のようなJSON式の配列になっています。
上記のように値を固定的する設定以外にも、 {{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト table2 のソースデータに {{table1.data}} を入力することによって、table1 のデータがリアルタイムで table2 に反映することができます。
（例）事前にDBクエリ query1 を作成して、オブジェクト table1 のソースデータに {{query1.data}} を入力することで、query1 のデータがリアルタイムで table1 に表示することができます。
データが空欄、もしくは存在していなかった場合に表示するテキストを設定できます。
（例）nullの表示 の入力欄に「なし」を入力すると、テーブルの中のデータ欠損部分に「なし」が表示されます。
一度に表示するデータ件数を指定します。指定された値よりもデータ件数が多かった場合、ページングされます。
データの表示行数を、ページサイズで指定した行数に固定します。実際のデータ件数がページサイズに指定した値よりも少ない場合も、ページサイズに指定した行数が表示され、不足部分は空欄になります。
タイトル表示
トグルスイッチをOFFにすると、テーブルのタイトルが非表示になります。
コラム
テーブルの列の設定を表します。
コラム、ローアクションともにドラッグで順番の入れ替えができます。
フィールド
データソースのコラム名です。変更できません。
タイトル
Tableに表示される時の選択したコラムのタイトル名です。クリックして変更できます。
非表示
トグルスイッチをONにすると、選択したフィールドが非表示になります。
フィールドの行を上下にドラッグ＆ドロップすることで、画面表示時のコラムの左右の位置関係が決まります。
固定列の数
テーブルデータの左から数え、何列目まで固定して表示するかを指定します。初期値は0に設定されており、0からTableの最大列数まで指定できます。
CSVダウンロードボタンを表示
トグルスイッチをONにすると、CSV Downloadボタンがテーブルの左下に表示されます。ボタンをクリックすると、TableのデータがCSVファイルとしてダウンロードされます。
実行するごとにアクションを作成できます。また、作成したアクションボタンはドラッグで順序を入れ替えることができます。
テーブルのラベルテキストの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、テーブルのラベルが非表示になりますが、テーブル本体に影響はありません。
以下の項目で表示を調整できます。
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
利用できるオブジェクトとプロパティは、 で確認できます。
{{}} 構文については、 のページを参照してください。
詳細な設定方法はをご覧ください。
詳細な使い方はをご覧ください。
