Group

Enables rendering and handling of row groups. The actual grouping is done in the store, but triggered by shift + clicking headers, or by using the context menu, or by using two finger tap (one on header, one anywhere on grid). Use shift + alt + click, or the context menu, to remove a column grouper.

Groups can be expanded/collapsed by clicking on the group row or pressing [space] when group row is selected. The actual grouping is done by the store, see group.

Grouping by a field performs sorting by the field automatically. It's not possible to prevent sorting. If you group, the records have to be sorted so that records in a group stick together. You can either control sorting direction, or provide a custom sorting function called groupSortFn to your feature config object.

For info on programmatically handling grouping, see StoreGroup.

Example snippets:

// grouping feature is enabled, no default value though
let grid = new Grid({
    features : {
        group : true
    }
});

// use initial grouping
let grid = new Grid({
    features : {
        group : 'city'
    }
});

// default grouper and custom renderer, which will be applied to each cell except the "group" cell
let grid = new Grid({
    features : {
      group : {
          field : 'city',
          ascending : false,
          renderer : ({ isFirstColumn, count, groupRowFor, record }) => isFirstColumn ? `${groupRowFor} (${count})` : ''
      }
    }
});

// group using custom sort function
let grid = new Grid({
    features : {
        group       : {
            field       : 'city',
            groupSortFn : (a, b) => a.city.length < b.city.length ? -1 : 1
        }
    }
});

// can also be specified on the store
let grid = new Grid({
    store : {
        groupers : [
            { field : 'city', ascending : false }
        ]
    }
});

// custom sorting function can also be specified on the store
let grid = new Grid({
    store : {
        groupers : [{
            field : 'city',
            fn : (recordA, recordB) => {
                // apply custom logic, for example:
                return recordA.city.length < recordB.city.length ? -1 : 1;
            }
        }]
    }
});

Currently, grouping is not supported when using pagination, the underlying store cannot group data that is split into pages.

Toggling a group collapsed state programmatically

You can easily toggle a group´s collapsed state, by passing a group member record like so:

// collapse the group for a certain record
grid.features.group.toggleCollapse(record, true);

Grouping by multi-value fields

The group field's value may be an array. This means that one record can be a member of more than one group. When this is the case, the second and subsequent generated groups contain a linked record which is a copy of the original record. Please note that some of the linked records fields are not shared, like id (which is always generated).

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

For more information on how to customize keyboard shortcuts, please see the Customizing keyboard shortcuts guide

This feature is enabled by default.