Skip to content

docs(Table): add footerSummary prop #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anlyyao merged 1 commit into from
Apr 22, 2026
Merged

docs(Table): add footerSummary prop #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
5 changes: 4 additions & 1 deletion packages/products/tdesign-miniprogram/packages/components/table/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

## API


### BaseTable Props

name | type | default | description | required
Expand All @@ -15,11 +14,13 @@ columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>
data | Array | [] | table data。Typescript: `Array<T>` | N
empty | String | '' | empty text or empty element | N
fixed-rows | Array | - | Typescript: `Array<number>` | N
footer-summary | String | - | footer summary content | N
height | String / Number | - | table height | N
loading | Boolean | undefined | loading state table | N
loading-props | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
max-height | String / Number | - | table max height | N
row-key | String | 'id' | required。unique key for each row data | Y
rowspan-and-colspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
show-header | Boolean | true | show table header | N
stripe | Boolean | false | show stripe style | N
table-content-width | String | - | \- | N
Expand All @@ -39,13 +40,15 @@ name | Description
-- | --
cell-empty-content | \-
empty | empty text or empty element
footer-summary | footer summary content
loading | loading state table

### BaseTableCol

name | type | default | description | required
-- | -- | -- | -- | --
align | String | left | align type。options: left/right/center | N
cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
col-key | String | - | unique key for column | N
fixed | String | left | fixed current column to left or right。options: left/right | N
Expand Down
5 changes: 4 additions & 1 deletion packages/products/tdesign-miniprogram/packages/components/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

## API


### BaseTable Props

名称 | 类型 | 默认值 | 描述 | 必传
Expand All @@ -15,11 +14,13 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：
data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
empty | String | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider` | N
fixed-rows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
footer-summary | String | - | 表尾总结行 | N
height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
loading | Boolean | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 | N
loading-props | Object | - | 透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
max-height | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
row-key | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y
rowspan-and-colspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
show-header | Boolean | true | 是否显示表头 | N
stripe | Boolean | false | 是否显示斑马纹 | N
table-content-width | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N
Expand All @@ -39,13 +40,15 @@ row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指
-- | --
cell-empty-content | 自定义 `cell-empty-content` 显示内容
empty | 自定义 `empty` 显示内容
footer-summary | 自定义 `footer-summary` 显示内容
loading | 自定义 `loading` 显示内容

### BaseTableCol

名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
align | String | left | 列横向对齐方式。可选项：left/right/center | N
cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
fixed | String | left | 固定列显示位置。可选项：left/right | N
Expand Down
8 changes: 8 additions & 0 deletions packages/products/tdesign-miniprogram/packages/components/table/base-table-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ const props: TdBaseTableProps = {
fixedRows: {
type: Array,
},
/** 表尾总结行 */
footerSummary: {
type: String,
},
/** 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
height: {
type: null,
Expand All @@ -57,6 +61,10 @@ const props: TdBaseTableProps = {
value: 'id',
required: true,
},
/** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
rowspanAndColspan: {
type: null,
},
/** 是否显示表头 */
showHeader: {
type: Boolean,
Expand Down
36 changes: 35 additions & 1 deletion packages/products/tdesign-miniprogram/packages/components/table/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,13 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
type: ArrayConstructor;
value?: Array<number>;
};
/**
* 表尾总结行
*/
footerSummary?: {
type: StringConstructor;
value?: string;
};
/**
* 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
*/
Expand Down Expand Up @@ -91,6 +98,13 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
value?: string;
required?: boolean;
};
/**
* 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`
*/
rowspanAndColspan?: {
type: undefined;
value?: TableRowspanAndColspanFunc<T>;
};
/**
* 是否显示表头
* @default true
Expand Down Expand Up @@ -133,12 +147,16 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
};
}

export interface BaseTableCol {
export interface BaseTableCol<T extends TableRowData = TableRowData> {
/**
* 列横向对齐方式
* @default left
*/
align?: 'left' | 'right' | 'center';
/**
* 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型
*/
cell?: string | ((params: BaseTableCellParams<T>) => string);
/**
* 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型
*/
Expand All @@ -163,13 +181,29 @@ export interface BaseTableCol {
width?: string | number;
}

export type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan;

export interface RowspanColspan {
colspan?: number;
rowspan?: number;
}

export interface TableRowData {
[key: string]: any;
children?: TableRowData[];
}

export interface BaseTableCellParams<T> {
row: T;
rowIndex: number;
col: BaseTableCol<T>;
colIndex: number;
}

export type TableColumnClassName<T> = ClassName | ((context: CellData<T>) => ClassName);

export interface CellData<T> extends BaseTableCellParams<T> {
type: 'th' | 'td';
}

export type DataType = TableRowData;
4 changes: 4 additions & 0 deletions ...s/products/tdesign-miniprogram/packages/uniapp-components/table/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@ columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>
data | Array | [] | table data。Typescript: `Array<T>` | N
empty | String | '' | empty text or empty element | N
fixed-rows | Array | - | Typescript: `Array<number>` | N
footer-summary | String | - | footer summary content | N
height | String / Number | - | table height | N
loading | Boolean | undefined | loading state table | N
loading-props | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
max-height | String / Number | - | table max height | N
row-key | String | 'id' | required。unique key for each row data | Y
rowspan-and-colspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
show-header | Boolean | true | show table header | N
stripe | Boolean | false | show stripe style | N
table-content-width | String | - | \- | N
Expand All @@ -37,13 +39,15 @@ name | Description
-- | --
cell-empty-content | \-
empty | empty text or empty element
footer-summary | footer summary content
loading | loading state table

### BaseTableCol

name | type | default | description | required
-- | -- | -- | -- | --
align | String | left | align type。options: left/right/center | N
cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
col-key | String | - | unique key for column | N
fixed | String | left | fixed current column to left or right。options: left/right | N
Expand Down
4 changes: 4 additions & 0 deletions packages/products/tdesign-miniprogram/packages/uniapp-components/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：
data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
empty | String | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider` | N
fixed-rows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
footer-summary | String | - | 表尾总结行 | N
height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
loading | Boolean | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 | N
loading-props | Object | - | 透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
max-height | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
row-key | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y
rowspan-and-colspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
show-header | Boolean | true | 是否显示表头 | N
stripe | Boolean | false | 是否显示斑马纹 | N
table-content-width | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N
Expand All @@ -37,13 +39,15 @@ row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指
-- | --
cell-empty-content | 自定义 `cell-empty-content` 显示内容
empty | 自定义 `empty` 显示内容
footer-summary | 自定义 `footer-summary` 显示内容
loading | 自定义 `loading` 显示内容

### BaseTableCol

名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
align | String | left | 列横向对齐方式。可选项：left/right/center | N
cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
fixed | String | left | 固定列显示位置。可选项：left/right | N
Expand Down
12 changes: 10 additions & 2 deletions packages/products/tdesign-miniprogram/packages/uniapp-components/table/base-table-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,18 @@ export default {
fixedRows: {
type: Array,
},
/** 表尾总结行 */
footerSummary: {
type: String,
},
/** 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
height: {
type: [String, Number],
},
/** 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 */
loading: {
type: Boolean,
default: undefined as TdBaseTableProps['loading'],
type: [Boolean, null],
default: null as TdBaseTableProps['loading'],
},
/** 透传加载组件全部属性 */
loadingProps: {
Expand All @@ -54,6 +58,10 @@ export default {
default: 'id',
required: true,
},
/** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
rowspanAndColspan: {
type: Function,
},
/** 是否显示表头 */
showHeader: {
type: Boolean,
Expand Down
Loading