# Add Show/Collapse Button

A tutorial showing how to add a show and collapse button to expand or collapse specific cells in a SpreadJS ReportSheet, including UI and a code example

## Content

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.

```auto
// 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.

![RS-collapse cells](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/RS-collapse%20cells.45415c.png?width=350)

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

### Expand and Collapse Cells

SpreadJS provides the ability to manage the visibility of each grouped cells in the TemplateSheet dynamically. This flexibility enables users to define whether grouped cells should appear expanded or collapsed when a ReportSheet is loaded, using the **initialExpansionState** property of the **IReportTemplateCell** interface.
This feature is especially beneficial for designing well-structured and interactive reports, such as Tree Group Reports, Cross Reports, or Standard reports with hierarchical data, as it allows users to tailor the initial view of their data. By default, the initialExpansionState property is set to **Expanded**, meaning grouped cells will be visible upon loading unless specified otherwise.
The following sample code illustrates how to configure the initial expansion state for grouped cells associated with a specified cell.

```javascript
// Set initialExpansionState to Expanded.

templateSheet.setTemplateCell(r + 2, 0, {
        type: 'Group',
        binding: `Sales[${x}]`,
        spillDirection: 'Vertical',
        context: {
        vertical: r > 0 ? `A${r + 2}` : 'Default',
        },
        showCollapseButton: r !== 3,
        initialExpansionState: 'Expanded,
});
```

The following image shows how the grouped cells appear expanded when the report is initially loaded.
![initialExpansion](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/initialExpansion.8c5b01.png)

> type=warning
> **Note:**
>
> * You can only set the initialExpansionState property in Preview render mode.
> * This option remains functional even when the showCollapseButton option is set to false.