# Grouping

An explanation of the grouping functionality of TableSheets in SpreadJS, including the grouped column types, UI examples, API, and code snippets

## Content

TableSheet supports grouping the data source by the specified fields, that is, merging the same cell contents in a single cell automatically. The grouped columns are placed left to the base columns, and they consist of the following types of columns:

* **Base column**: Contains the original column value.
* **Summary column**: Contains aggregate results calculated by a user-defined formula.
* **Slicer column**: Contains the slices of the aggregate results.

The following image shows the different types of columns in tablesheet grouping.
![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-grouping.png?width=840)

You can use the `TableSheet` class methods [groupBy](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#groupBy) and [removeGroupBy](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#removeGroupBy) to add and remove grouping, respectively. The following code sample shows how to add grouped columns including summary columns and slicer columns.

```javascript
function grouping() {
    //Create groupBy by single field (Selling package), with summary fields and slice fields
    sheet.groupBy([
        {
            caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#F9CA9A" },
            summaryFields: [
                {
                    caption: "SUM(Unit Price)",
                    formula: "=SUM([unitPrice])",
                    slice: { field: "=YEAR([@validFrom])", width: 120, style: { backColor: "#FCE3CA", formatter: "#,##0.00" } },
                    width: 150,
                    style: { backColor: "#FAD7B2", formatter: "#,##0.00" }
                }
            ]
        }
    ]);
}
```

## Grouping Layout

TableSheet offers **Tabular**, **Outlines**, and **Condensed** grouping layouts that enable you to switch between the modes to optimize the presentation of your grouped data.

### **Tabular Mode**

In this mode, the category or calculation columns are generated for grouping fields, summaries, and slices. The following image depicts the Tabular layout which groups the tablesheet data basis “**Office**” column.

![ts-grouplayout-tabular](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-tabular.488fee.png)

The following sample code shows how to implement the Tabular grouping layout.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.tabular; 
```

### **Outline Mode**

In this mode, the grouping field name and values are added into the header and displayed before each group of items, providing a hierarchical structure. The following image depicts the Outline mode.

![ts-grouplayout-outline](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-outline.c78d8b.png?width=480)

The following sample code shows how to implement the Outline grouping layout.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.outline; 
```

### **Condensed Mode**

This mode streamlines the display by making headers and footers thinner by consolidating all header information and aggregations into a single line. The following image depicts the Condensed mode.

![ts-grouplayout-condensed](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-condensed.5e03d9.png?width=480)

The following sample code shows how to implement the Condensed grouping layout.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.condensed; 
```

### **Limitations**

* Outline and Condensed grouping layouts do not display **slice** grouping configurations, while Tabular layout does not display **position** and **relateTo** settings.
* Condensed and Outline layout modes allow you to display only the first summary result in case more than one summary result appears in the header or footer.
* `detailColumnsVisible` method do not work in the Outline and Condensed layout modes.

> **Note**: You can use SpreadJS Designer to apply these Grouping layout settings. For more information, refer to [TableSheet Design Mode](/spreadjs/docs/v18/spreadjs-designer-component/spdesignerwork/tablesheet-designer/DesignMode#grouping-layout-settings).