Column Grouping

Interface: ColumnGrouping

Column grouping creates stacked headers by placing related columns under a shared parent header. Use it when several fields belong to the same business concept, for example Personal details with First Name, Last Name, and Age below it.

Groups are declared directly in the columns array. A regular column has a prop; a grouped column has children. Grouped columns can be nested, so the header can have as many levels as your layout needs.

JavaScript Column Grouping

Basic structure

import type { ColumnGrouping, ColumnRegular } from '@revolist/revogrid'

const columns: (ColumnGrouping | ColumnRegular)[] = [
    {
        name: 'Personal',
        children: [
            { name: 'First Name', prop: 'firstName' },
            { name: 'Last Name', prop: 'lastName' },
        ],
    },
    { name: 'Project', prop: 'project' },
]

In this example Personal is only a header group. The leaf columns, First Name and Last Name, are still the columns bound to row data.

Nested groups

Use nested children arrays when a header needs more than one grouping level. RevoGrid calculates the header depth from the column tree and aligns regular columns with grouped columns automatically.

const columns: (ColumnGrouping | ColumnRegular)[] = [
    // Stacked column group
    {
        name: 'Personal',
        children: [
            {
                name: 'Full Name',
                children: [
                    { name: 'First Name', prop: 'firstName', size: 200 }, // Regular column within the group
                    { name: 'Last Name', prop: 'lastName', size: 200 }, // Regular column within the group
                ],
            },
            {
                name: 'Info',
                children: [{ name: 'Age', prop: 'age' }], // Regular column
            },
        ],
    },
]

When to use column groups

• Group related fields so wide datasets are easier to scan.
• Create multi-level headers for reports, financial tables, schedules, and operational dashboards.
• Keep column definitions declarative instead of manually composing header rows.
• Combine groups with regular column features such as sizing, sorting, pinning, templates, and filtering on the leaf columns.

Notes

• A grouped column should use children; a leaf column should use prop.
• Sorting, filtering, editing, and data mapping apply to leaf columns.
• Header templates can still be used on regular leaf columns. For group header customization, use the group/header render hooks exposed by the header API.
• Column groups are a core feature and work in Community, Pro Lite, and Pro Advanced.

Pro grouping features

RevoGrid Pro extends grouping from static headers into interactive analysis, layout control, and grouped summaries.

Column collapse and expand

Column Collapse & Expand lets users drill down through grouped columns by collapsing less relevant branches and expanding them again when detail is needed. It is designed for wide grouped datasets where users need a compact working view without removing the underlying column structure.

Column hide

Column Hide can be used with grouped layouts to create focused views of a dataset. Hide low-priority fields while keeping the remaining grouped headers readable and aligned.

Row grouping drag and drop

Row Grouping Drag and Drop adds an interactive grouping panel where users can drag columns to group rows by one or more fields. Use it when grouping should be controlled by the user at runtime instead of being fixed in the grid configuration.

Grouping aggregation

Grouping Aggregation adds summary values to grouped data, such as sum, average, count, min, or max. It is useful for grouped reports, financial summaries, and operational dashboards where each group needs an immediate total or metric.

Pivot row and column grouping

Pivot Table builds analytical row and column groups from dimensions and measures. It adds generated column groups, hierarchical rows, subtotals, grand totals, drill-down state, and grouped aggregate values for OLAP-style reporting.