# Grouping

## 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://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-grouping.png)

You can use the `TableSheet` class methods [groupBy](/spreadjs/api/v17/classes/GC.Spread.Sheets.TableSheet.TableSheet#groupBy) and [removeGroupBy](/spreadjs/api/v17/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.
![image](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.
![image](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-outline.c78d8b.png)
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.
![image](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-condensed.5e03d9.png)
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/v17/spreadjs_designer_component/spdesignerwork/tablesheet-designer/DesignMode#grouping-layout-settings).