Add Show/Collapse Button

The Show/Collapse button in ReportSheet allows you to expand or collapse specific cells. Note that the ReportSheet only allows cell show/collapse in Preview render mode.

By setting the showCollapseButton property of the IReportTemplateCell interface to true, you can add the Show/Collapse button in the TemplateSheet. This showCollapseButton property controls whether to show the button which can collapse the children of the cell in the report.

// Configure the Show/Collapse button in the TemplateSheet. 
const columns = ['shipCountry', 'shipCity'];
templateSheet.setTemplateCell(0, 0, {
     type: 'Group',
     binding: 'Orders[shipCountry]',
     showCollapseButton: true,
});
templateSheet.setTemplateCell(0, 1, {
      type: 'List',
      binding: 'Orders[shipCity]',
});
reportSheet.refresh();

The following image shows that the Show/Collapse button is added to the ship country options.

Note: Additionally, SpreadJS has another two methods, getCollapseState and toggleCollapseStatein the ReportSheet class, to determine if the cell is now collapsed or expanded and to toggle the collapsed state of specified cells.