The CompoundColumns extension adds the ability to define a column structure which includes additional spanning header cells above the actual columns in the grid.
require([
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/extensions/CompoundColumns'
], function (declare, OnDemandGrid, CompoundColumns) {
var compoundGrid = new (declare([ OnDemandGrid, CompoundColumns ]))({
columns: [
{ label: 'Full Name', children: [
{ label: 'Given', children: [
{ field: 'firstname', label: 'First' },
{ field: 'middlename', label: 'Middle', sortable: false }
] },
{ field: 'lastname', label: 'Last' }
] },
{ field: 'age', label: 'Age' }
]
}, 'compoundGrid');
// ...
});
For an example of the CompoundColumns extension in use, see
dgrid/test/extensions/CompoundColumns.html
.
CompoundColumns works by defining any compound header cells first, then defining
the more granular cells via a children
property of each column definition
object. This can be extended to nest any number of levels.
In the above example, the columns
array would define a structure which
presents 4 columns (first name, middle name, last name, and age), with an
additional label cell spanning above first and middle name, and yet another
label cell spanning above all 3 name fields combined.
Additionally, the headers on the innermost children can be suppressed by
specifying showChildHeaders: false
on their immediate parent.
CompoundColumns
contains special considerations for interoperating with a few
other dgrid mixins and extensions. As such, the following should be kept in
mind when using these components together:
CompoundColumns
should be mixed in beforeColumnSet
, because it needs to normalize its column structure beforeColumnSet
performs its logic.CompoundColumns
should be mixed in afterColumnResizer
andColumnHider
, because it extends methods defined by these other extensions, to add considerations specific to its own behavior.