グループ化(アウトライン)
行や列をグループ化して折りたたみ・展開する方法を説明します。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 と同じ)。
- グループ化するとシートの左側(行)または上側(列)にアウトラインパネルが表示されます。
+/-ボタンでグループの折りたたみ・展開ができます。