Gridx in XPages – 19: Column Group Headers

If you have more than a few columns in the grid, it can be helpful for the user to divide the columns into groups and label them. In this post, I’ll show how to add group headers.

Gridx Series

Gridx in XPages — Entire Series

Group Header

The Group Header feature of Gridx allows you to group columns and add label for the group.

1. Require Module

The first thing you need to do is include the GroupHeader module in the require statement.

"gridx/modules/GroupHeader"

2. Include Module in Grid

To make it available to the grid, add it to the grid’s modules list.

modules: [  
  Resizer,
  NestedSort,
  Filter,
  FilterBar,
  QuickFilter,
  GroupHeader
]

3. Define Header Groups

Next, you need to define the group header object. It is an array of objects that each provide a label and the number of columns in the group.

The group header will be displayed above those columns.

In this example, I’ve divided the columns in to three groups, each with two columns.

myHeaderGroups = [
  {name: 'Name', children: 2},
  {name: 'Address', children: 2},
  {name: 'Personal Info', children: 2}
];

4. Add the headerGroups Property

The last thing you need to do is to reference the object created above in the grid’s headerGroups attribute.

Here’s an example that set the headerGroups attribute.

grid = new Grid({
  id: "my_gridX",
  cacheClass: Cache,
  store: store,
  structure: columns,
  headerGroups: myHeaderGroups
  modules: [
    Resizer,
    NestedSort,
    Filter,
    FilterBar,
    QuickFilter,
    GroupHeader
  ]
});

More Variations

You can mix this up so that some columns have group headers and some don’t. You can also add multiple layers of headers.

Take a look at this demo page for examples.