Skip to content

Commit 16e8012

Browse files
tangjinzhoutangjinzhou
committed
feat: table support summary
1 parent 9693d89 commit 16e8012

18 files changed

+366
-74
lines changed

‎components/components.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,14 @@ export type {
172172
ColumnProps as TableColumnProps,
173173
ColumnsType as TableColumnsType,
174174
} from './table';
175-
export { default as Table, TableColumn, TableColumnGroup } from './table';
175+
export {
176+
default as Table,
177+
TableColumn,
178+
TableColumnGroup,
179+
TableSummary,
180+
TableSummaryRow,
181+
TableSummaryCell,
182+
} from './table';
176183

177184
export type { TransferProps } from './transfer';
178185
export { default as Transfer } from './transfer';

‎components/table/Column.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineComponent } from 'vue';
22
import type { ColumnType } from './interface';
33

4-
export type ColumnProps = ColumnType;
4+
export type ColumnProps<RecordType = unknown> = ColumnType<RecordType>;
55
export default defineComponent<ColumnProps>({
66
name: 'ATableColumn',
77
slots: ['title', 'filterIcon'],

‎components/table/Table.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -489,7 +489,9 @@ const InteralTable = defineComponent<
489489

490490
return classNames(
491491
{
492-
[`${prefixCls}-row-selected`]: selectedKeySet.value.has(getRowKey.value(record, index)),
492+
[`${prefixCls.value}-row-selected`]: selectedKeySet.value.has(
493+
getRowKey.value(record, index),
494+
),
493495
},
494496
mergedRowClassName,
495497
);
@@ -645,11 +647,4 @@ const Table = defineComponent<TableProps>({
645647
},
646648
});
647649

648-
Table.SELECTION_ALL = SELECTION_ALL;
649-
Table.SELECTION_INVERT = SELECTION_INVERT;
650-
Table.SELECTION_NONE = SELECTION_NONE;
651-
Table.Column = Column;
652-
Table.ColumnGroup = ColumnGroup;
653-
Table.Summary = Summary;
654-
655650
export default Table;

‎components/table/demo/ellipsis.vue

-4
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@ Ellipsis cell content via setting `column.ellipsis`.
2020

2121
<template>
2222
<a-table :columns="columns" :data-source="data">
23-
<template #name="{ text }">
24-
<a>{{ text }}</a>
25-
</template>
2623
<template #bodyCell="{ column, text }">
2724
<template v-if="column.dataIndex === 'name'">
2825
<a>{{ text }}</a>
@@ -38,7 +35,6 @@ const columns = [
3835
title: 'Name',
3936
dataIndex: 'name',
4037
key: 'name',
41-
slots: { customRender: 'name' },
4238
},
4339
{
4440
title: 'Age',

‎components/table/demo/index.vue

+6
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@
1515
<FixedHeader />
1616
<GroupingColumns />
1717
<Head />
18+
<MultipleSorter />
1819
<NestedTable />
1920
<ResetFilter />
2021
<RowSelectionAndOperation />
2122
<RowSelectionCustom />
2223
<RowSelection />
2324
<Size />
2425
<Stripe />
26+
<Summary />
2527
<TemplateCom />
2628
</demo-sort>
2729
</template>
@@ -51,6 +53,8 @@ import Size from './size.vue';
5153
import TemplateCom from './template.vue';
5254
import Ellipsis from './ellipsis.vue';
5355
import Stripe from './stripe.vue';
56+
import MultipleSorter from './multiple-sorter.vue';
57+
import Summary from './summary.vue';
5458
import CN from '../index.zh-CN.md';
5559
import US from '../index.en-US.md';
5660
@@ -81,6 +85,8 @@ export default {
8185
Size,
8286
TemplateCom,
8387
Stripe,
88+
MultipleSorter,
89+
Summary,
8490
},
8591
};
8692
</script>

‎components/table/demo/multiple-sorter.vue

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
en-US: Multiple sorter
6+
zh-CN: 多列排序
7+
---
8+
9+
## zh-CN
10+
11+
`column.sorter` 支持 `multiple` 字段以配置多列排序优先级。通过 `sorter.compare` 配置排序逻辑，你可以通过不设置该函数只启动多列排序的交互形式。
12+
13+
## en-US
14+
15+
`column.sorter` support `multiple` to config the priority of sort columns. Though `sorter.compare` to customize compare function. You can also leave it empty to use the interactive only.
16+
17+
</docs>
18+
19+
<template>
20+
<a-table :columns="columns" :data-source="data" @change="onChange" />
21+
</template>
22+
23+
<script lang="ts">
24+
import { defineComponent } from 'vue';
25+
26+
const columns = [
27+
{
28+
title: 'Name',
29+
dataIndex: 'name',
30+
},
31+
{
32+
title: 'Chinese Score',
33+
dataIndex: 'chinese',
34+
sorter: {
35+
compare: (a, b) => a.chinese - b.chinese,
36+
multiple: 3,
37+
},
38+
},
39+
{
40+
title: 'Math Score',
41+
dataIndex: 'math',
42+
sorter: {
43+
compare: (a, b) => a.math - b.math,
44+
multiple: 2,
45+
},
46+
},
47+
{
48+
title: 'English Score',
49+
dataIndex: 'english',
50+
sorter: {
51+
compare: (a, b) => a.english - b.english,
52+
multiple: 1,
53+
},
54+
},
55+
];
56+
57+
const data = [
58+
{
59+
key: '1',
60+
name: 'John Brown',
61+
chinese: 98,
62+
math: 60,
63+
english: 70,
64+
},
65+
{
66+
key: '2',
67+
name: 'Jim Green',
68+
chinese: 98,
69+
math: 66,
70+
english: 89,
71+
},
72+
{
73+
key: '3',
74+
name: 'Joe Black',
75+
chinese: 98,
76+
math: 90,
77+
english: 70,
78+
},
79+
{
80+
key: '4',
81+
name: 'Jim Red',
82+
chinese: 88,
83+
math: 99,
84+
english: 89,
85+
},
86+
];
87+
88+
export default defineComponent({
89+
setup() {
90+
return {
91+
data,
92+
columns,
93+
onChange: (pagination, filters, sorter, extra) => {
94+
console.log('params', pagination, filters, sorter, extra);
95+
},
96+
};
97+
},
98+
});
99+
</script>

‎components/table/demo/row-selection-and-operation.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@ To perform operations and clear selections after selecting some rows, use `rowSe
3737
</template>
3838
<script lang="ts">
3939
import { computed, defineComponent, reactive, toRefs } from 'vue';
40-
import { ColumnProps } from 'ant-design-vue/es/table/interface';
4140
42-
type Key = ColumnProps['key'];
41+
type Key = string | number;
4342
4443
interface DataType {
4544
key: Key;

‎components/table/demo/row-selection-custom.vue

+11-17
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,10 @@ Use `rowSelection.selections` custom selections, default no select dropdown, sho
1919
</template>
2020
<script lang="ts">
2121
import { defineComponent, computed, ref, unref } from 'vue';
22-
import { ColumnProps } from 'ant-design-vue/es/table/interface';
23-
24-
type Key = ColumnProps['key'];
22+
import { Table } from 'ant-design-vue';
2523
2624
interface DataType {
27-
key: Key;
25+
key: string | number;
2826
name: string;
2927
age: number;
3028
address: string;
@@ -57,9 +55,9 @@ for (let i = 0; i < 46; i++) {
5755
5856
export default defineComponent({
5957
setup() {
60-
const selectedRowKeys = ref<Key[]>([]); // Check here to configure the default column
58+
const selectedRowKeys = ref<DataType['key'][]>([]); // Check here to configure the default column
6159
62-
const onSelectChange = (changableRowKeys: Key[]) => {
60+
const onSelectChange = (changableRowKeys: string[]) => {
6361
console.log('selectedRowKeys changed: ', changableRowKeys);
6462
selectedRowKeys.value = changableRowKeys;
6563
};
@@ -70,19 +68,15 @@ export default defineComponent({
7068
onChange: onSelectChange,
7169
hideDefaultSelections: true,
7270
selections: [
73-
{
74-
key: 'all-data',
75-
text: 'Select All Data',
76-
onSelect: () => {
77-
selectedRowKeys.value = [...Array(46).keys()]; // 0...45
78-
},
79-
},
71+
Table.SELECTION_ALL,
72+
Table.SELECTION_INVERT,
73+
Table.SELECTION_NONE,
8074
{
8175
key: 'odd',
8276
text: 'Select Odd Row',
83-
onSelect: (changableRowKeys: Key[]) => {
77+
onSelect: changableRowKeys => {
8478
let newSelectedRowKeys = [];
85-
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
79+
newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
8680
if (index % 2 !== 0) {
8781
return false;
8882
}
@@ -94,9 +88,9 @@ export default defineComponent({
9488
{
9589
key: 'even',
9690
text: 'Select Even Row',
97-
onSelect: (changableRowKeys: Key[]) => {
91+
onSelect: changableRowKeys => {
9892
let newSelectedRowKeys = [];
99-
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
93+
newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
10094
if (index % 2 !== 0) {
10195
return true;
10296
}

‎components/table/demo/row-selection.vue

+12-12
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,40 @@ title:
77
---
88

99
## zh-CN
10-
第一列是联动的选择框。
10+
第一列是联动的选择框。
1111
默认点击 checkbox 触发选择行为，需要 `点击行` 触发可参考例子：https://codesandbox.io/s/row-selection-on-click-tr58v
1212

1313
## en-US
14-
Rows can be selectable by making first column as a selectable column.
14+
Rows can be selectable by making first column as a selectable column.
1515
selection happens when clicking checkbox defaultly. You can see https://codesandbox.io/s/row-selection-on-click-tr58v if you need row-click selection behavior.
1616

1717
</docs>
1818

1919
<template>
2020
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
21-
<template #name="{ text }">
22-
<a>{{ text }}</a>
21+
<template #bodyCell="{ column, text }">
22+
<template v-if="column.dataIndex === 'name'">
23+
<a>{{ text }}</a>
24+
</template>
25+
<template v-else>{{ text }}</template>
2326
</template>
2427
</a-table>
2528
</template>
2629
<script lang="ts">
2730
import { defineComponent } from 'vue';
28-
import { ColumnProps } from 'ant-design-vue/es/table/interface';
29-
30-
type Key = ColumnProps['key'];
31+
import type { TableProps, TableColumnType } from 'ant-design-vue';
3132
3233
interface DataType {
33-
key: Key;
34+
key: string;
3435
name: string;
3536
age: number;
3637
address: string;
3738
}
3839
39-
const columns = [
40+
const columns: TableColumnType<DataType>[] = [
4041
{
4142
title: 'Name',
4243
dataIndex: 'name',
43-
slots: { customRender: 'name' },
4444
},
4545
{
4646
title: 'Age',
@@ -80,8 +80,8 @@ const data: DataType[] = [
8080
8181
export default defineComponent({
8282
setup() {
83-
const rowSelection = {
84-
onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
83+
const rowSelection: TableProps['rowSelection'] = {
84+
onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
8585
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
8686
},
8787
getCheckboxProps: (record: DataType) => ({

0 commit comments

Comments
 (0)