Grouping (Stacked Columns)
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.
ts
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
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
}