TDGrid
TDGridウィジェットは、データを複数の行と列からなる表（グリッド）形式で表示するウィジェットです。
ヘッダー・フッター、列ごとのセル、ソート、行・列の制御、スクロールイベントに対応しており、リストや表の画面を構成するときに使用します。
備考
このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。
定義・役割
TDGridウィジェットは、データを行と列に配置したスプレッドシート形式のグリッドを描画します。各列はセルウィジェットで構成し、データにバインディングして複数の行を繰り返しレンダリングします。ヘッダー・フッター行、列の表示・幅の調整、ソート、行ごとのスタイル（色・高さ・枠線・表示）、固定行（frozen）、スクロールイベントを提供します。
- カテゴリー: Layouts
- デフォルト構成: ヘッダー使用（
useHeader= オン）、フッター未使用（useFooter= オフ）、データ行0個
機能
| 機能 | 説明 |
|---|---|
| 行・列のデータ表示 | データをバインディングして複数の行を繰り返しレンダリングし、各列をセルウィジェットで構成します。 |
| ヘッダー / フッター | 表の上部のヘッダー行と下部のフッター行をオン・オフします。それぞれ高さ・背景・区切り線を設定できます。 |
| ソート | 指定した列（プロパティ）の値を基準に、昇順・降順・元の順序で行を並べ替えます。 |
| 列の制御 | 列ごとの表示・非表示と幅を（必要に応じてアニメーション付きで）調整し、列の順序を並べ替えます。 |
| 行ごとのスタイル | 行単位で表示・非表示、背景色、枠線、高さを指定します。 |
| 固定行 | 上端から指定した数の行を、スクロールとは無関係に固定します。 |
| スクロールイベント | スクロールの開始・更新・停止・端への到達時に動作を実行します。横スクロールが可能な場合は、ヘッダーに左右の移動ボタンを表示できます。 |
使い方
- 左側のウィジェットパレットでLayoutsカテゴリーを開きます。
- TDGrid項目をキャンバスにドラッグ&ドロップします。
- 右側のPropertiesパネルで列（
columns）を構成し、各セルの表示内容をデータにバインディングします。 - 必要に応じて
useHeader・useFooterでヘッダー・フッターをオンにし、frozenRowCount・rowHeightなどで表の見た目を調整します。 - スクロール動作が必要な場合は、スクロールイベントに実行するロジックやスクリプトを接続します。
プロパティ
注記
行の高さ・色・区切り線の太さなどの詳細な値は、以下のプロパティと共通のStyle設定で指定します。以下はPropertiesパネルに表示されるTDGridのプロパティです。
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
useHeader | ヘッダー行を使用するかどうか | true（オン） | true / false |
useHeaderLine | ヘッダーの区切り線を表示するかどうか | true | true / false |
useHeaderScrollButton | 横スクロールが可能な場合にヘッダーへ左右の移動ボタンを表示 | true | true / false |
headerHeight | ヘッダー行の高さ | デフォルトの行の高さ | 数値（px） |
headerBgColor | ヘッダーの背景色 | 未指定 | カラー |
headerLineColor | ヘッダーの区切り線の色 | 未指定 | カラー |
headerLineThickness | ヘッダーの区切り線の太さ | 1.0 | 数値（0.1〜10.0） |
padding | グリッド内側の余白 | 未指定 | 余白の値 |
primary | 主要なスクロールビューとして動作するかどうか | 未指定 | true / false |
columns | グリッドの列定義リスト | 未指定（空のリスト） | 列リスト |
rowHeight | データ行の高さ | デフォルトの行の高さ | 数値（0以上、px） |
frozenRowCount | 上端から固定する行数 | 0 | 数値（0〜20） |
useRowLine | データ行の区切り線を表示するかどうか | false（オフ） | true / false |
itemCount | データ行の数 | 0 | 数値（0以上） |
rowLineColor | 行の区切り線の色 | 未指定 | カラー |
rowLineThickness | 行の区切り線の太さ | 1.0 | 数値（0.1〜10.0） |
useFooter | フッター行を使用するかどうか | false（オフ） | true / false |
useFooterLine | フッターの区切り線を表示するかどうか | true | true / false |
footerHeight | フッター行の高さ | デフォルトの行の高さ | 数値（px） |
footerBgColor | フッターの背景色 | 未指定 | カラー |
footerLineColor | フッターの区切り線の色 | 未指定 | カラー |
footerLineThickness | フッターの区切り線の太さ | 1.0 | 数値（0.1〜10.0） |
注意・ヒント
ヒント
useHeaderをオンにすると最上部の行がヘッダーになり、useFooterをオンにすると最下部の行がフッターとして追加されます。残りの行がデータ領域で、バインディングしたデータの件数だけ繰り返しレンダリングされます。
注記
frozenRowCountは0〜20の範囲でのみ指定できます。実際に固定される行数は、データ行の数を超えることはありません。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体はTDGrid Widget Controlドキュメントで確認してください。