@mogura/moguchart-core 1.4.0 → 1.5.0

package/CHANGELOG.ja.md

@@ -5,6 +5,51 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2026-10-17
+
+### Added
+
+- **マルチカラムデータグリッド対応（Multi-Column Data Grid / WBS テーブル）**:
+  - 行ヘッダー領域を本格的な複数カラムのテーブルとして表示・操作できる新オプション `option.grid` を追加
+  - **標準組み込みカラムプリセット**:
+    - `wbs`: WBS階層コード（例: 1, 1.1, 1.2.1）
+    - `name`: タスク名・行名（階層ツリーインデント＋展開・折りたたみボタン内包）
+    - `startDate` / `startMonth` / `startDateTime`: タスク開始日・開始月・開始日時（単一タスクは開始日時、サマリー行・複数タスク行は最小開始日時を自動集計）
+    - `endDate` / `endMonth` / `endDateTime`: タスク終了日・終了月・終了日時（単一タスクは終了日時、サマリー行・複数タスク行は最大終了日時を自動集計）
+    - `duration`: 期間・工数（カレンダー日数スパン、時間単位モード時は時間・分フォーマット）
+    - `progress`: 進捗率（サマリー行・複数タスク行は期間加重平均進捗率を自動算出）
+  - **表示モードに応じた自動カラム適応**:
+    - 月単位モード（`pxPerMonth` 指定時）では `startDate` / `endDate` のヘッダーが自動的に「開始月」「終了月」（`Start Month` / `End Month`）に切り替わり、`YYYY/M` 形式で表示（終了月は前月表記に自動調整）
+    - 時間単位モード（`showTime: true` 時）では `startDate` / `endDate` のヘッダーが自動的に「開始日時」「終了日時」（`Start Date/Time` / `End Date/Time`）に切り替わり、時刻付き表示および時間単位の期間表示に連動
+  - **グリッドセルのインライン編集機能 (`option.grid.editable`, `cell-edit`)**:
+    - セルのダブルクリック（またはクリック：`editTrigger: 'dblclick' | 'click'`）による直感的なインライン編集に対応
+    - 組み込みエディタ種別（`text`, `number`, `date`, `datetime`, `month`, `select`）および独自の `HTMLElement` をマウントできるカスタムエディタ関数（`editor: (context) => HTMLElement`）をサポート
+    - セレクトボックス用選択肢（`editorOptions`）、数値入力の最小・最大・ステップ値（`editorMin`, `editorMax`, `editorStep`）、行・タスクごとの編集可否判定（`editable`）、カスタムセッター（`valueSetter`）に対応
+    - 単一タスクの `resizable`（`false` 時は日付・期間編集不可）、`movable`（`'none'` 時は日付・期間編集不可）、`progressResizable`（`false` 時は進捗率編集不可）の設定を考慮したセル編集可否判定に対応
+    - **編集可能セルと読み取り専用セルの視覚的区別**: インライン編集有効時、編集可能なセル（`.grid-cell-editable`: テキストカーソル・ホバーハイライト）と編集不可のセル（`.grid-cell-readonly`: サマリー行・複数タスク行の集計セルやWBS番号セル等のグレーアウト背景・半透明表示）を視覚的に区別（画像・PDFエクスポート時は自動的に通常表示へ正規化）
+    - グリッド有効時は行のドラッグ並び替えおよび行ヘッダーツールチップの表示対象をタスク名（ツリー）セル（`.grid-cell-name`, `.grid-tree-cell`）に限定し、インライン編集中は行のドラッグ並び替えを一時的に無効化することで入力欄内でのテキスト選択操作がスムーズに行えるよう改善
+    - 編集確定時に `cell-edit` および `rows-change` イベントを発火し、操作履歴（Undo / Redo: `command.type === 'cell-edit'`）と完全連動
+    - プログラムからセル編集を制御するパブリックメソッド `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()` を追加
+  - **`cornerContent` とグリッドヘッダーの2段レイアウト共存**:
+    - グリッド有効時に `customRendering.cornerContent` が指定されている場合、左上コーナー領域を上段（`cornerContent`）と下段（グリッドカラムヘッダー）の2段構成で同時表示するよう対応
+  - **カスタムカラム & 自由なデータマッピング**:
+    - `field` による任意オブジェクトプロパティのバインド、および `valueGetter(row, tasks, wbsCode)` / `valueSetter(row, newValue, tasks, column)` による高度なカスタム値の取得・更新に対応
+    - `formatter` による文字列整形、および `renderCell(value, row, tasks, locale)` による `HTMLElement` / HTML 文字列のカスタムレンダリングに対応
+  - **カラム幅のドラッグリサイズ (`column-resize`)**:
+    - カラムヘッダー右端のドラッグ操作により、各カラムの幅を直感的に個別リサイズ可能。リサイズ中・完了時に `column-resize` カスタムイベントを発火し、行クリックやオプション更新時もユーザーのリサイズ幅を保持しつつ、`option.grid.columns` からの明示的な列幅変更にも追従
+  - **スプリッターリサイズ ＆ グリッド内独立横スクロール同期**:
+    - グリッド領域とタイムライン領域を仕切るスプリッターリサイズを完全サポート
+    - カラム合計幅が表示枠を超える場合、トラックパッド横スワイプ、`Shift + ホイール`、またはグリッドヘッダー上のマウスホイール操作による独立横スクロールに対応。ヘッダーセルと各行セルが1pxのズレもなく同期して横スクロール
+  - **React / Vue ラッパーおよび公開ユーティリティの拡充**:
+    - `@mogura/moguchart-react` に `onColumnResize`, `onCellEdit`, `onRowsChange` イベント Props を追加
+    - `@mogura/moguchart-vue` に `@column-resize`, `@cell-edit`, `@rows-change` イベントおよび `startCellEdit`, `commitCellEdit`, `cancelCellEdit` 公開メソッドを追加
+    - グリッド計算・編集用ヘルパー関数（`calculateRowSummaryDates`, `normalizeGridColumns`, `getGridCellValue`, `formatGridCellValue`, `resolveColumnEditorType`, `isGridCellEditable`, `formatGridCellEditValue`, `applyGridCellEdit`）をエクスポート
+  - **多言語（i18n）自動連動 & 完全な後方互換性**:
+    - 日本語（`jaLocale`）および英語（`enLocale`）の言語切り替えと標準カラム名・期間単位が自動連動
+    - `option.grid` 未指定時は、従来の単一ヘッダー表示（`row.name`）として完全互換動作
+
+---
+
 ## [1.4.0] - 2026-10-11
 
 ### Added

package/CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2026-10-17
+
+### Added
+
+- **Multi-Column Data Grid Support (WBS Table)**:
+  - Added new option `option.grid` to display and interact with the row header area as a full-featured multi-column data table.
+  - **Built-in Standard Columns**:
+    - `wbs`: WBS hierarchical numbering code (e.g. 1, 1.1, 1.2.1).
+    - `name`: Task / row title with embedded hierarchical tree indentation and expand/collapse toggle.
+    - `startDate` / `startMonth` / `startDateTime`: Task start date, month, or date/time (automatically computes earliest start date for summary rows and multi-task rows).
+    - `endDate` / `endMonth` / `endDateTime`: Task end date, month, or date/time (automatically computes latest end date for summary rows and multi-task rows).
+    - `duration`: Duration / work span in calendar days (or formatted hours/minutes in hourly view mode).
+    - `progress`: Task progress percentage (automatically computes duration-weighted average progress for summary rows and multi-task rows).
+  - **Automatic View-Mode Column Adaptation**:
+    - In Monthly mode (`pxPerMonth` specified), `startDate` / `endDate` headers automatically switch to `Start Month` / `End Month` (`開始月` / `終了月`) and format values as `YYYY/M` (automatically adjusting exclusive end boundary dates to display the previous month).
+    - In Hourly / Time mode (`showTime: true`), `startDate` / `endDate` headers automatically switch to `Start Date/Time` / `End Date/Time` (`開始日時` / `終了日時`), displaying timestamps and time-based duration spans.
+  - **Inline Cell Editing (`option.grid.editable`, `cell-edit`)**:
+    - Support interactive inline cell editing triggered by double-click or single-click (`editTrigger: 'dblclick' | 'click'`).
+    - Built-in editor types (`'text'`, `'number'`, `'date'`, `'datetime'`, `'month'`, `'select'`) as well as custom DOM editor factories (`editor: (context) => HTMLElement`).
+    - Configurable select options (`editorOptions`), numeric bounds (`editorMin`, `editorMax`, `editorStep`), per-row/task editability predicates (`editable`), and custom value setters (`valueSetter`).
+    - Automatic linkage with single-task editability settings (`task.resizable === false` or `task.movable === 'none'` disables date/duration editing; `task.progressResizable === false` disables progress editing).
+    - Visual distinction between editable cells (`.grid-cell-editable`: text cursor and hover highlight) and read-only cells (`.grid-cell-readonly`: dimmed background and semi-transparent text for summary/multi-task aggregated cells and WBS codes; automatically normalized during PNG/PDF export).
+    - Restricts row drag-and-drop reordering and row header tooltips in grid mode to the task name / tree cell (`.grid-cell-name`, `.grid-tree-cell`), and temporarily suppresses row reordering while inline cell editing is active to allow smooth mouse drag text selection.
+    - Dispatches `cell-edit` and `rows-change` custom events upon committing changes, with full Undo / Redo history integration (`command.type === 'cell-edit'`).
+    - Added programmatic editing control methods: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, and `cancelCellEdit()`.
+  - **Custom Columns & Flexible Data Mapping**:
+    - Bind arbitrary row properties using `field`, or extract and update custom values using `valueGetter(row, tasks, wbsCode)` and `valueSetter(row, newValue, tasks, column)`.
+    - Format text outputs with `formatter(value, row, tasks, locale)`, or render rich `HTMLElement` / HTML strings with `renderCell(value, row, tasks, locale)`.
+  - **Two-Tier Corner Header Coexistence**:
+    - When both `option.grid` and `customRendering.cornerContent` are configured, the top-left corner automatically renders in a 2-tier layout with `cornerContent` in the upper row and grid column headers in the lower row.
+  - **Interactive Column Drag Resizing (`column-resize`)**:
+    - Intuitive drag-to-resize handles on column headers. Fires `column-resize` custom events during and upon completing resize operations, preserving user-resized widths across row interactions while also tracking programmatic `option.grid.columns` width updates.
+  - **Splitter Resizing & Synchronized Independent Grid Horizontal Scrolling**:
+    - Seamlessly works with the split pane resizer dividing the grid and timeline areas.
+    - When column widths exceed the grid area width, independent horizontal scrolling activates via trackpad swipe, `Shift + wheel`, or vertical wheel scrolling over the grid header area, with pixel-perfect synchronization (`transform: translateX(-gridScrollLeft)`) across header and row cells.
+  - **React / Vue Wrapper & Exported Utility Enhancements**:
+    - Added `onColumnResize`, `onCellEdit`, and `onRowsChange` event props to `@mogura/moguchart-react`.
+    - Added `@column-resize`, `@cell-edit`, and `@rows-change` emits plus `startCellEdit`, `commitCellEdit`, and `cancelCellEdit` public methods to `@mogura/moguchart-vue`.
+    - Exported grid calculation and editing helper utilities (`calculateRowSummaryDates`, `normalizeGridColumns`, `getGridCellValue`, `formatGridCellValue`, `resolveColumnEditorType`, `isGridCellEditable`, `formatGridCellEditValue`, `applyGridCellEdit`).
+  - **Multi-language (i18n) Synchronization & Complete Backward Compatibility**:
+    - Built-in Japanese (`jaLocale`) and English (`enLocale`) column headers and duration units adapt automatically to the active chart locale.
+    - When `option.grid` is omitted or disabled, the chart operates in classic single-header row name mode with zero breaking changes.
+
+---
+
 ## [1.4.0] - 2026-10-11
 
 ### Added

package/README.ja.md

@@ -79,6 +79,14 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - WBSサマリータスクにおける配下子タスクの計画日程・進捗率の自動集計
   - 全体鳥瞰ミニマップ（2D Canvas）との同期描画
   - タスク遅延計算（`calculateTaskDelay`）およびプロジェクト予実統計集計（`calculateProjectBaselineSummary`）関数
+- 📋 **マルチカラムデータグリッド（WBS テーブル）**:
+  - 行ヘッダー領域を本格的な複数列のテーブルとして表示・操作
+  - 標準組み込みカラム（WBS番号 `wbs`、タスク名 `name`、開始日・開始月・開始日時 `startDate`/`startMonth`/`startDateTime`、終了日・終了月・終了日時 `endDate`/`endMonth`/`endDateTime`、期間 `duration`、進捗率 `progress`）および表示モード（日・週・月・時間）に応じた自動ヘッダー名・フォーマット切り替え
+  - サマリー行・複数タスク行の最小開始日〜最大終了日、カレンダー期間、加重平均進捗率を自動算出
+  - **インラインセル編集**（`option.grid.editable: true`）：ダブルクリックまたはクリックによる直接編集、`text` / `number` / `date` / `datetime` / `month` / `select` の組み込みエディタおよびカスタムエディタ関数、単一タスクの `movable` / `resizable` / `progressResizable` 設定との自動連動、編集可能セル（`.grid-cell-editable`）と読み取り専用セル（`.grid-cell-readonly`）の視覚的区別、Undo/Redo 履歴連動、`cell-edit` イベントに対応
+  - カスタムカラム（`field`、`valueGetter`、`valueSetter`、`formatter`、`renderCell` によるHTML/DOMの直接描画）および `customRendering.cornerContent` との上下2段レイアウト共存
+  - カラム境界ドラッグによる幅のリサイズ（`column-resize` イベント）
+  - グリッド領域とタイムライン領域のスプリッターリサイズ＆グリッド内独立横スクロール同期（トラックパッド横スワイプ、Shift+ホイール、ヘッダー上のホイールに対応）
 - ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでのタスク/依存関係線削除・Undo/Redo・ズームショートカット
 
 ## パッケージ一覧（エコシステム）
@@ -777,6 +785,72 @@ const summary = calculateProjectBaselineSummary(rows)
 console.log(`計画タスク数: ${summary.totalBaselineTasks}, 遅延タスク数: ${summary.delayedTasksCount}, 最大遅延: ${summary.maxDelayDays}日`)
 ```
 
+### マルチカラムデータグリッド（WBSテーブル ＆ インライン編集）
+
+行ヘッダー領域を本格的な複数カラムのテーブルとして表示できます。WBS階層コード、タスク名、期間、進捗率、カスタム列を柔軟に構成できるほか、`editable: true` を設定することでセルのダブルクリック（またはクリック）によるインライン編集が可能です（編集可能セルには `.grid-cell-editable`、サマリー行や複数タスク行の集計セル・`wbs` 列などの読み取り専用セルには `.grid-cell-readonly` クラスが付与され視覚的に区別されます。単一タスク行の日付・期間・進捗セルはタスクの `movable` / `resizable` / `progressResizable` 設定とも自動連動します）。
+
+表示モードに応じて、`startDate` / `endDate` の列タイトルや表示フォーマット・エディタ種別は自動的に切り替わります（月単位モード時は「開始月」「終了月」、時間単位モード時は「開始日時」「終了日時」）。また、`customRendering.cornerContent` と併用した場合は、左上コーナー領域の上段に `cornerContent`、下段にグリッドカラムヘッダーが2段構成で表示されます。
+
+```javascript
+const option = {
+  // グリッド表示設定
+  grid: {
+    enabled: true, // グリッド表示を有効化 (デフォルト: columns 指定時は true)
+    width: 700, // グリッド領域全体の初期幅 (px)
+    splitterResizable: true, // スプリッターによるグリッド幅変更を許可 (デフォルト: true)
+    showBorders: true, // セル罫線を表示 (デフォルト: true)
+    editable: true, // セルのインライン編集を有効化 (デフォルト: false)
+    editTrigger: 'dblclick', // 編集開始トリガー ('dblclick' | 'click'、デフォルト: 'dblclick')
+    columns: [
+      { id: 'wbs', width: 60 }, // WBS番号 (1, 1.1, 1.2 など)
+      { id: 'name', width: 220 }, // タスク名 (ツリー開閉トグル付き・テキスト編集)
+      { id: 'startDate', width: 125 }, // 開始日 (日/月/日時エディタに自動連動)
+      { id: 'endDate', width: 125 }, // 終了日 (日/月/日時エディタに自動連動)
+      { id: 'duration', width: 80 }, // 期間 (数値エディタ)
+      { id: 'progress', width: 70 }, // 進捗率 (0〜100% 数値エディタ)
+      {
+        id: 'assignee',
+        title: '担当者',
+        width: 100,
+        field: 'assignee', // row.assignee を参照・更新
+        editor: 'select', // 'text' | 'number' | 'date' | 'datetime' | 'month' | 'select' またはカスタム関数
+        editorOptions: [
+          { label: '山田', value: '山田' },
+          { label: '佐藤', value: '佐藤' },
+          { label: '鈴木', value: '鈴木' },
+        ],
+        renderCell: (value) => {
+          // カスタムDOM要素のレンダリング
+          const badge = document.createElement('span')
+          badge.className = 'badge'
+          badge.textContent = value || '未設定'
+          return badge
+        },
+      },
+    ],
+  },
+}
+
+// セルのインライン編集確定イベントの購読
+chart.addEventListener('cell-edit', (event) => {
+  const { rowId, columnId, oldValue, newValue, row, rows } = event.detail
+  console.log(`行 ${rowId} の ${columnId} が更新されました:`, oldValue, '->', newValue)
+})
+
+// カラム幅リサイズイベントの購読
+chart.addEventListener('column-resize', (event) => {
+  const { columnId, width, previousWidth, isFinal } = event.detail
+  if (isFinal) {
+    console.log(`カラム ${columnId} の幅が ${width}px に変更されました`)
+  }
+})
+
+// プログラムからのセル編集制御
+chart.startCellEdit('row-1', 'name') // 編集開始
+chart.commitCellEdit('新しいタスク名') // 編集確定
+chart.cancelCellEdit() // 編集キャンセル
+```
+
 ### パブリックメソッド
 
 #### selectTask
@@ -1008,6 +1082,18 @@ import {
   calculateRowProgress,
   calculateWeightedRowProgress,
   calculateProjectProgress,
+  // 予実管理（ベースライン）計算
+  calculateTaskDelay,
+  calculateProjectBaselineSummary,
+  // マルチカラムグリッド計算・インライン編集ヘルパー
+  calculateRowSummaryDates,
+  normalizeGridColumns,
+  getGridCellValue,
+  formatGridCellValue,
+  resolveColumnEditorType,
+  isGridCellEditable,
+  formatGridCellEditValue,
+  applyGridCellEdit,
 } from '@mogura/moguchart-core'
 
 // 1. 各行のツリー階層レベル（深さ）の計算
@@ -1031,6 +1117,9 @@ const isSafe = canDropRow('source-row-id', 'target-row-id', rows) // boolean
 
 // 7. クリティカルパス（最長依存関係チェーン）の計算
 const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
+
+// 8. 行内のタスク配列から最小開始日・最大終了日・期間日数を算出
+const summaryDates = calculateRowSummaryDates(rows[0].tasks) // { start, end, durationDays }
 ```
 
 ### キーボード操作

package/README.md

@@ -84,6 +84,14 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - WBS parent summary aggregation of descendant task baselines
   - Synchronized bird's-eye rendering on the overview minimap (2D Canvas)
   - Helper functions for individual task variance (`calculateTaskDelay`) and project-wide statistics (`calculateProjectBaselineSummary`)
+- 📋 **Multi-Column Data Grid (WBS Table)**:
+  - Display and interact with the row header area as a full-featured multi-column data table
+  - Built-in standard columns: WBS code (`wbs`), task name (`name`), start date/month/datetime (`startDate`/`startMonth`/`startDateTime`), end date/month/datetime (`endDate`/`endMonth`/`endDateTime`), duration (`duration`), progress (`progress`), with automatic header title and format adaptation across Day, Week, Month, and Hourly view modes
+  - Automatic calculations for summary and multi-task rows (earliest start, latest end, calendar duration, weighted average progress)
+  - **Inline Cell Editing** (`option.grid.editable: true`): Direct editing via double-click or single-click, built-in editors (`text`, `number`, `date`, `datetime`, `month`, `select`) and custom DOM editor functions, automatic linkage with single-task `movable` / `resizable` / `progressResizable` settings, visual distinction between editable (`.grid-cell-editable`) and read-only (`.grid-cell-readonly`) cells, Undo/Redo history integration, and `cell-edit` events
+  - Custom column definitions with `field`, `valueGetter`, `valueSetter`, `formatter`, and `renderCell` (supports HTML strings and `HTMLElement` nodes) and 2-tier layout coexistence with `customRendering.cornerContent`
+  - Column header drag-resizing with `column-resize` custom events
+  - Splitter-based area resizing with synchronized independent horizontal scrolling within the grid area (via trackpad swipe, Shift+wheel, or wheel over grid headers)
 - ⌨️ **Keyboard Navigation & Shortcuts**: Arrow key navigation & selection, Shift + Arrow task movement, Delete / Backspace task & dependency deletion, Undo / Redo (`Ctrl+Z` / `Ctrl+Y`), and zoom controls.
 
 ## Packages (Ecosystem)
@@ -787,7 +795,7 @@ const option = {
 }
 
 // Calculate delay or early completion for an individual task
-const delayInfo = calculateTaskDelay(rows[0].tasks[0])
+delayInfo = calculateTaskDelay(rows[0].tasks[0])
 console.log(`Is delayed: ${delayInfo.isDelayed}, Delay in days: ${delayInfo.delayDays}`)
 
 // Aggregate project-wide baseline statistics
@@ -795,6 +803,72 @@ const summary = calculateProjectBaselineSummary(rows)
 console.log(`Total: ${summary.totalBaselineTasks}, Delayed: ${summary.delayedTasksCount}, Max delay: ${summary.maxDelayDays} days`)
 ```
 
+### Multi-Column Data Grid (WBS Table & Inline Editing)
+
+Display the row header area as an interactive multi-column data table. Configure built-in WBS hierarchy codes, task names, dates, durations, progress, and custom columns. Set `editable: true` to enable inline cell editing via double-click (or single-click) (editable cells receive `.grid-cell-editable`, while read-only cells such as summary/multi-task aggregated cells and the `wbs` column receive `.grid-cell-readonly` for visual distinction; single-task date, duration, and progress cells also automatically respect `task.movable`, `task.resizable`, and `task.progressResizable`).
+
+Depending on the active view mode, `startDate` and `endDate` column titles, display formats, and editor types automatically adapt (`Start Month` / `End Month` in monthly mode; `Start Date/Time` / `End Date/Time` in hourly mode). When used together with `customRendering.cornerContent`, the top-left corner renders in a 2-tier layout with `cornerContent` in the upper row and grid column headers in the lower row.
+
+```javascript
+const option = {
+  // Data Grid configuration
+  grid: {
+    enabled: true, // Enable grid mode (default: true if columns is defined)
+    width: 700, // Total initial width of grid area (px)
+    splitterResizable: true, // Allow resizing grid area width via splitter (default: true)
+    showBorders: true, // Display cell borders (default: true)
+    editable: true, // Enable inline cell editing (default: false)
+    editTrigger: 'dblclick', // Trigger to start editing ('dblclick' | 'click', default: 'dblclick')
+    columns: [
+      { id: 'wbs', width: 60 }, // WBS code (1, 1.1, 1.2, etc.)
+      { id: 'name', width: 220 }, // Task name (includes tree indent, collapse toggle, and text editing)
+      { id: 'startDate', width: 125 }, // Start date (adapts to date/month/datetime editor)
+      { id: 'endDate', width: 125 }, // End date (adapts to date/month/datetime editor)
+      { id: 'duration', width: 80 }, // Duration (numeric editor)
+      { id: 'progress', width: 70 }, // Progress (0–100% numeric editor)
+      {
+        id: 'assignee',
+        title: 'Assignee',
+        width: 100,
+        field: 'assignee', // binds to row.assignee for reading & writing
+        editor: 'select', // 'text' | 'number' | 'date' | 'datetime' | 'month' | 'select' or custom function
+        editorOptions: [
+          { label: 'Alice', value: 'Alice' },
+          { label: 'Bob', value: 'Bob' },
+          { label: 'Charlie', value: 'Charlie' },
+        ],
+        renderCell: (value) => {
+          // Custom DOM element rendering
+          const badge = document.createElement('span')
+          badge.className = 'badge'
+          badge.textContent = value || 'Unassigned'
+          return badge
+        },
+      },
+    ],
+  },
+}
+
+// Listen to inline cell edit commit events
+chart.addEventListener('cell-edit', (event) => {
+  const { rowId, columnId, oldValue, newValue, row, rows } = event.detail
+  console.log(`Row ${rowId} column ${columnId} updated:`, oldValue, '->', newValue)
+})
+
+// Listen to column resize events
+chart.addEventListener('column-resize', (event) => {
+  const { columnId, width, previousWidth, isFinal } = event.detail
+  if (isFinal) {
+    console.log(`Column ${columnId} resized to ${width}px`)
+  }
+})
+
+// Programmatic cell editing control
+chart.startCellEdit('row-1', 'name') // Start editing
+chart.commitCellEdit('Updated Task Name') // Commit edit
+chart.cancelCellEdit() // Cancel edit
+```
+
 ### Public Methods
 
 #### selectTask
@@ -1008,7 +1082,7 @@ console.log('Row positions:', rowPositions)
 
 ### Utility Functions
 
-`@mogura/moguchart-core` exports various helper utilities for hierarchical WBS calculations, critical path detection, and progress aggregations:
+`@mogura/moguchart-core` exports various helper utilities for hierarchical WBS calculations, critical path detection, progress aggregations, baseline variance, and multi-column grid operations:
 
 ```typescript
 import {
@@ -1026,6 +1100,18 @@ import {
   calculateRowProgress,
   calculateWeightedRowProgress,
   calculateProjectProgress,
+  // Baseline (plan vs actual) calculations
+  calculateTaskDelay,
+  calculateProjectBaselineSummary,
+  // Multi-Column Grid calculations & inline editing helpers
+  calculateRowSummaryDates,
+  normalizeGridColumns,
+  getGridCellValue,
+  formatGridCellValue,
+  resolveColumnEditorType,
+  isGridCellEditable,
+  formatGridCellEditValue,
+  applyGridCellEdit,
 } from '@mogura/moguchart-core'
 
 // 1. Calculate depth level for all rows
@@ -1043,6 +1129,8 @@ const summaryTask = computeSummaryTask(childTasks, 'project-1') // Min start, ma
 const isDropAllowed = canDropRow('source-row-id', 'target-row-id', rows) // boolean
 // 7. Find longest task dependency chains (critical path)
 const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
+// 8. Calculate earliest start, latest end, and calendar days across tasks in a row
+const summaryDates = calculateRowSummaryDates(rows[0].tasks) // { start, end, durationDays }
 ```
 
 ### Keyboard Operations

package/dist/components/gantt-calendar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import type { GanttChartOption, CalendarMonthCellContext, CalendarDayCellContext, CalendarWeekCellContext, CalendarHourCellContext } from '../core/types';
+import type { GanttChartOption, CalendarMonthCellContext, CalendarDayCellContext, CalendarWeekCellContext, CalendarHourCellContext, GanttColumn } from '../core/types';
 export declare class GanttCalendarElement extends LitElement {
     option: GanttChartOption;
     theme: 'light' | 'dark';
@@ -11,12 +11,23 @@ export declare class GanttCalendarElement extends LitElement {
     calendarDayContent?: (context: CalendarDayCellContext) => string | unknown;
     calendarWeekContent?: (context: CalendarWeekCellContext) => string | unknown;
     calendarHourContent?: (context: CalendarHourCellContext) => string | unknown;
+    gridScrollLeft: number;
+    gridColumns?: GanttColumn[];
     /**
      * カスタムレンダリング関数の返却値をターゲット要素に注入するヘルパー
      * HTMLElement の場合は appendChild、文字列の場合は innerHTML に設定する
      */
     private injectCustomContent;
+    private get isGridEnabled();
     protected updated(): void;
+    /**
+     * カラムヘッダー幅リサイズの開始ハンドラー
+     */
+    private handleColumnResizeStart;
+    /**
+     * マルチカラムグリッドのヘッダーを描画する
+     */
+    private renderGridHeaders;
     /**
      * カレンダーセルのカスタムレンダリングコンテンツを注入する
      */

package/dist/components/gantt-chart.d.ts

@@ -1,4 +1,4 @@
-import type { GanttChartOption, GanttChartOptionZoom, GanttRow, GanttTask, GanttTaskMoveMode, TaskUpdateEventDetail } from '../core/types';
+import type { GanttChartOption, GanttChartOptionZoom, GanttRow, GanttTask, GanttTaskMoveMode, TaskUpdateEventDetail, GanttColumn } from '../core/types';
 import { HistoryManager, type GanttCommand, type GanttCommandType } from '../core/history';
 import { LitElement, type PropertyValues } from 'lit';
 import './gantt-calendar';
@@ -89,6 +89,13 @@ export declare class GanttChartElement extends LitElement {
     get _dragDropController(): DragDropController;
     private _historyManager;
     private isExporting;
+    private currentGridColumns;
+    private currentGridScrollLeft;
+    private _userResizedHeaderWidth;
+    private _lastExplicitOptionWidth;
+    private _userColumnWidths;
+    private _lastExplicitColumnWidths;
+    get effectiveGridColumns(): GanttColumn[] | undefined;
     private _layoutCache;
     private resizeObserver;
     private _cachedSelectedTaskIds;
@@ -134,6 +141,8 @@ export declare class GanttChartElement extends LitElement {
     private setupCurrentTimeTimer;
     private stopCurrentTimeTimer;
     private handleHeaderResizeStart;
+    private handleColumnResize;
+    handleGridWheel: (e: WheelEvent) => boolean;
     private handleScroll;
     private handleMinimapScroll;
     private updateScrollTop;
@@ -275,6 +284,19 @@ export declare class GanttChartElement extends LitElement {
     toggleRowCollapse(rowId: string, collapsed?: boolean): boolean;
     collapseAll(): void;
     expandAll(): void;
+    private handleRowCellEdit;
+    /**
+     * 指定された行とカラムのインライン編集を開始する
+     */
+    startCellEdit(rowId: string, columnId: string): boolean;
+    /**
+     * 現在編集中のセルがあれば編集を確定する
+     */
+    commitCellEdit(overrideValue?: any): boolean;
+    /**
+     * 現在編集中のセルがあれば編集をキャンセルする
+     */
+    cancelCellEdit(): void;
     /**
      * スクロール位置を左上（0, 0）にリセットします。
      */

package/dist/components/gantt-row.d.ts

@@ -1,4 +1,4 @@
-import type { GanttChartOption, GanttRow, GanttTask, GanttTaskMoveMode } from '../core/types';
+import type { GanttChartOption, GanttRow, GanttTask, GanttTaskMoveMode, GanttColumn } from '../core/types';
 import { LitElement, type PropertyValues } from 'lit';
 import './gantt-bar';
 import './gantt-row-background';
@@ -34,6 +34,11 @@ export declare class GanttRowElement extends LitElement {
     focusedTaskId: string | null;
     isExporting: boolean;
     criticalPathTaskIds: string[];
+    gridScrollLeft: number;
+    gridColumns?: GanttColumn[];
+    private _editingColumnId;
+    private _editingValue;
+    private _isCommittingEdit;
     private _cachedMonthGridLines;
     private _cachedMonthGridStartTime;
     private _cachedMonthGridEndTime;
@@ -74,6 +79,12 @@ export declare class GanttRowElement extends LitElement {
     private handleToggleMouseLeave;
     private handleToggleCollapse;
     private handleToggleDblClick;
+    get editingColumnId(): string | null;
+    startCellEdit(columnId: string): boolean;
+    commitCellEdit(overrideValue?: any): boolean;
+    cancelCellEdit(): void;
+    private _handleEditorKeyDown;
+    private _renderCellEditor;
     protected updated(changedProperties: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/core/grid.d.ts

@@ -0,0 +1,53 @@
+import type { GanttColumn, GanttBuiltinColumnId, GanttColumnEditorType, GanttRow, GanttTask } from './types';
+import type { MoguchartLocale } from './i18n';
+/**
+ * 組み込みカラムのデフォルト仕様定義
+ */
+export declare const DEFAULT_GRID_COLUMN_CONFIGS: Record<GanttBuiltinColumnId, {
+    width: number;
+    minWidth: number;
+    align: 'left' | 'center' | 'right';
+    isTreeColumn?: boolean;
+}>;
+/**
+ * 複数タスク（またはサマリータスク）の日程・期間・加重平均進捗率を計算する
+ */
+export declare function calculateRowSummaryDates(tasks: GanttTask[]): {
+    start: Date | null;
+    end: Date | null;
+    durationDays: number;
+    durationMs: number;
+    progress: number | undefined;
+};
+/**
+ * カラム定義配列を正規化し、デフォルト値やロケール文字列を補完する
+ */
+export declare function normalizeGridColumns(columns?: GanttColumn[], locale?: MoguchartLocale, isMonthMode?: boolean, isTimeMode?: boolean): GanttColumn[];
+/**
+ * 指定されたカラムのセル生値を行およびタスク群から取得する
+ */
+export declare function getGridCellValue(column: GanttColumn, row: GanttRow, tasks: GanttTask[], wbsCode?: string): any;
+/**
+ * セル値をフォーマットして表示用文字列にする
+ */
+export declare function formatGridCellValue(column: GanttColumn, value: any, row: GanttRow, tasks: GanttTask[], locale?: MoguchartLocale, isMonthMode?: boolean, isTimeMode?: boolean): string;
+/**
+ * カラムと現在の表示モードから使用するエディタ種別を解決する
+ */
+export declare function resolveColumnEditorType(column: GanttColumn, isMonthMode?: boolean, isTimeMode?: boolean): GanttColumnEditorType;
+/**
+ * 指定されたセルがインライン編集可能かどうかを判定する
+ */
+export declare function isGridCellEditable(column: GanttColumn, row: GanttRow, tasks: GanttTask[], hasChildren?: boolean, gridEditable?: boolean): boolean;
+/**
+ * インライン編集用入力コントロールの初期値文字列を生成する
+ */
+export declare function formatGridCellEditValue(column: GanttColumn, value: any, _row: GanttRow, tasks: GanttTask[], isMonthMode?: boolean, isTimeMode?: boolean): string;
+/**
+ * セルの編集結果を行データ（および単一タスク）に反映する
+ */
+export declare function applyGridCellEdit(column: GanttColumn, row: GanttRow, rawInputValue: any, isMonthMode?: boolean, isTimeMode?: boolean, wbsCode?: string): {
+    changed: boolean;
+    oldValue: any;
+    newValue: any;
+};

package/dist/core/history.d.ts

@@ -1,7 +1,7 @@
 /**
  * ガントチャートのUndo/Redo（操作履歴）管理
  */
-export type GanttCommandType = 'task-move' | 'task-resize' | 'task-progress' | 'task-delete' | 'row-reorder' | 'dependency-create' | 'dependency-delete' | 'custom';
+export type GanttCommandType = 'task-move' | 'task-resize' | 'task-progress' | 'task-delete' | 'row-reorder' | 'dependency-create' | 'dependency-delete' | 'cell-edit' | 'custom';
 /**
  * ガントチャートに対する単一の編集操作を表すコマンドインターフェース
  */

package/dist/core/i18n.d.ts

@@ -51,6 +51,21 @@ export interface MoguchartLocale {
         /** 複数タスク移動中の表示 (例: "3件のタスクを移動中" / "Moving 3 tasks") */
         movingTasks: (count: number) => string;
     };
+    /** マルチカラムデータグリッドの文字列 */
+    grid?: {
+        columns: {
+            wbs: string;
+            name: string;
+            startDate: string;
+            endDate: string;
+            startMonth?: string;
+            endMonth?: string;
+            startDateTime?: string;
+            endDateTime?: string;
+            duration: string;
+            progress: string;
+        };
+    };
 }
 /**
  * 日本語ロケール (デフォルト)