---
order: 2
navTitle: 分组表
---
# 仪表板组件-分组表

分组表可以将数据以分组的形式展现，展示各个分组的总体数据。如按照不同省份来展示全国的销售情况。

![分组表](./images/2020-08-20-11-44-35.png)

示例地址：[分组表(全国销售情况表)](https://demo.succbi.com/v5/bi/%E5%88%86%E7%BB%84%E8%A1%A8\(%E5%85%A8%E5%9B%BD%E9%94%80%E5%94%AE%E6%83%85%E5%86%B5%E8%A1%A8\))

## 使用分组表组件{#start}

根据需求将分组字段拖和指标字段拖入到分组表的**数据**区域即可。

![制作](./images/2023-05-16-14-45-11.gif)

**操作步骤**

1. 双击或拖入目标字段
2. 可为分组表添加条件样式，设置[数据条](../../../../report/design/style/condition-style.md#databar)，[突出显示](../../../../report/design/style/condition-style.md#highlight)和[色阶](../../../../report/design/style/condition-style.md#color-scale)等

通过上述2个步骤，即可快速为分组表进行取数。

## 属性介绍{#properties}

分组表整体由几部分组成，每一个部分属性都是需要独立设置，大致区域划分如下图：

![表格组成](./images/2023-05-16-15-56-24.png)

根据各个区域的属性不同，又分为

- [组件属性](#table-properties)
- [分页栏](#paging)
- [标题行](#header-row)
- [数据行](#data-row)
- [数据列](#datas-column)
- [维度/指标](#dimension-target)
- [合计行](#total)
- [小计行](#subtotal)

## 组件属性{#table-properties}

设置表格通用样式和属性等，如分页、布局、冻结线、边框样式等。

组件属性大致分为：

- [序号列](#number)
- [列头排序](#sort)
- [滚动](#roll)
- [冻结](#freeze)
- [行高/列宽](#rowheight-columnwidth)
- [边框](#border)

### 序号列{#number}

分组表提供默认显示序号的功能，通过序号列可以让用户更好判断当前分组表页面展示的数据数量，以及帮助用户更好区分不同行数据之间的差异。

勾选**分组表**>**基本**>**显示序号**即可自动展示序号，默认不勾选。

![序号](./images/2023-05-16-16-09-44.png)

在**样式**>**表格**>**序号列**中，可以调整分组表的序号列的样式。具体可参考明细表[序号列](./columntable.md#number)。

![序号列](./images/2023-05-16-16-16-22.png)

### 列头排序{#sort}

列头排序是能够根据某列的内容对表格数据进行排序。

勾选**分组表**>**基本**>**点击列头排序**，即可在列表中点击任意列头进行排序，可选**升序**和**降序**两种默认排序方式，默认勾选**升序**排序。

同时勾选**分组表**>**基本**>**允许无排序**，可以在列头点击排序后，切换到无排序效果，默认不勾选。

![列头排序](./images/2023-05-16-16-19-09.png)

### 滚动{#roll}

分组表本身是自带纵向滚动条的。但是当页面需要放置在大屏上展示时，此时由于无法人为在大屏上进行键鼠操作，所以分组表的内容应该进行自动滚动展示数据。

勾选**分组表**>**基本**>**自动滚动**，即可自动将分组表内容滚动显示，默认不勾选。

![滚动](./images/2023-05-16-16-24-25.png)

### 冻结{#freeze}

在查看分组表时，尝尝会遇到列数很多、很宽的分组表。在屏幕无法显示全部自动列时，为了浏览不能显示的字段列，需要使用横向滚动条。但是使用横向滚动条，则会造成分组表最前面的主要字段尤其是关键字段无法看到，从而影响了数据的查看。同时数据行过多时，使用纵向滚动条也会导致无法查看字段列名进行区分，那么通过分组表的冻结功能即可解决上诉问题。

### 冻结列{#freezing-columns}

勾选**分组表**>**基本**>**冻结列**，即可设置分组表的冻结列，也可以在**列数**中设置冻结的列数，默认不勾选。冻结线样式需要在**样式**>**组件**>**冻结线**中调整。

![冻结列](./images/2023-05-16-16-27-34.png)

### 冻结行{#freeze-rows}

分组表设置的冻结行后，将会将标题行冻结。纵向滚动时，标题行将滚动不跟随滚动条进行滚动。

在**样式**>**组件**>**冻结线**中设置冻结线后，分组表会自动添加一个标题行的冻结线。如果需要设置冻结列，需要再回到**基本**>**冻结列**中进行设置。

![冻结线](./images/2023-05-16-16-29-31.png)

### 行高/列宽{#rowheight-columnwidth}

**布局**中可以对分组表所有列和行先进行统一的样式设置，包括**列宽**、**行高**、**自动撑大行高**等属性，具体可参考明细表[行高/列宽](./columntable.md#rowheight-columnwidth)。

![布局](./images/2023-05-16-16-33-44.png)

### 边框{#border}

分组表的边框分为**组件边框**、**表格外框**和**网格线**三部分组成.

![边框](./images/2023-05-16-17-15-12.png)

具体可参考明细表[边框](./columntable.md#border)。

![属性](./images/2023-05-16-16-38-34.png)

## 分页栏{#paging}

当数据行较多时，可设置分页为显示，并通过分页栏进行翻页查看数据。具体可参考明细表[分页栏](./columntable.md#paging)。

![设置表格分页](./images/2023-05-16-17-25-09.png)

## 标题行{#header-row}

明细表标题分为三种：

1. [组件标题](#component-title)
2. [标题行](#header-rows)
3. [列标题](#column-header)

### 组件标题{#component-title}

组件是指仪表板中每一个图形化功能的载体，它类似于是每个图形化功能的父容器，所以组件本身存在一些通用的属性，比如**组件标题**、**边框线**、**内边距**等

在**样式**>**标题**中可以设置标题的显示与隐藏，样式等。具体可参考明细表[组件标题](./columntable.md#component-title)。

![组件标题](./images/2023-05-16-17-32-38.png)

### 标题行{#header-rows}

在**样式**>**表格**>**标题行**中，可以调整分组表的标题行的样式。具体可参考明细表[标题行](./columntable.md#header-rows)。

![标题行](./images/2023-05-16-17-35-38.png)

### 列标题{#column-header}

在**样式**>**标题行**中，可以对每一列的标题行进行样式调整。具体可参考明细表[列标题](./columntable.md#column-header)。

![标题行](./images/2023-05-16-17-39-17.png)

## 数据行{#data-row}

在**样式**>**表格**>**数据行**中，可以调整分组表的数据行的样式。具体可参考明细表[数据行](./columntable.md#data-row)。

## 数据列{#datas-column}

在**样式**>**数据行**中，可以对每一列的数据列进行样式调整。具体可参考明细表[数据列](./columntable.md#datas-column)。
![数据列](./images/2023-05-16-17-45-44.png)

## 维度/指标{#dimension-target}

分组表中的分组字段一般取自模型表中的维度字段，而指标则取自模型表中的度量字段。在**样式**>**表格**>**维度/指标**中，可以统一对维度列（分组字段列）和指标列进行样式调整。具体如下：

![维度/指标](./images/2023-05-17-09-51-02.png)

- **单元格填充**：设置维度/指标列的数据内容列的背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **背景填充**：设置维度/指标列的数据内容列的背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
- **内边距**：设置维度/指标列数据内容在单元格内与四周边框的内边距大小

## 合计行{#total}

在分组表中可以直接统计每一个指标列的数据，并单独生成一个**合计行**供用户参考。

![合计行](./images/2023-05-17-09-58-04.png)

其他设置如下：

![合计行](./images/2023-05-17-10-15-08.png)

- **显示**：设置分组表是否启用合计行，默认不启用
- **位置**：设置合计行显示位置，提供**底部**和**顶部**两个位置，默认**底部**
- **字体**：设置合计行的数据内容字体，包括**字体**、**字号**、**位置**
- **单元格填充**：设置合计行的数据内容背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **背景填充**：设置合计行的数据内容背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
- **内边距**：设置合计行的数据内容在单元格内与四周边框的内边距大小

## 小计行{#subtotal}

分组表中存在两个及两个以上分组字段时，可以启用**小计行**对每一个分组进行一次数据合计。

![小计行](./images/2023-05-17-10-04-40.png)

其他设置如下：

![小计行](./images/2023-05-17-10-16-36.png)

- **显示**：设置分组表是否启用小计行，默认不启用
- **位置**：设置小计行显示位置，提供**底部**和**顶部**两个位置，默认**底部**
- **字体**：设置小计行的数据内容字体，包括**字体**、**字号**、**位置**
- **单元格填充**：设置小计行的数据内容背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **背景填充**：设置小计行的数据内容背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
- **内边距**：设置小计行的数据内容在单元格内与四周边框的内边距大小