Table COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – 行と列のセルを表示する

Table COMPは、属性 DAT (Cell / Row / Col / Table Attributes) と Values DAT でセル内容と見た目を定義する、行 × 列のグリッド型 Panel COMPです。List COMP がコールバック駆動のスクロール可能テーブルであるのに対し、Table COMP は属性 DAT による宣言的なテーブル定義を採用しており、セルごとの色・フォント・配置・値を DAT データから直接マッピングして表示する用途に向きます。

主な用途 🎯

行 × 列のセルを並べたテーブル UI を Cell / Row / Col / Table Attributes DAT で属性駆動的に構成
Values DAT によるセル内容供給 でテキスト・数値フィールド型セルの中身を一元管理
Table Rows / Table Columns による動的なセル数指定 でデータ件数に応じてグリッドを伸縮
Table Align によるセル配置順序の制御 (横並び / 縦並び / グリッド) でレイアウト方向を切替
Info Format = State Grid と Info DAT 連携 でテーブルの状態 (選択セル等) を 2 次元グリッドで取得

データフロー 🔄

Cell / Row / Col / Table Attributes DAT (各セルの色・フォント・配置等を属性指定) + Values DAT (フィールド型セルの値)
 ↓
Table COMP (Table Rows × Table Columns でグリッド構成 + Table Align で配置順序決定)
 ↓
Panel として描画
 ↓
Info DAT で状態取得

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Table Page 📋

属性 DAT 群 `.attribute_dats` 📎

セル / 行 / 列 / テーブル全体の属性を定義する DAT 群 + フィールド型セルの値供給 DAT:

Cell Attributes DAT: attributes — セルごとに 1 行ずつ属性を定義する DAT のリスト。フォント・色・配置・幅・高さ等を指定
Row Attributes DAT: rowattributes — 行ごとに 1 行ずつ属性を定義する DAT のリスト。行単位で共通の見た目を一括指定
Col Attributes DAT: colattributes — 列ごとに 1 行ずつ属性を定義する DAT のリスト。列単位で共通の見た目を一括指定
Table Attributes DAT: tableattributes — テーブル全体に適用する 1 枚の属性 DAT への参照。Cell / Row / Col より優先度が低いベースライン属性
Values DAT: values — セルがフィールド型 (テキスト入力等) のとき、その内容を供給する DAT のリスト

テーブルサイズ `.table_dimensions` 🔢

テーブルの行数 × 列数:

Table Rows: tablerows — テーブルの行数。データソースの件数に合わせて動的にバインドする運用が一般的
Table Columns: tablecols — テーブルの列数。複数カラムのテーブル (名前 / 値 / 単位等) を構成する際に指定

Table Align `.tablealign` 🧭

セルの配置順序 (レイアウト方向) を決めるメニューパラメータ:

Table Align: tablealign — セルが並ぶ順序を指定。Children Page の align パラメータと同様に、左から右 / 右から左 / 上から下 / 下から上 / グリッド方向等を切替えてレイアウト方向を決定する

Font Size Unit `.fontsizeunit` 🔠

属性 DAT で指定するフォントサイズの単位

項目	内部名	説明
Pixels	`.pixels`	フォントサイズをピクセル単位で解釈
Points	`.points`	フォントサイズをポイント単位で解釈 (72ppi で 1 ポイント = 1/72 インチ、小数指定可)

Info Format `.infoformat` 📊

接続した Info DAT 経由でテーブル状態を取得するときの表示形式

項目	内部名	説明
State Column	`.statecol`	状態情報を 1 列に並べて出力。セルの並び順は Table Align パラメータが決定
State Grid	`.stategrid`	テーブルのレイアウトをそのまま反映した 2 次元グリッド形式で状態情報を出力

Table Offset `.tableoffset` ↔️

テーブル描画位置のオフセット (Table COMP 自体ではなく内部テーブルが動く):

X: tableoffsetx — テーブルを水平方向にオフセット。Children Page の crop がオンのときは Table COMP の境界でクリップされる
Y: tableoffsety — テーブルを垂直方向にオフセット。Children Page の crop がオンのときは Table COMP の境界でクリップされる

Table Reset `.tablereset` 🔄

Table COMP の強制再構築パルス:

Table Reset: tablereset — パルスボタン。Cell / Row / Col / Table Attributes DAT 等の定義 DAT が変化したのに自動再描画されない場合、このパルスで Table COMP を強制リフレッシュ

Panel / Look / Children Pages 🪟

Panel COMP からの継承 `.panel_inherited` 📋

Table COMP は Panel COMP の特殊化として動作するため、Panel COMP の全パラメータを継承:

Panel Page: display / enable / helpdat / cursor / multitouch / uvbuttons / mousewheel / resize / reposition / scrolloverlay 等、Panel COMP 共通のインタラクション設定一式
Look Page: bgcolor / bgalpha / top (背景 TOP) / topfill / border* / opacity / composite / disablecolor 等、見た目と合成方式の設定一式
Children Page: align / spacing / alignmax / margin / justifyh / justifyv / fit / scale / offset / crop / phscrollbar / pvscrollbar / scrollbarthickness 等、子パネルのレイアウト設定一式 (Table COMP では描画されるセルのクリップ・スクロール挙動に影響)
詳細は公式リファレンス: 各パラメータの完全な説明は Panel COMP 公式 docs を参照

Common Page 🔧

Parent Shortcut `.parentshortcut` 🔗

コンポーネント内部からこの COMP へのパスとして使えるショートカット名:

Parent Shortcut: コンポーネント内部の任意の場所からこの COMP を参照する際のショートカット名 (parent.<name> 形式で利用可能)

Global OP Shortcut `.opshortcut` 🌐

プロジェクト全体からこの COMP を参照するグローバル名:

Global OP Shortcut: プロジェクト内のあらゆる場所からこの COMP へのパスとして使えるグローバル名 (op.<name> 形式で利用可能)

Internal OP `.iop` 📎

Internal OP シーケンス (コンポーネント内部 OP への名前付き参照):

Shortcut: iop0shortcut — コンポーネント内部の OP に対するショートカット名
OP: iop0op — このコンポーネント内部の対象 OP へのパス

Node View `.nodeview` 👁️

ノードビューア (Network エディタ上のサムネイル) に表示する内容を決定

項目	内部名	説明
Default Viewer	`.default`	コンポーネントタイプ標準のビューアを表示
Operator Viewer	`.opviewer`	指定した任意 OP のノードビューアを表示

Operator Viewer `.opviewer` 🖼️

Operator Viewer モード時に表示する対象 OP:

Operator Viewer パス: Node View が opviewer モードのとき、そのビューア内容として表示する OP のパス

Cloning `.cloning` 🧬

マスター COMP の内容を複製する Cloning 設定:

Enable Cloning: enablecloning — Clone Master の内容を継続的に複製するかを切替
Enable Cloning Pulse: enablecloningpulse — その瞬間だけ Clone Master の内容を瞬時に複製
Clone Master: clone — 複製元となるマスターコンポーネントへのパス

Load on Demand `.loadondemand` ⏳

必要時のみメモリにロードする遅延ロード設定:

Load on Demand: オンの場合、このコンポーネントは実際に必要となるまでメモリにロードされない (起動時間・メモリ消費の最適化)

External .tox `.externaltox` 💾

外部 .tox ファイルとの連携設定:

Enable External .tox: enableexternaltox — 起動時に外部 .tox ファイルからロード
Enable External .tox Pulse: enableexternaltoxpulse — 外部 .tox ファイルから即時リロード
External .tox Path: externaltox — ディスク上の .tox ファイルへのパス
Reload Custom Parameters: reloadcustom — コンポーネントのカスタムパラメータ値を再読み込み
Reload Built-In Parameters: reloadbuiltin — コンポーネントの組み込みパラメータ値を再読み込み
Save Backup of External: savebackup — .toe ファイル内に外部 .tox のバックアップコピーを保存
Sub-Component to Load: subcompname — .tox 内部の特定 COMP のみを取り出してロード

Relative File Path Behavior `.relpath` 📁

このコンポーネント内部での相対ファイルパスの解決基準

項目	内部名	説明
Use Parent’s Behavior	`.inherit`	親コンポーネントの設定を継承
Relative to Project File (.toe)	`.project`	`.toe` プロジェクトファイルからの相対パスとして解決
Relative to External COMP File (.tox)	`.externaltox`	外部 `.tox` ファイルからの相対パスとして解決

Parameter Color Space `.parmcolorspace` 🎨

このコンポーネント内の色パラメータをどの色空間として解釈するか

項目	内部名	説明
sRGB	`.srgb`	標準的な sRGB ガンマ空間
sRGB – Linear	`.srgblinear`	sRGB プライマリでガンマ線形 (1.0)
Rec.601 (NTSC)	`.rec601ntsc`	Rec.601 NTSC 規格の色空間
Rec.709	`.rec709`	HDTV 用 Rec.709 色空間
Rec.2020	`.rec2020`	UHDTV / HDR 向け Rec.2020 広色域
DCI-P3	`.dcip3`	デジタルシネマ DCI-P3 色空間
DCI-P3 (D60)	`.dcip3d60`	D60 白点 DCI-P3
Display-P3 (D65)	`.displayp3d65`	D65 白点 Display-P3 (Apple ディスプレイ等)
ACES2065-1	`.aces2065-1`	ACES アーカイブ用色空間 (AP0 プライマリ)
ACEScg	`.acescg`	ACES CG 作業用色空間 (AP1 プライマリ)
Passthrough	`.passthrough`	色変換を行わず値をそのまま扱う

Parameter Reference White `.parmreferencewhite` ⚪

色パラメータの基準白色の扱い

項目	内部名	説明
Default For Color Space	`.default`	選択した色空間のデフォルト基準白を使用
Use Parent Panel	`.useparent`	親パネルの基準白設定を継承
Standard (SDR)	`.sdr`	標準ダイナミックレンジ (SDR) 基準白
High (HDR)	`.hdr`	ハイダイナミックレンジ (HDR) 基準白
UI	`.ui`	UI 表示用の基準白

実践アイデア 💡

Example 1: 属性 DAT による色付きテーブル UI の構築 🎨

Table DAT (属性定義: bgcolor / textcolor / fontsize 等) → Table COMP の Cell Attributes DAT に参照 → Values DAT で各セルの表示文字列を供給 → Panel として描画

プリセット一覧・ステータスダッシュボード等、行ごとに色分けされたテーブル UI を構築する基本フロー。Cell Attributes DAT に bgcolorr / bgcolorg / bgcolorb / textcolorr 等の列を含む Table DAT を渡し、Values DAT で各セルの表示文字列を別途指定することで、見た目と中身を分離した宣言的なテーブル定義ができます。

ネットワーク内に Table COMP を配置 (Tab メニュー → COMP → Table、または右クリック → Add Operator)
Table DAT を作成し、1 列目にセル名・2 列目以降に bgcolorr / bgcolorg / bgcolorb / textcolorr / fontsize 等の属性列を持つ表を作成
Table COMP の Cell Attributes DAT パラメータに先ほどの Table DAT のパスを指定
別の Table DAT を Values DAT 用に作成し、各セルに表示するテキストを格納
Table COMP の Values DAT パラメータに値供給用 Table DAT を指定
Table Rows / Table Columns を属性 DAT のサイズに合わせて設定
Table Reset パルスを 1 回押してテーブルを再構築 → 色付きセルが Panel に描画される

Example 2: Row Attributes DAT による行単位スタイル一括指定 🪄

Row Attributes DAT (行ごと 1 行の属性指定) → Table COMP の Row Attributes DAT に参照 → 全列で行単位スタイルが反映 → セル数を Table Rows / Columns で指定

全セル分の属性を Cell Attributes DAT に書くのは件数が増えるとメンテが大変です。行単位でフォント・背景色等が共通でよい場合は、Row Attributes DAT を使うと Table Rows 行 × 属性列の小さな DAT で全列に行単位スタイルが適用されます。Col Attributes DAT も同様に列単位の一括指定が可能。

Table DAT を作成し、行数分だけの行 (例: 10 行) と bgcolorr / bgcolorg / bgcolorb / fontsize 等の属性列を用意
Table COMP の Row Attributes DAT パラメータに上記 Table DAT のパスを指定
Table Rows を属性 DAT の行数に合わせ、Table Columns は表示したい列数に設定
1 行分の属性指定で全列のセルが同じスタイルになることを確認
列単位のスタイルが必要な場合は別途 Col Attributes DAT を作成し Col Attributes DAT パラメータに指定 (Row + Col の合成スタイルが効く)

Example 3: State Gridで状態を2次元取得 📡

Table COMP (Info Format = State Grid) → Info DAT (Table COMP を参照) → 2 次元グリッド形式でセル状態を取得 → Switch / Logic 等で下流処理

テーブル UI 上のセル選択状態・ロールオーバー状態を別オペレータから参照したい場合、Info DAT を Table COMP に接続して状態をテーブル形式で取得できます。Info Format を State Grid に設定すると Table COMP のレイアウトをそのまま反映した 2 次元グリッドで状態が返り、座標 (row, col) から直接セルを引けるため可読性が高くなります。

Table COMP の Info Format パラメータを State Grid に設定
Info DAT を作成し、OP パラメータに Table COMP のパスを指定
Info DAT の出力テーブルが Table COMP の行 × 列レイアウトと同じ形状になることを確認
下流の DAT Execute DAT / Logic CHOP 等で (row, col) 単位でセル状態を参照
状態を 1 列で取得したい場合は Info Format を State Column に切替 (Table Align パラメータが並び順を決定)

Example 4: OffsetとPage Cropでスクロール風切替 🪟

Table Offset X/Y で描画位置をシフト → Children Page の Crop = On で Table COMP 境界外をクリップ → 見かけ上のセル領域がスクロール

Table COMP には専用のスクロール機構がないため、大量セルの一部だけを表示するには Table Offset のオフセット値を CHOP 等から駆動し、Children Page の Crop をオンにすることで Table COMP の境界外を非表示にできます。スクロール UI のような体験を簡易的に作る手法。

Table COMP の Children Page で Crop パラメータを On に設定
Table Offset の X / Y を CHOP / Slider COMP 等から駆動できるようにエクスポート
Slider COMP の値を Table Offset Y にバインドすると垂直方向の擬似スクロール
Slider COMP の値を Table Offset X にバインドすると水平方向の擬似スクロール
スクロール挙動として本格的なものを作りたい場合は、コールバック駆動の List COMP を検討

Info COMP情報 📊

Table COMP は Info CHOP / Info DAT による詳細情報取得に対応しています。

COMP 固有情報 📦

num_children: コンポーネント内部の子 OP の総数
num_dats: 内部 DAT の数
num_chops: 内部 CHOP の数
num_tops: 内部 TOP の数
num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数
cook_abs_frame: 絶対時間基準でのクックフレーム番号
cooked_this_frame: 現在のフレームでクックされた場合は 1

Panel COMP 固有情報 📊

num_children: Table COMP 内部の子オペレータ数
panel_width: Table COMP パネルの幅 (ピクセル単位)
panel_height: Table COMP パネルの高さ (ピクセル単位)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: 属性 DAT を変更してもテーブルが再描画されない
✅ Solution:

Table COMP の Table Reset パルスを 1 回押して強制再構築
DAT Execute DAT を属性 DAT に接続し onTableChange 内で op('table1').par.tablereset.pulse() を呼ぶことで自動 Reset を発火
Cell Attributes DAT / Row Attributes DAT / Col Attributes DAT のパスが有効な DAT を指しているか確認 (空の場合は属性が適用されない)

❌ Problem: セル数と属性 DAT の行数が一致せず表示が崩れる
✅ Solution:

Table Rows / Table Columns の値と、Cell Attributes DAT の行数 (= 期待されるセル総数) が一致しているか確認
Row Attributes DAT を使う場合は行数 = Table Rows、Col Attributes DAT を使う場合は行数 = Table Columns である必要がある
Values DAT のサイズも Table Rows × Table Columns に合わせ、フィールド型セルの値供給を過不足なくする

❌ Problem: Info DAT で取得した状態がテーブルレイアウトと違う形で出てくる
✅ Solution:

Info Format パラメータを確認。State Column は 1 列、State Grid は 2 次元グリッドで状態が返る
State Column モードでは Table Align パラメータがセルの並び順を決定するため、Table Align を変更すると Info DAT 出力の順序も変わる
Info DAT の OP パラメータが Table COMP 自身を指しているか再確認

❌ Problem: Table COMP の境界より外にテーブルがはみ出して描画されない
✅ Solution:

Children Page の Crop がオンの場合、Table COMP のサイズより外側はクリップされる仕様。一時的にオフにして全体表示を確認
Table Offset X / Y がゼロ以外の場合、内部テーブルがオフセットしてはみ出ている可能性があるためゼロにリセット
Table Rows / Table Columns と Cell Attributes DAT の w / h (セル幅・高さ) の合計が Table COMP のサイズに収まっているか確認

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 行と列のセルを表示する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Table Page 📋

属性 DAT 群 .attribute_dats 📎

テーブルサイズ .table_dimensions 🔢

Table Align .tablealign 🧭

Font Size Unit .fontsizeunit 🔠

Info Format .infoformat 📊

Table Offset .tableoffset ↔️

Table Reset .tablereset 🔄

Panel / Look / Children Pages 🪟

Panel COMP からの継承 .panel_inherited 📋

Common Page 🔧

Parent Shortcut .parentshortcut 🔗

Global OP Shortcut .opshortcut 🌐

Internal OP .iop 📎

Node View .nodeview 👁️

Operator Viewer .opviewer 🖼️

Cloning .cloning 🧬

Load on Demand .loadondemand ⏳

External .tox .externaltox 💾

Relative File Path Behavior .relpath 📁

Parameter Color Space .parmcolorspace 🎨

Parameter Reference White .parmreferencewhite ⚪