Master Rows in Data Grid

Master Rows in Pro Version enable expandable rows within the grid, allowing you to display detailed or hierarchical data for each row. This is ideal for presenting nested information such as sub-rows, additional details, or hierarchical structures.

What is complex about Master Rows is that they require additional configuration to have a fully functional grid container across multiple viewports.

Example: Data Grid Master Rows in TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader'
import {
    EXPAND_COLUMN,
    MasterRowPlugin,
    CellColumnFocusVerifyPlugin,
    ColumnStretchPlugin,
    OverlayPlugin,
    type RowMasterConfig,
} from '@revolist/revogrid-pro'
import { makeData, type Person } from '../composables/makeData'
import { currentTheme } from '../composables/useRandomData'

defineCustomElements()

export function load(parentSelector: string) {
    const grid = document.createElement('revo-grid')
    const { isDark } = currentTheme()

    grid.theme = isDark() ? 'darkCompact' : 'compact'
    grid.source = makeData(500, 20)
    grid.columns = [
        { prop: 'expand', focus: () => false, ...EXPAND_COLUMN },
        { name: 'First Name', prop: 'firstName', size: 180 },
        { name: 'Last Name', prop: 'lastName' },
    ]

    grid.plugins = [
        MasterRowPlugin,
        OverlayPlugin,
        CellColumnFocusVerifyPlugin,
        ColumnStretchPlugin,
    ]

    const masterRow: RowMasterConfig = {
        rowHeight: 60,
        template: (h, data) => {
            const subItems = data.model.subRows?.map((subRow: Person) =>
                h('span', { class: { 'master-row': true } }, [
                    subRow.firstName + ' ' + subRow.lastName,
                    ', ',
                ])
            )
            return h('div', null, [h('strong', {}, 'Team: '), subItems])
        },
    }

    grid.additionalData = {
        masterRow,
        stretch: 'last',
    }

    document.querySelector(parentSelector)?.appendChild(grid)
}

Master Row Configuration

• rowHeight: Defines the height of the expanded row.
• template: Custom HTML template to render the expanded row content. In the example, the template displays sub-rows under the main row.

Key Features

• Expandable Rows: Allows rows to expand, revealing additional data or hierarchical structures.
• Custom Templates: Fully customizable row templates using template and h for dynamic rendering.
• Dynamic Updates: Master row configurations can be updated at runtime to reflect changes in data or layout.

Next Steps

• Explore the Pro Version of RevoGrid, which includes advanced features like cell merging, row reordering, and more.