テーブル

テーブルは表データの表示をするコンポーネントです。
テーブルは本体であるテーブルおよびカラム構成部品であるテーブルカラムによって構成されます。
テーブルカラムはテーブルのプロパティから任意に追加/削除できます。

ノート

• テーブルからデータの入力や更新を行うことはできません。
• 大量のレコードを扱う場合、ペイロードの制限やクライアントへの負荷が大きくなります。一度に表示するレコード数が10,000以上になると不安定になる可能性があります。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	幅	数値	565	width	number	565	コンポーネントの幅
3	高さ	数値	230	height	number	230	コンポーネントの高さ
4	X	数値		x	number		X座標位置
5	Y	数値		y	number		Y座標位置
6	色	文字列 カラーピッカー		color	string		コンポーネントの色
7	背景色	文字列 カラーピッカー		backgroundColor	string		背景色
8	ページネーション	真偽	OFF	pagination	boolean	false	ページネーション機能の有効/無効
9	選択	真偽	OFF	selecting	boolean	false	行選択機能の有効/無効
10	固定ヘッダ	真偽	ON	stickyHeader	boolean	true	ヘッダーの固定表示
11	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
12	ラベル色	文字列 カラーピッカー		labelColor	string		ラベルの文字色
13	ヘッダー色	文字列 カラーピッカー		headerColor	string		ヘッダーの背景色
14	ヘッダー行の高さ	数値	56	headerRowHeight	number	56	ヘッダー行の高さ
15	ヘッダーフォントサイズ	数値	14	headerFontSize	number	14	ヘッダーのフォントサイズ
16	ヘッダーワードラップ	選択 1.通常 2.OFF	OFF	headerWordWrap	string	off	ヘッダーの文字の折り返し設定
17	行ワードラップ	選択 1.通常 2.OFF	OFF	rowWordWrap	string	off	行内の文字の折り返し設定
18	偶数行の背景色	文字列 カラーピッカー		evenBackgroundColor	string		偶数行の背景色 [v3.3.0]で追加されたプロパティ
19	奇数行の背景色	文字列 カラーピッカー		oddBackgroundColor	string		奇数行の背景色 [v3.3.0]で追加されたプロパティ
20	行スタイル	JSON [詳細4]	[]	rowStyle	array of object	[]	行ごとのスタイル指定 [v3.3.0]で追加されたプロパティ
21	セルスタイル	JSON [詳細4]	[]	cellStyle	array of object	[]	セルごとのスタイル指定 [v3.3.0]で追加されたプロパティ
22	ページサイズ	数値	100	pageSize	number	100	1ページあたりの表示行数
23	値	表形式 [詳細1]		value	array of object		テーブルの値
24	選択値			selected	object、またはarray of object		選択されている行のデータ

ノート

• [id],[selected]プロパティはアクションで設定はできません。
• ページネーションにより1ページ当たりの表示件数を設定することができます。
• [rowStyle],[cellStyle]プロパティはアクションで値の取得はできません。

[詳細1] 値 (value)

テーブルの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、チェックボックスを選択して、[削除]ボタンをクリックします

month	company A	company B	company C	company D
02	20	52	72	34
03	5	33	90	55
04	55	30	81	66
05	30	11	62	22

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとテーブルにデータ表示できます。同様に値 (value) にはテーブルの現在の表示データの状態がオブジェクトの配列形式で入っています。

[
  {
    "month": "02",
    "companyA": 20,
    "companyB": 52,
    "companyC": 72,
    "companyD": 34
  },
  {
    "month": "03",
    "companyA": 5,
    "companyB": 33,
    "companyC": 90,
    "companyD": 55
  },
  {
    "month": "04",
    "companyA": 55,
    "companyB": 30,
    "companyC": 81,
    "companyD": 66
  },
  {
    "month": "05",
    "companyA": 30,
    "companyB": 11,
    "companyC": 62,
    "companyD": 22
  }
]

ノート

• カラムタイプによって、値（value）に設定する値が異なります。詳細は、テーブルカラムのページを参照してください
• テーブルカラムの並び順の変更を行った場合、変更前に登録したデータと変更後に登録したデータでプロパティ画面に表示される値 (value)の表示に下記の違いがあります。 ただし、オブジェクトのキーの並び順が異なるだけで、テーブルに表示されるデータには影響はありません。
  • 変更前に登録していたデータは、オブジェクトのキーの並び順は変更前の順番になります。
  • 変更後に新規追加したデータは、オブジェクトのキーの並び順は変更後の順番になります。

[詳細2]テーブルカラムのアクションからクリック行を取得する場合

テーブルカラムのアクションではイベント発生行を選択値(selected)プロパティによって取得できます。 選択値(selected)は、テーブル内で選択した行データを取得することができるプロパティとなります。 テーブルカラムのクリックイベント (onclick)で、選択値(selected)プロパティにより要素数1の行オブジェクト配列が取得できます。

[詳細3] テーブル外部のアクションから選択行を取得する場合

選択(selecting)プロパティをオンに設定した場合は、一番左カラムに選択チェックボックスを付与します。 行選択チェックボックスをONにした行データを、テーブル外部のアクションから選択値(selected)プロパティによって取得できます。 取得データ形式は、オブジェクトの配列形式です。

[詳細4] テーブルスタイル

以下のプロパティを利用することで、偶数行、奇数行および各行、各セルにスタイルを適用することが出来ます。
また、アクションと組み合わせることで、特定の条件のみスタイルを変更する動作などを実現することが出来ます。

• [偶数行の背景色]
• [奇数行の背景色]
• [行スタイル]
• [セルスタイル]

偶数行の背景色/奇数行の背景色の設定方法

偶数行の背景色/奇数行の背景色は、文字列またはカラーピッカーで背景色を指定します。
アクションで設定する場合は、[evenBackgroundColor]/[oddBackgroundColor]アクションプロパティに文字列で背景色を設定します。

$ui.<テーブルID>.evenBackgroundColor = "red";
$ui.<テーブルID>.oddBackgroundColor = "#039BE5";

ノート

先頭行は０行目として偶数行になります。

行スタイル/セルスタイルの設定方法

行スタイル/セルスタイルは、以下のようにJSON形式でスタイルを設定します。

行スタイル：

[
  {"row": "0", "backgroundColor": "blue"},
  {"row": "1", "backgroundColor": "#ffffffff"}
]

セルスタイル：

[
  {"row": "0", "column": "month", "backgroundColor": "blue", "color": "white"},
  {"row": "1", "column": "companyA", "backgroundColor": "#ffffff", "color": "#039BE5"}
]

アクションで設定する場合は、[rowStyle]/[cellStyle]アクションプロパティにオブジェクト配列でスタイルを設定します。

$ui.<テーブルID>.rowStyle = [
  {row: 0, backgroundColor: "blue"},
  {row: 1, backgroundColor: "#ffffffff"}
];

$ui.<テーブルID>.cellStyle = [
  { row: 0, column: "month", backgroundColor: "blue", color: "white"},
  { row: 1, column: "companyA", backgroundColor: "#ffffff", color: "#039BE5"}
];

オブジェクトのプロパティについては以下の通りです。

設定先	オブジェクトプロパティ	説明
rowStyle	row	1. スタイルを設定する行を数値または文字列で指定する 2. 一番最初の行は0番目として扱われる
	backgroundColor	1. テーブル行の背景色 2. 色名または6桁(8桁)のコードで指定する
cellStyle	row	1. スタイルを設定するセルの行を数値または文字列で指定する 2. 一番最初の行は0番目として扱われる
	column	1. スタイルを設定するセルの列をカラム ID で指定する
	color	1. テーブルセルの文字色 2. 色名または6桁(8桁)のコードで指定する
	backgroundColor	1. テーブルセルの背景色 2. 色名または6桁(8桁)のコードで指定する

ノート

• 各スタイルの表示優先順位は以下の通りです。
  1. セルスタイル
  2. 行スタイル
  3. 偶数行/奇数行の背景色
• color, backgroundColor以外のスタイルの動作についてはサポートしておりません。

設定されたスタイルをクリアする方法

設定先	設定する値	結果
evenBackgroundColorおよびoddBackgroundColor	以下のいずれかの値 1. null 2. ""	evenBackgroundColor, oddBackgroundColorがクリアされて、テーブルに設定された偶数行と奇数行の背景色が消えます。
rowStyleおよびcellStyle	以下のいずれかの値 1. [] 2. null 3. ""	rowStyle, cellStyleがクリアされて、テーブルに設定された行スタイルとセルスタイルが消えます。

イベント

なし