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.

// Toggle outline level 1 (collapse/expand)
ws.toggleRowOutlineLevel(1)
ws.toggleColumnOutlineLevel(1)

Outline Manager

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

// Outline panel size
const panelWidth = ws.getOutlinePanelWidth()    // Display width of column outlines
const panelHeight = ws.getOutlinePanelHeight()  // Display height of row outlines

ActionManager Integration

Use the ActionManager for grouping with undo/redo support.

const { actionManager, worksheet } = grid

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

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

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

// Toggle outline collapse/expand
actionManager.execute(new ToggleOutlineAction(worksheet, 'row', groupIndex))

// Collapse to level
actionManager.execute(new CollapseToLevelAction(worksheet, 'row', level))

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 7 levels deep (same as Excel).
• 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.