Backgrid.js extension for grouped columns.
npm install backgrid-grouped-columnsjavascript
// Set up a grid to use the pageable collection
// Grouped column definition
var colLayout = [
{
name: "rowSelect"
},
{
name: "id"
},
{
name: "Personal info",
label: "Personal information",
children: [
{
name: "name"
},
{
name: "Physical info",
children: [
{
name: "age"
},
{
name: "gender"
},
{
name: "eyeColor"
}
]
},
{
name: "Contact",
children: [
{
name: "Analog",
children: [
{
name: "phone"
},
{
name: "address"
}
]
},
{
name: "Digital",
children: [
{
name: "email"
}
]
}
]
},
{
name: "company"
}
]
},
{
name: "Balance sheet",
children: [
{
name: "Revenues",
children: [
{
name: "domestic"
},
{
name: "exports"
},
{
name: "total"
}
]
},
{
name: "expenditure"
},
{
name: "profits"
}
]
},
{
name: "registered"
},
{
name: "isActive"
},
{
name: "Location",
children: [
{
name: "latitude"
},
{
name: "longitude"
}
]
}
];
var groupedHeader = Backgrid.Extension.groupedHeader.extend({
columnLayout: colLayout // Only needed in case of a top-down definition
});
var pageableGrid = new Backgrid.Grid({
header: groupedHeader,
columns: columns,
collection: pageableTerritories
});
// If you want to use the bottom-up definition, the 'nesting' property is supported on the column definition
// Example (same balance sheet structure as above):
var columnDef = [
...
{
...
name: "domestic",
nesting: ["Revenues", "Balance sheet"]
...
},
{
...
name: "exports",
nesting: ["Revenues", "Balance sheet"]
...
},
{
...
name: "total",
nesting: ["Revenues", "Balance sheet"]
...
},
{
...
name: "expenditure",
nesting: ["Balance sheet"]
...
},
{
...
name: "profits",
nesting: ["Balance sheet"]
...
}
...
];
``