---
order: 1
navTitle: 明细表
---
# 仪表板组件-明细表

明细表展示数据表中最细粒度的数据，显示的每条数据都对应于数据库表原始行的一条数据。如展示企业的基本信息：

![明细表](./images/2020-08-24-11-21-59.png)

示例：[明细表(企业基本信息表)](https://demo.succbi.com/v5/bi/%E6%98%8E%E7%BB%86%E8%A1%A8\(%E4%BC%81%E4%B8%9A%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E8%A1%A8\))

## 使用明细表组件{#start}

将需要展示的字段拖入到明细表中进行展示

**操作步骤**

![明细表](./images/2023-04-24-10-01-01.gif)

1. 双击或拖入【统一社会信用代码】、【企业名称】、【法定代表人】等6个维度字段、和度量字段【实缴资本(万元)】到**数据**
2. 右键【成立日期】，选择[排序](../../design/data/data-sort.md)>，指定字段为【成立日期】，选择排序方式为**升序**
3. 在**基本**中，设置分页的每页行数
4. 可为明细表添加条件样式，设置[数据条](../../../../report/design/style/condition-style.md)，[突出显示](../../../../report/design/style/condition-style.md#highlight)和[色阶](../../../../report/design/style/condition-style.md#color-scale)等

通过上述4个步骤，即可快速实现企业基本信息并按照成立日期进行升序排列。

## 属性介绍{#properties}

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

![表格组成](./images/2023-04-24-11-15-13.png)

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

- [组件属性](#table-properties)
- [分页栏](#paging)
- [标题行](#header-row)
- [数据行](#data-row)
- [数据列](#datas-column)

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

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

组件属性大致分为：

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

### 序号列{#number}

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

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

![序号](./images/2023-05-04-16-01-58.png)

在**样式**>**表格**>**序号列**中，可以调整明细表的序号列的样式。具体如下：

![序号列](./images/2023-04-26-16-28-58.png)

- **标题**：设置序号列标题内容和序号的显示格式，可参考[显示格式](../../design/data/displayformat.md)
- **字体**：设置明细表的数据行字体，包括**字体**、**字号**、**位置**
- **单元格填充**：统一设置明细表数据行每个单元格的背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **背景填充**：设置整个序号列的背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
- **内边距**：设置明细表序号列的内边距，可参考[内边距](../../design/type/basic/padding.md)
- **列宽**：设置明细表序号列的宽度，提供**自适应**和固定值两种宽度大小
  - **伸缩**：序号列会根据数据内容，进行自适应伸缩，伸缩的大小会根据**宽度范围**的值进行限制。**伸缩**提供**是**、**否**和**自定义**三种选项
  - **宽度范围**：限制序号列的伸缩宽度，当**列宽**选择了固定值时，**宽度范围**的最大默认值默认为**列宽**选择的固定值（支持手动修改）。
  - **空间剩余时，按比例放大**：当**伸缩**选择为自定义时，可以设置数据内容的单元格存在空余空间时，按照多大的比例进行放大
  - **空间不足时，按比例缩小**：当**伸缩**选择为自定义时，可以设置数据内容的单元格空间不足时，按照多大的比例进行缩小

::: tip
序号列无法参与条件样式的设置，如果需要将序号列设置成不同的样式，可以在模型中新增一个排序字段，将排序字段拖入到明细表中后，针对这个排序字段进行相关条件样式设置。
排序表达式参考如下：

- [RANK](../../../../exp/func/analysis/RANK.md)：返回排序字段值的标准竞争排名
- [RANK\_DENSE](../../../../exp/func/analysis/RANK_DENSE.md)：返回排序字段值的密集排名
- [RANK\_MODIFIED](../../../../exp/func/analysis/RANK_MODIFIED.md)：返回排序字段值调整后的竞争排名
- [ROW\_NUMBER](../../../../exp/func/analysis/ROW_NUMBER.md)：返回排序字段值的唯一排名
  :::

### 列头排序{#sort}

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

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

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

![列头排序](./images/2023-05-04-16-18-24.png)

### 滚动{#roll}

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

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

![滚动](./images/2023-05-04-16-28-21.png)

### 冻结{#freeze}

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

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

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

![冻结列](./images/2023-05-04-16-52-38.png)

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

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

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

![冻结线](./images/2023-04-25-17-46-29.png)

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

**布局**中可以对明细表所有列和行先进行统一的样式设置，包括**列宽**、**行高**、**自动撑大行高**等属性，具体如下：

![布局](./images/2023-04-25-16-57-06.png)

- 列宽：即设置每列的宽度
  - 等分列宽：即每列宽度一致，为等分表格组件的宽度
  - 适应内容：即根据文字长度与文字大小撑大列宽
- 行高：即设置每行的高度
  - 适应容器：即每行高度等分表格的高度
  - 适应内容：即高度根据文字大小的倍数设置，单位为px，输入大于0的数字即可
  - 自定义：自定义**标题行高**和**内容行高**，单位为px，输入大于0的数字即可
- 自动撑大行高：根据内容自动撑大数据行高度
- 允许用户调整列宽：勾选后，用户可以在查看页面自定义拖拽调整每列的列宽
- 自动调整组件高度：根据当前数据总行数的数量，自动调整组件的高度

### 边框{#border}

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

![边框](./images/2023-04-25-18-16-07.png)

具体设置如下：

![属性](./images/2023-05-16-16-41-55.png)

- **组件边框**：设置明细表组件的外边框，可以设置边框位置和线型。具体可参考[边框](../../design/type/basic/border.md)
- **表格外框**：设置明细表表格的外框，可以设置边框的位置和线型。具体可参考[边框](../../design/type/basic/border.md)
- **网格线**：设置明细表表格内部直接的网格线，可以设置网格线的位置和线型。具体可参考[边框](../../design/type/basic/border.md)

## 分页栏{#paging}

当数据行较多时，可设置分页为显示，并通过分页栏进行翻页查看数据。

![设置表格分页](./images/2020-08-24-16-00-26.png)

当**显示**分页时提供以下属性设置：

- 每页行数：设置表格每页显示的数据行数
- 位置：分页栏相对于表格的位置，可设置在表格的**顶部**或**底部**，默认为**底部**
- 对齐：设置分页栏在表格内的对齐方式，可选**居左对齐**、**居中对齐**、**居右对齐**、**两端对**齐，默认为**居中对齐**
- 页码样式：设置页码数字的样式，可选**无边框**、**方框**、**实心方框**，只有勾选**页码翻页**后才有此属性
- 页码翻页：默认勾选，勾选后可点击对应页码数字跳转到对应页。取消勾选后不会显示页码，只能通过**首页**、**上一页**、**下一页**或**末页**进行翻页
- 跳转翻页：勾选后会可通过页码输入框跳转到指定页，默认不勾选
- 显示总行数：显示数据总行数，默认勾选

## 标题行{#header-row}

明细表标题分为三种：

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

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

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

在**样式**>**标题**中可以设置标题的显示与隐藏，样式等。

设置明细表组件的标题样式，具体如下：

![组件标题](./images/2023-04-26-14-00-31.png)

- **布局**：设置明细表标题是否显示，默认不勾选**显示**
- **字体**：设置组件标题字体，包括**字体**、**字号**、**位置**和**是否换行**
- **图标**：设置组件标题的前后缀图标
- **填充**：设置组件标题的背景填充，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **边框**：设置组件标题的边框样式，可参考[边框](../../design/type/basic/border.md)。默认无边框
- **内边距**：设置组件标题的内边距，可参考[内边距](../../design/type/basic/padding.md)。默认内边距为10px
- **阴影**：设置组件标题的文字阴影，可参考[阴影](../../design/type/basic/shadow.md)。默认无阴影

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

在**样式**>**表格**>**标题行**中，可以调整明细表的标题行的样式。具体如下：

![标题行](./images/2023-04-26-14-50-11.png)

- **布局**：设置明细表的标题行是否显示，默认勾选**显示**
- **字体**：设置明细表的标题行字体，包括**字体**、**字号**、**位置**
- **单元格填充**：统一设置明细表标题行每个单元格的背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**颜色填充**
- **背景填充**：设置整个标题行的背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
  - **横向填充**：以标题行的每个横向单元格为整体，进行横向的填充
  - **纵向填充**：以标题行的每个纵向单元格为整体，进行纵向的填充
  - **区域填充**：以标题行整体为单位，进行填充

| 纵向填充 | 横向填充 | 区域填充 |
| :---------| :-------- | :-------- |
| ![纵向填充](./images/2023-04-26-15-51-31.png) | ![横向填充](./images/2023-04-26-15-56-47.png) | ![区域填充](./images/2023-04-26-16-03-40.png) |

- **内边距**：设置明细表标题行的内边距，可参考[内边距](../../design/type/basic/padding.md)。默认内边距为10px

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

在**样式**>**标题行**中，可以对每一列的标题行进行样式调整，具体如下：

![标题行](./images/2023-04-26-16-54-48.png)

- **字体**：设置具体列标题的字体，包括**字体**、**字号**、**位置**
- **自动换行**：当文字长度较长时，可设置换行显示，默认不勾选。勾选后行高会根据字体长度自动撑大
- **单元格填充**：设置明细表具体列的标题背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **内边距**：设置明细表指定列的内边距，可参考[内边距](../../design/type/basic/padding.md)
- **列宽**：设置明细表标题行的列宽，提供**自适应**和固定值两种宽度大小
- **分组标题**：针对多个列设置同一个**分组标题**，可以在被设置列的列标题上生成一个分组标题，具体如下：
  ![分组标题](./images/2023-04-26-17-12-27.png)
- **还原默认设置**：将指定列的标题样式还原成默认设置

## 数据行{#data-row}

在**样式**>**表格**>**数据行**中，可以调整明细表的数据行的样式。具体如下：

![数据行](./images/2023-04-26-16-08-38.png)

- **字体**：设置明细表的数据行字体，包括**字体**、**字号**、**位置**
- **单元格填充**：统一设置明细表数据行每个单元格的背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **隔行换色**：勾选后数据行的背景将会奇偶行颜色各异显示，若**样式**>**数据行**>**单元格填充**设置了背景，这里设置的优先级大于**隔行换色**的优先级，然后**隔行换色**的优先级大于**样式**>**表格**>**数据行**>**单元格填充**的优先级
- **背景填充**：设置整个数据行的背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
  - **横向填充**：以数据行的每个横向单元格为整体，进行横向的填充
  - **纵向填充**：以数据行的每个纵向单元格为整体，进行纵向的填充
  - **区域填充**：以数据行整体为单位，进行填充
- **内边距**：设置明细表数据行的内边距，可参考[内边距](../../design/type/basic/padding.md)

## 数据列{#datas-column}

在**样式**>**数据行**中，可以对每一列的数据列进行样式调整，具体如下：

![数据列](./images/2023-04-26-17-17-33.png)

- **字体**：设置具体列的数据内容字体，包括**字体**、**字号**、**位置**
- **单元格填充**：设置具体列的数据内容列的背景填充样式，填充方式包括**无填充**、**颜色填充**、**图片填充**和**动效填充**。默认**无填充**
- **背景填充**：设置具体列的数据内容列的背景填充，填充方式包括**无**、**横向填充**、**纵向填充**和**区域填充**。如果选择了填充方式，会自动显示背景填充选项，背景填充包括**无填充**、**颜色填充**和**图片填充**。默认填充方式为**无**
- **图标**：设置具体列的数据内容的前后缀图标，默认无图标
- **内边距**：设置具体列的数据内容内边距
- **合并单元格**：将具体列中相同内容的单元格进行合并
- **合并依据**：设置单元格合并的依旧，可以自定义合并依据
- **还原默认设置**：将指定列的数据列内容的样式还原成默认设置