The new RowExpander feature

In the recent 5.1.0 release of Bryntum Grid, we introduced a cool new feature: the RowExpander. The RowExpander feature makes it possible to expand individual Grid rows to display more content. This is very useful for showing additional information that does not fit in a regular Grid cell. The feature can also be used in products based on the Grid, such as the Gantt and the Scheduler.

Live demo#

Using the RowExpander feature#

To use the RowExpander feature you simply configure it with a renderer in the Grid’s feature config.

new Grid({
  features: {
    rowExpander: {
      renderer({record, region}){
        return record.LongDescription;
      }
  }
});

By default, the RowExpander will add a column to the Grid which holds an expand/collapse button. This column can be configured or, if it is preferable, the row could expand and collapse on a trigger event like cellclick instead.

Example configuration:

new Grid({
  features: {
    rowExpander: {
      renderer({record, region}){
        return record.LongDescription;
      },
      column: null,
      triggerEvent: 'cellclick'
  }
});

The renderer can of course also be asynchronous by returning a Promise.

new Grid({
  features: {
    rowExpander: {
      async renderer({record, region}){
        return await fetchAndRenderExpander('/api/moreinfo');
      }
  }
});

For further information, please read the RowExpander docs. Or explore the new example. If you have suggestions for future improvements, we would be very grateful if you could reply with a comment or post them in the forums.