Grouping (Outline)

ReoGrid Web lets you group rows and columns for collapsing and expanding. This corresponds to Excel’s outline feature.

Grouping is available in the Pro edition.

Row Grouping

const ws = grid.worksheet

// Group rows 2 through 5 (0-based)
ws.groupRows(1, 4)

// Ungroup
ws.ungroupRows(1, 4)

Column Grouping

// Group columns B through D
ws.groupColumns(1, 3)

// Ungroup
ws.ungroupColumns(1, 3)

Toggle Outline Levels

Outlines have levels, allowing nested groups to be collapsed or expanded in bulk.

// Collapse all groups down to level 1
ws.collapseRowsToLevel(1)
ws.collapseColumnsToLevel(1)

// Collapse / expand a single group (level, start index)
ws.collapseRowOutline(1, 2)
ws.expandRowOutline(1, 2)

Outline Manager

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

// Outline panel size
const panelWidth = ws.getOutlinePanelWidth()    // Width of the row outline panel (left of row headers)
const panelHeight = ws.getOutlinePanelHeight()  // Height of the column outline panel (above column headers)

ActionManager Integration

Use the ActionManager for grouping with undo/redo support.

import {
  GroupRowsAction,
  UngroupRowsAction,
  GroupColumnsAction,
  ToggleOutlineAction,
  CollapseToLevelAction,
} from '@reogrid/pro'

// Group (undoable)
grid.actionManager.execute(new GroupRowsAction(1, 4))

// Ungroup (undoable)
grid.actionManager.execute(new UngroupRowsAction(1, 4))

// Column grouping
grid.actionManager.execute(new GroupColumnsAction(1, 3))

// Toggle outline collapse/expand (direction, level, start)
grid.actionManager.execute(new ToggleOutlineAction('row', 1, 2))

// Collapse to level (direction, level)
grid.actionManager.execute(new CollapseToLevelAction('row', 1))

Example: Monthly Report

const ws = grid.worksheet

ws.suspendRender()

// Headers
ws.cell('A1').setValue('Category').setStyle({ bold: true })
ws.cell('B1').setValue('Amount').setStyle({ bold: true })

// Q1
ws.cell('A2').setValue('Q1 Total').setStyle({ bold: true })
ws.cell('A3').value = 'January'
ws.cell('A4').value = 'February'
ws.cell('A5').value = 'March'
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 Total').setStyle({ bold: true })
ws.cell('A7').value = 'April'
ws.cell('A8').value = 'May'
ws.cell('A9').value = 'June'
ws.cell('B6').value = '=SUM(B7:B9)'
ws.cell('B7').value = '130000'
ws.cell('B8').value = '140000'
ws.cell('B9').value = '125000'

// Group month rows (collapsing shows only quarterly totals)
ws.groupRows(2, 4)  // January through March
ws.groupRows(6, 8)  // April through June

ws.resumeRender()

Notes

• Groups can be nested up to 9 levels deep.
• When grouping is applied, an outline panel appears on the left side (for rows) or top side (for columns) of the sheet.
• Use the + / - buttons to collapse and expand groups.