マルチシートワークブック

v1.3.0 から、ReoGrid インスタンスは N 枚のワークシートと 1 枚のアクティブシートからなる ワークブック になりました。コアがシートタブバー（追加・名前変更・ドラッグ並べ替え・非表示・タブ色）を描画し、各シートが独自のデータ・選択・スクロール・固定・Undo 履歴を保持します。数式は =Sheet1!A1 のように他シートのセルを参照できます。

マルチシートは Lite / Pro 両対応です。ティアガードと行・列制限はシートごとに適用されます。

シングルシートから移行する場合は？ 既存のコードはそのまま動作します — 新規グリッドは今も 1 枚のシートで始まります。唯一の見た目の違いは、下部に表示される高さ約 28 px のシートタブバーです。非表示にするには createReogrid({ showSheetTabs: false }) を渡してください。

ワークブックの作成

インスタンスは workbook コーディネーターを公開します。最初のシートは自動生成され、addSheet で追加できます。

import { createReogrid } from '@reogrid/lite'

const grid = createReogrid({
  workspace: '#app',
  initialSheetName: 'Sales',   // 省略可 — 既定は 'Sheet1'
})

// シートを追加
const expenses = grid.workbook.addSheet('Expenses').worksheet
const summary  = grid.workbook.addSheet('Summary').worksheet

// アクティブシートは常に grid.worksheet で取得できます
grid.worksheet.cell('A1').setValue('Q1 report')

addSheet(name?, index?) は WorkbookSheet（{ worksheet, actionManager }）を返します。.worksheet を使えば、シングルシートのグリッドとまったく同じようにセルを読み書きできます。

ワークブックオプション

ワークブックコーディネーター

grid.workbook がシート集合とアクティブ選択を管理します。

const wb = grid.workbook

wb.addSheet('Data')            // シートを追加（インデックス指定も可）
wb.renameSheet(1, 'Archive')   // 名前はサニタイズ＆重複回避されます
wb.moveSheet(2, 0)             // 並べ替え（アクティブシートは維持）
wb.setActiveSheet(0)          // アクティブシートを切り替え
wb.removeSheet(1)             // 最後の 1 枚は削除できません

wb.getSheets()                // タブ順の WorkbookSheet[]
wb.getWorksheets()            // Worksheet オブジェクト
wb.getSheetNames()            // ['Sales', 'Archive', ...]

ワークブック全体の入出力

インスタンスの I/O メソッドは全シートを対象にします。（ワークシート単位の worksheet.loadXlsx() はアクティブシートにのみ読み込みます。）

// ワークブック全体を .xlsx へエクスポート（ダウンロードが起動）
grid.saveAsXlsx({ filename: 'report.xlsx' })

// File / URL / ArrayBuffer から全シートを読み込み
await grid.loadFromFile(file)
await grid.loadFromUrl('/data/book.xlsx')
await grid.loadXlsx(arrayBuffer)

// JSON シリアライズ（全シート＋ビュー状態を往復）
const doc = grid.toJson()
grid.loadJson(doc)

ワークブックのビュー状態は xlsx を往復します：アクティブシート、シートごとの非表示状態、タブ色がエクスポート時に書き出され、読み込み時に復元されます（ReoGrid-JSON はシートごとの showGridlines も保持します）。

シート変更への反応

grid.workbook.onActiveSheetChange((index) => {
  console.log('アクティブシート:', index)
})

grid.workbook.onSheetsChange(() => {
  // 追加・削除・名前変更・移動・メタデータ変更で発火
  console.log('タブ:', grid.workbook.getSheetNames())
})

各購読呼び出しは解除関数を返します。

インスタンスレベルイベントはアクティブシートに追従

インスタンスで一度だけ購読すれば、リスナーはアクティブなシートへ自動的に張り替わります — タブ切り替え時の再バインドは不要です。

grid.onSelectionChange((range) => { /* アクティブシートの選択 */ })
grid.onCellValueChange(({ row, column, value }) => { /* ... */ })

利用可能：onSelectionChange、onCellValueChange、onBulkCellsChange、onScrollChange、onViewportSizeChange、onStructureChange、onContextMenu。ペイロードの形は 選択とイベント を参照してください。

クロスシート数式

数式は他シートのセルを参照できます — =Sheet1!A1、='My Sheet'!A1:B2、=シート1!A1 のような非 ASCII 名も可。シート名を変更すると参照式が書き換わり、シートを削除すると参照は #REF! になります。詳細とライフサイクル規則は 数式エンジン — クロスシート参照 を参照してください。

// サマリーシートで 3 つの拠点シートを集計:
summary.cell('B2').value = "='Tokyo'!E6"
summary.cell('B3').value = "='Osaka'!E6"
summary.cell('B4').value = "='Nagoya'!E6"
summary.cell('B5').value = '=SUM(B2:B4)'

React・Vue

どちらのラッパーもインスタンス経由でワークブックを公開し、シートイベントを発行します。

// React
<Reogrid
  onReady={(grid) => grid.workbook.addSheet('Data')}
  onActiveSheetChange={(index) => console.log('active', index)}
  onSheetsChange={() => console.log('sheets changed')}
/>

<!-- Vue -->
<Reogrid
  @ready="grid => grid.workbook.addSheet('Data')"
  @active-sheet-change="index => console.log('active', index)"
  @sheets-change="() => console.log('sheets changed')"
/>

ライブデモ

マルチシートワークブックのデモ をご覧ください — 3 つの拠点シートと、クロスシート数式だけで構築したサマリーシート。どの拠点を編集しても、合計がシートをまたいで再計算されます。