Row Grouping in Data Grid

Interface: GroupingOptions

Row grouping in RevoGrid allows you to organize rows based on a specific property, making it easy to categorize and visualize hierarchical data. With RevoGrid’s powerful features, you can set up grouping with minimal configuration.

Grouping Configuration

The grouping option takes an object with the props property, which specifies the columns to group by. In the example above, rows are grouped by the projectName property.

import { defineCustomElements } from '@revolist/revogrid/loader'
import { type DataType } from '@revolist/revogrid'
defineCustomElements()

// Create grid element
const grid = document.createElement('revo-grid')
document.body.appendChild(grid)

// Define columns
const columns = [
    {
        name: '🎰',
        prop: 'a',
    },
]

grid.columns = columns
grid.source = ((rowsNumber) => {
    const result: DataType[] = []
    const all = rowsNumber
    for (let j = 0; j < all; j++) {
        let row = j
        if (!result[row]) {
            result[row] = {
                id: row,
                projectName: j % 2 ? 'yes' : 'no',
            }
        }
        result[row]['a'] = `I am row ${row}`
    }
    return result
})(100)

grid.grouping = { props: ['projectName'] }

Example Grouping Output

With the provided configuration:

• Rows with projectName: 'yes' are grouped together.
• Rows with projectName: 'no' are grouped separately.

Dynamic Updates

Grouping can be updated dynamically by modifying the grouping property of the grid. For example:

grid.grouping = { props: ['newGroupingProperty'] };

For more details, check the GroupingOptions interface.