ReoGrid ReoGrid Web

グループ化(アウトライン)

行や列をグループ化して折りたたみ・展開する方法を説明します。Excel のアウトライン機能に相当します。

グループ化はPro版で利用可能です。

Live Demo

行のグループ化

const ws = grid.worksheet

// 行2〜5をグループ化(0始まり)
ws.groupRows(1, 4)

// グループ解除
ws.ungroupRows(1, 4)

列のグループ化

// 列B〜Dをグループ化
ws.groupColumns(1, 3)

// グループ解除
ws.ungroupColumns(1, 3)

レベルの切替

アウトラインにはレベルがあり、ネストされたグループを一括で折りたたむ・展開できます。

// レベル1のアウトラインを切替(折りたたみ/展開)
ws.toggleRowOutlineLevel(1)
ws.toggleColumnOutlineLevel(1)

アウトラインマネージャー

const rowOutlines = ws.getRowOutlines()
const colOutlines = ws.getColumnOutlines()

// アウトラインパネルのサイズ
const panelWidth = ws.getOutlinePanelWidth()    // 列アウトラインの表示幅
const panelHeight = ws.getOutlinePanelHeight()  // 行アウトラインの表示高さ

ActionManager によるグループ化

Undo / Redo 対応でグループ化する場合は ActionManager を使用します。

const { actionManager, worksheet } = grid

// グループ化(Undo 可能)
actionManager.execute(new GroupRowsAction(worksheet, 1, 4))

// グループ解除(Undo 可能)
actionManager.execute(new UngroupRowsAction(worksheet, 1, 4))

// 列のグループ化
actionManager.execute(new GroupColumnsAction(worksheet, 1, 3))

// アウトラインの折りたたみ/展開
actionManager.execute(new ToggleOutlineAction(worksheet, 'row', groupIndex))

// レベルごとの折りたたみ
actionManager.execute(new CollapseToLevelAction(worksheet, 'row', level))

使用例:月次レポート

const ws = grid.worksheet

ws.suspendRender()

// ヘッダー
ws.cell('A1').setValue('カテゴリ').setStyle({ bold: true })
ws.cell('B1').setValue('金額').setStyle({ bold: true })

// Q1
ws.cell('A2').setValue('Q1 合計').setStyle({ bold: true })
ws.cell('A3').value = '1月'
ws.cell('A4').value = '2月'
ws.cell('A5').value = '3月'
ws.cell('B2').value = '=SUM(B3:B5)'
ws.cell('B3').value = '100000'
ws.cell('B4').value = '120000'
ws.cell('B5').value = '110000'

// Q2
ws.cell('A6').setValue('Q2 合計').setStyle({ bold: true })
ws.cell('A7').value = '4月'
ws.cell('A8').value = '5月'
ws.cell('A9').value = '6月'
ws.cell('B6').value = '=SUM(B7:B9)'
ws.cell('B7').value = '130000'
ws.cell('B8').value = '140000'
ws.cell('B9').value = '125000'

// 月の行をグループ化(折りたたむと四半期合計のみ表示)
ws.groupRows(2, 4)  // 1月〜3月
ws.groupRows(6, 8)  // 4月〜6月

ws.resumeRender()

注意事項

  • グループは最大 7 レベルまでネストできます(Excel と同じ)。
  • グループ化するとシートの左側(行)または上側(列)にアウトラインパネルが表示されます。
  • + / - ボタンでグループの折りたたみ・展開ができます。