Grouping (Stacked Columns)

Type: ColumnGrouping

The capability to group columns under a shared header to organize data more effectively.

Columns in RevoGrid can be defined as either regular columns or grouped columns (stacked columns). To create a stacked column, simply define it as a group. Check the interfaces for more information.

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
            },
        ],
    },
]

Here's an example demonstrating how to define both regular and grouped columns:

Source code Git

js.column.group.example.ts

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

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
            },
        ],
    },
]

// Render grid
function render() {
    // Create grid element
    const grid = document.createElement('revo-grid')
    document.getElementById('demo-overview')?.appendChild(grid)

    grid.columns = columns
    grid.source = makeData(10)
    grid.theme = 'compact'
    grid.stretch = true
}