# 画面設計書 26-Tables

## 概要

本ドキュメントは、Dear ImGuiのデモセクション「Tables & Columns」の設計書です。Demo Window内の折りたたみセクションとして、テーブルとカラムの高度な使用方法をデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：本セクションは、Dear ImGuiのテーブルシステムの包括的なリファレンスです。ImGuiのテーブルは、データグリッド、スプレッドシート、プロパティエディタなど、表形式のデータを表示・編集するためのUIに使用されます。列のリサイズ、並び替え、ソート、フィルタリング、行の背景色設定など、本格的なテーブルUIに必要な機能を網羅しています。データベースのCRUD画面やログビューアなどを実装する際の参考となります。

**画面へのアクセス方法**：Demo Windowの「Tables & Columns」CollapsingHeaderをクリックすることでセクションが展開されます。DemoWindowTables関数がShowDemoWindow()から呼び出されることで表示されます。

**主要な操作・処理内容**：
1. Basic - 基本的なテーブルの作成方法
2. Borders, background - 罫線と背景色
3. Resizable, stretch - リサイズ可能なストレッチ列
4. Resizable, fixed - リサイズ可能な固定幅列
5. Resizable, mixed - ストレッチと固定幅の混合
6. Reorderable, hideable, with headers - 並び替え・非表示・ヘッダー
7. Padding - パディング設定
8. Sizing policies - サイズポリシー
9. Vertical scrolling, with clipping - 垂直スクロールとクリッピング
10. Horizontal scrolling - 水平スクロール
11. Columns flags - 列フラグ
12. Columns widths - 列幅
13. Nested tables - ネストテーブル
14. Row height - 行高さ
15. Outer size - 外部サイズ
16. Background color - 背景色
17. Tree view - ツリービュー
18. Item width - アイテム幅
19. Custom headers - カスタムヘッダー
20. Context menus - コンテキストメニュー
21. Synced instances - 同期インスタンス
22. Sorting - ソート機能
23. Advanced - 高度な機能

**画面遷移**：Demo Windowの一部として表示されます。CollapsingHeaderで折りたたみ/展開可能です。各サブセクションはTreeNodeで階層化されています。

**権限による表示制御**：本セクションでは権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 172 | BeginTable | 主機能 | テーブルの開始 |
| 173 | EndTable | 主機能 | テーブルの終了 |
| 174 | TableNextRow | 主機能 | 次の行に移動 |
| 175 | TableNextColumn | 主機能 | 次の列に移動 |
| 177 | TableSetupColumn | 主機能 | 列の設定 |
| 179 | TableHeadersRow | 主機能 | ヘッダー行の出力 |
| 181 | TableGetSortSpecs | 補助機能 | ソート仕様の取得 |
| 182 | TableSetBgColor | 補助機能 | セル背景色の設定 |

## 画面種別

デモセクション（CollapsingHeader）

## URL/ルーティング

N/A（Dear ImGuiはImmediate Mode GUIライブラリのため、URL/ルーティングの概念は適用されません）

## 入出力項目

| 項目名 | 型 | 入力/出力 | 説明 |
|--------|-----|----------|------|
| なし | - | - | 本セクションは引数を受け取らない |

## 表示項目

### Basic セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| table1 | BeginTable | TableNextRow + TableSetColumnIndexパターン |
| table2 | BeginTable | TableNextRow + TableNextColumnパターン |
| table3 | BeginTable | TableNextColumnのみのパターン |

### Borders, background セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| フラグチェックボックス | CheckboxFlags | RowBg, Borders各種のON/OFF |
| table1 | BeginTable | 各種罫線オプションのプレビュー |

### Sizing policies セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| サイジングポリシー選択 | BeginCombo | SizingFixedFit/Same, SizingStretchProp/Same |
| サンプルテーブル | BeginTable | 各ポリシーの動作プレビュー |

### Sorting セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| ソートテーブル | BeginTable | ID/Name/Quantity列でのソート |
| データ行 | TableNextRow | MyItem構造体のデータ表示 |

## イベント仕様

### 1-テーブルの作成

BeginTable("table_id", column_count, flags)でテーブルを開始します。EndTable()で終了します。BeginTableがfalseを返した場合、テーブルは表示されません。

### 2-列のセットアップ

TableSetupColumn("Column Name", flags, width)で列を定義します。TableHeadersRow()でヘッダー行を出力します。

### 3-行と列の操作

TableNextRow()で新しい行を開始します。TableNextColumn()またはTableSetColumnIndex(column)で列を選択し、ウィジェットを配置します。

### 4-列のリサイズ

ImGuiTableFlags_Resizableを指定すると、列の境界線をドラッグしてリサイズできます。ダブルクリックで自動フィットします。

### 5-列の並び替え

ImGuiTableFlags_Reorderableを指定すると、ヘッダーをドラッグして列を並び替えできます。

### 6-列の非表示

ImGuiTableFlags_Hideableを指定すると、ヘッダーを右クリックで列の表示/非表示を切り替えられます。

### 7-ソート機能

ImGuiTableFlags_Sortableを指定し、TableGetSortSpecs()でソート仕様を取得します。SpecsDirtyがtrueの場合、データをソートしてSpecsDirty=falseに設定します。

### 8-背景色設定

TableSetBgColor(target, color)で行またはセルの背景色を設定します。ImGuiTableBgTarget_RowBg0/1、ImGuiTableBgTarget_CellBgを指定可能です。

## データベース更新仕様

N/A（本デモセクションはデータベースを使用しません。すべてのデータはローカル変数またはstatic変数で管理されます）

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|--------------|------|----------|----------------|
| なし | - | - | 本セクションではメッセージ表示なし |

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| CollapsingHeaderが折りたたまれている場合 | 早期リターンで処理をスキップ |
| BeginTableがfalseを返した場合 | テーブル内部コードをスキップ |

## 備考

- テーブルAPIはImGuiの中でも最も複雑な機能の一つ
- ImGuiTableFlagsで多くの動作をカスタマイズ可能
- ImGuiTableColumnFlagsで列ごとの設定が可能
- style.CellPaddingでセル内のパディングを調整
- style.Colors[ImGuiCol_TableHeaderBg]等でテーブル関連の色を変更可能
- ソートには静的変数s_current_sort_specsとqsortを使用（サンプルの制約）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: エントリーポイントを理解する

処理の起点となる関数を特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | imgui_demo.cpp | `imgui_demo.cpp` | DemoWindowTables関数（行5688-7796）がエントリーポイント |

**主要処理フロー**:
1. **行5691**: CollapsingHeader("Tables & Columns")で折りたたみセクションを開始
2. **行5695-5696**: TEXT_BASE_WIDTH/HEIGHTの計算
3. **行5700-5705**: Expand all / Collapse all ボタン
4. **行5709-5713**: Disable tree indentationオプション
5. **行5728-5789**: Basicセクション

#### Step 2: 基本的なテーブルを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imgui_demo.cpp | `imgui_demo.cpp` | Basicセクション（行5730-5789）を理解する |

**主要処理フロー**:
- **行5739-5751**: TableNextRow + TableSetColumnIndexパターン
- **行5756-5769**: TableNextRow + TableNextColumnパターン
- **行5778-5786**: TableNextColumnのみのパターン

#### Step 3: 罫線と背景色を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | imgui_demo.cpp | `imgui_demo.cpp` | Borders, backgroundセクション（行5793-5860）を理解する |

**主要処理フロー**:
- **行5798-5828**: ImGuiTableFlags_Bordersの各サブフラグ
- **行5831-5858**: フラグ適用後のテーブル描画

#### Step 4: ソート機能を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | imgui_demo.cpp | `imgui_demo.cpp` | MyItem構造体とソート関連（行5539-5594）を理解する |
| 4-2 | imgui_demo.cpp | `imgui_demo.cpp` | Sortingセクションを理解する |

**主要処理フロー**:
- **行5539-5537**: MyItemColumnID列挙型
- **行5539-5592**: MyItem構造体とCompareWithSortSpecs関数
- ソートセクション: TableGetSortSpecs()でソート仕様を取得し、SpecsDirty時にソート実行

#### Step 5: ヘルパー関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | imgui_demo.cpp | `imgui_demo.cpp` | PushStyleCompact/PopStyleCompact（行5597-5607）を理解する |
| 5-2 | imgui_demo.cpp | `imgui_demo.cpp` | EditTableSizingFlags（行5610-5649）を理解する |
| 5-3 | imgui_demo.cpp | `imgui_demo.cpp` | EditTableColumnsFlags（行5651-5674）を理解する |

### プログラム呼び出し階層図

```
ShowDemoWindow()
    |
    +-- DemoWindowTables()
            |
            +-- ImGui::CollapsingHeader("Tables & Columns")
            |
            +-- Button("Expand all") / Button("Collapse all")
            |
            +-- TreeNode("Basic")
            |       |
            |       +-- BeginTable("table1") / EndTable()
            |       |       +-- TableNextRow() + TableSetColumnIndex()
            |       +-- BeginTable("table2") / EndTable()
            |       |       +-- TableNextRow() + TableNextColumn()
            |       +-- BeginTable("table3") / EndTable()
            |               +-- TableNextColumn()のみ
            |
            +-- TreeNode("Borders, background")
            |       |
            |       +-- CheckboxFlags() [各種フラグ]
            |       +-- BeginTable() / EndTable()
            |               +-- TableSetupColumn() / TableHeadersRow()
            |
            +-- TreeNode("Resizable, stretch")
            +-- TreeNode("Resizable, fixed")
            +-- TreeNode("Resizable, mixed")
            |       |
            |       +-- TableSetupColumn(..., ImGuiTableColumnFlags_WidthStretch)
            |       +-- TableSetupColumn(..., ImGuiTableColumnFlags_WidthFixed)
            |
            +-- TreeNode("Reorderable, hideable, with headers")
            |       |
            |       +-- ImGuiTableFlags_Reorderable | Hideable
            |       +-- TableSetupColumn() + TableHeadersRow()
            |
            +-- TreeNode("Sorting")
            |       |
            |       +-- ImGuiTableFlags_Sortable
            |       +-- TableGetSortSpecs()
            |       +-- MyItem::SortWithSortSpecs()
            |
            +-- [その他多数のセクション]
```

### データフロー図

```
[入力]                      [処理]                           [出力]

なし -----------------> CollapsingHeader判定 ------------> セクション展開/折りたたみ
                              |
テーブルフラグ ---------> BeginTable() -------------------> テーブル表示
                              |
列フラグ -------------> TableSetupColumn() --------------> 列設定
                              |
データ配列 -----------> TableNextRow/Column() -----------> 行/セル表示
                              |
ヘッダークリック ------> TableGetSortSpecs() -------------> ソート仕様
                              |                                |
                              v                                v
                         SortWithSortSpecs() --------------> データ配列の並び替え
                              |
列境界ドラッグ --------> [内部処理] ----------------------> 列幅変更
                              |
列ヘッダードラッグ ----> [内部処理] ----------------------> 列順序変更
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | DemoWindowTables関数の実装（行5685-7796） |
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | MyItem構造体とヘルパー関数（行5522-5682） |
| imgui.h | `imgui.h` | ヘッダー | テーブル関連API定義（BeginTable, TableSetupColumn等） |
| imgui_tables.cpp | `imgui_tables.cpp` | ソース | テーブル関連関数の実装 |
