CompoundColumns

CompoundColumns

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.

Usage

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.