From 16e801249cccdc9757ff966cb24355925581278f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 9 Sep 2021 23:16:08 +0800
Subject: [PATCH] feat: table support summary

---
 components/components.ts                      |   9 +-
 components/table/Column.tsx                   |   2 +-
 components/table/Table.tsx                    |  11 +-
 components/table/demo/ellipsis.vue            |   4 -
 components/table/demo/index.vue               |   6 +
 components/table/demo/multiple-sorter.vue     |  99 +++++++++++
 .../demo/row-selection-and-operation.vue      |   3 +-
 .../table/demo/row-selection-custom.vue       |  28 ++--
 components/table/demo/row-selection.vue       |  24 +--
 components/table/demo/summary.vue             | 158 ++++++++++++++++++
 components/table/index.tsx                    |  70 ++++++--
 components/vc-table/Cell/index.tsx            |   2 +-
 components/vc-table/Footer/Cell.tsx           |   5 +-
 components/vc-table/Footer/Summary.tsx        |   4 -
 components/vc-table/Footer/index.tsx          |   3 +
 components/vc-table/Table.tsx                 |   6 +-
 components/vc-table/index.ts                  |   4 +-
 site/debugger/index.tsx                       |   2 +-
 18 files changed, 366 insertions(+), 74 deletions(-)
 create mode 100644 components/table/demo/multiple-sorter.vue
 create mode 100644 components/table/demo/summary.vue

diff --git a/components/components.ts b/components/components.ts
index 8ed64834e..eb8b75c61 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -172,7 +172,14 @@ export type {
   ColumnProps as TableColumnProps,
   ColumnsType as TableColumnsType,
 } from './table';
-export { default as Table, TableColumn, TableColumnGroup } from './table';
+export {
+  default as Table,
+  TableColumn,
+  TableColumnGroup,
+  TableSummary,
+  TableSummaryRow,
+  TableSummaryCell,
+} from './table';
 
 export type { TransferProps } from './transfer';
 export { default as Transfer } from './transfer';
diff --git a/components/table/Column.tsx b/components/table/Column.tsx
index 890072b7d..588cddedf 100644
--- a/components/table/Column.tsx
+++ b/components/table/Column.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import type { ColumnType } from './interface';
 
-export type ColumnProps = ColumnType;
+export type ColumnProps<RecordType = unknown> = ColumnType<RecordType>;
 export default defineComponent<ColumnProps>({
   name: 'ATableColumn',
   slots: ['title', 'filterIcon'],
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index b2e8b5557..109b7f92f 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -489,7 +489,9 @@ const InteralTable = defineComponent<
 
       return classNames(
         {
-          [`${prefixCls}-row-selected`]: selectedKeySet.value.has(getRowKey.value(record, index)),
+          [`${prefixCls.value}-row-selected`]: selectedKeySet.value.has(
+            getRowKey.value(record, index),
+          ),
         },
         mergedRowClassName,
       );
@@ -645,11 +647,4 @@ const Table = defineComponent<TableProps>({
   },
 });
 
-Table.SELECTION_ALL = SELECTION_ALL;
-Table.SELECTION_INVERT = SELECTION_INVERT;
-Table.SELECTION_NONE = SELECTION_NONE;
-Table.Column = Column;
-Table.ColumnGroup = ColumnGroup;
-Table.Summary = Summary;
-
 export default Table;
diff --git a/components/table/demo/ellipsis.vue b/components/table/demo/ellipsis.vue
index 996d441b9..f55362801 100644
--- a/components/table/demo/ellipsis.vue
+++ b/components/table/demo/ellipsis.vue
@@ -20,9 +20,6 @@ Ellipsis cell content via setting `column.ellipsis`.
 
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #name="{ text }">
-      <a>{{ text }}</a>
-    </template>
     <template #bodyCell="{ column, text }">
       <template v-if="column.dataIndex === 'name'">
         <a>{{ text }}</a>
@@ -38,7 +35,6 @@ const columns = [
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
-    slots: { customRender: 'name' },
   },
   {
     title: 'Age',
diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue
index d0fad376d..b555b2f62 100644
--- a/components/table/demo/index.vue
+++ b/components/table/demo/index.vue
@@ -15,6 +15,7 @@
     <FixedHeader />
     <GroupingColumns />
     <Head />
+    <MultipleSorter />
     <NestedTable />
     <ResetFilter />
     <RowSelectionAndOperation />
@@ -22,6 +23,7 @@
     <RowSelection />
     <Size />
     <Stripe />
+    <Summary />
     <TemplateCom />
   </demo-sort>
 </template>
@@ -51,6 +53,8 @@ import Size from './size.vue';
 import TemplateCom from './template.vue';
 import Ellipsis from './ellipsis.vue';
 import Stripe from './stripe.vue';
+import MultipleSorter from './multiple-sorter.vue';
+import Summary from './summary.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -81,6 +85,8 @@ export default {
     Size,
     TemplateCom,
     Stripe,
+    MultipleSorter,
+    Summary,
   },
 };
 </script>
diff --git a/components/table/demo/multiple-sorter.vue b/components/table/demo/multiple-sorter.vue
new file mode 100644
index 000000000..1dcec9f0d
--- /dev/null
+++ b/components/table/demo/multiple-sorter.vue
@@ -0,0 +1,99 @@
+<docs>
+---
+order: 7
+title:
+  en-US: Multiple sorter
+  zh-CN: 多列排序
+---
+
+## zh-CN
+
+`column.sorter` 支持 `multiple` 字段以配置多列排序优先级。通过 `sorter.compare` 配置排序逻辑，你可以通过不设置该函数只启动多列排序的交互形式。
+
+## en-US
+
+`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.
+
+</docs>
+
+<template>
+  <a-table :columns="columns" :data-source="data" @change="onChange" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+  },
+  {
+    title: 'Chinese Score',
+    dataIndex: 'chinese',
+    sorter: {
+      compare: (a, b) => a.chinese - b.chinese,
+      multiple: 3,
+    },
+  },
+  {
+    title: 'Math Score',
+    dataIndex: 'math',
+    sorter: {
+      compare: (a, b) => a.math - b.math,
+      multiple: 2,
+    },
+  },
+  {
+    title: 'English Score',
+    dataIndex: 'english',
+    sorter: {
+      compare: (a, b) => a.english - b.english,
+      multiple: 1,
+    },
+  },
+];
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    chinese: 98,
+    math: 60,
+    english: 70,
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    chinese: 98,
+    math: 66,
+    english: 89,
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    chinese: 98,
+    math: 90,
+    english: 70,
+  },
+  {
+    key: '4',
+    name: 'Jim Red',
+    chinese: 88,
+    math: 99,
+    english: 89,
+  },
+];
+
+export default defineComponent({
+  setup() {
+    return {
+      data,
+      columns,
+      onChange: (pagination, filters, sorter, extra) => {
+        console.log('params', pagination, filters, sorter, extra);
+      },
+    };
+  },
+});
+</script>
diff --git a/components/table/demo/row-selection-and-operation.vue b/components/table/demo/row-selection-and-operation.vue
index 38e80e9e0..4199c126b 100644
--- a/components/table/demo/row-selection-and-operation.vue
+++ b/components/table/demo/row-selection-and-operation.vue
@@ -37,9 +37,8 @@ To perform operations and clear selections after selecting some rows, use `rowSe
 </template>
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs } from 'vue';
-import { ColumnProps } from 'ant-design-vue/es/table/interface';
 
-type Key = ColumnProps['key'];
+type Key = string | number;
 
 interface DataType {
   key: Key;
diff --git a/components/table/demo/row-selection-custom.vue b/components/table/demo/row-selection-custom.vue
index 3a0c82ef7..e7bcc47e2 100644
--- a/components/table/demo/row-selection-custom.vue
+++ b/components/table/demo/row-selection-custom.vue
@@ -19,12 +19,10 @@ Use `rowSelection.selections` custom selections, default no select dropdown, sho
 </template>
 <script lang="ts">
 import { defineComponent, computed, ref, unref } from 'vue';
-import { ColumnProps } from 'ant-design-vue/es/table/interface';
-
-type Key = ColumnProps['key'];
+import { Table } from 'ant-design-vue';
 
 interface DataType {
-  key: Key;
+  key: string | number;
   name: string;
   age: number;
   address: string;
@@ -57,9 +55,9 @@ for (let i = 0; i < 46; i++) {
 
 export default defineComponent({
   setup() {
-    const selectedRowKeys = ref<Key[]>([]); // Check here to configure the default column
+    const selectedRowKeys = ref<DataType['key'][]>([]); // Check here to configure the default column
 
-    const onSelectChange = (changableRowKeys: Key[]) => {
+    const onSelectChange = (changableRowKeys: string[]) => {
       console.log('selectedRowKeys changed: ', changableRowKeys);
       selectedRowKeys.value = changableRowKeys;
     };
@@ -70,19 +68,15 @@ export default defineComponent({
         onChange: onSelectChange,
         hideDefaultSelections: true,
         selections: [
-          {
-            key: 'all-data',
-            text: 'Select All Data',
-            onSelect: () => {
-              selectedRowKeys.value = [...Array(46).keys()]; // 0...45
-            },
-          },
+          Table.SELECTION_ALL,
+          Table.SELECTION_INVERT,
+          Table.SELECTION_NONE,
           {
             key: 'odd',
             text: 'Select Odd Row',
-            onSelect: (changableRowKeys: Key[]) => {
+            onSelect: changableRowKeys => {
               let newSelectedRowKeys = [];
-              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+              newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
                 if (index % 2 !== 0) {
                   return false;
                 }
@@ -94,9 +88,9 @@ export default defineComponent({
           {
             key: 'even',
             text: 'Select Even Row',
-            onSelect: (changableRowKeys: Key[]) => {
+            onSelect: changableRowKeys => {
               let newSelectedRowKeys = [];
-              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+              newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
                 if (index % 2 !== 0) {
                   return true;
                 }
diff --git a/components/table/demo/row-selection.vue b/components/table/demo/row-selection.vue
index 63fd917a7..fd632a120 100644
--- a/components/table/demo/row-selection.vue
+++ b/components/table/demo/row-selection.vue
@@ -7,40 +7,40 @@ title:
 ---
 
 ## zh-CN
-第一列是联动的选择框。  
+第一列是联动的选择框。
 默认点击 checkbox 触发选择行为，需要 `点击行` 触发可参考例子：https://codesandbox.io/s/row-selection-on-click-tr58v
 
 ## en-US
-Rows can be selectable by making first column as a selectable column.  
+Rows can be selectable by making first column as a selectable column.
 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.
 
 </docs>
 
 <template>
   <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
-    <template #name="{ text }">
-      <a>{{ text }}</a>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.dataIndex === 'name'">
+        <a>{{ text }}</a>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ColumnProps } from 'ant-design-vue/es/table/interface';
-
-type Key = ColumnProps['key'];
+import type { TableProps, TableColumnType } from 'ant-design-vue';
 
 interface DataType {
-  key: Key;
+  key: string;
   name: string;
   age: number;
   address: string;
 }
 
-const columns = [
+const columns: TableColumnType<DataType>[] = [
   {
     title: 'Name',
     dataIndex: 'name',
-    slots: { customRender: 'name' },
   },
   {
     title: 'Age',
@@ -80,8 +80,8 @@ const data: DataType[] = [
 
 export default defineComponent({
   setup() {
-    const rowSelection = {
-      onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
+    const rowSelection: TableProps['rowSelection'] = {
+      onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
         console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
       },
       getCheckboxProps: (record: DataType) => ({
diff --git a/components/table/demo/summary.vue b/components/table/demo/summary.vue
new file mode 100644
index 000000000..a2e300d2d
--- /dev/null
+++ b/components/table/demo/summary.vue
@@ -0,0 +1,158 @@
+<docs>
+---
+order: 29
+title:
+  en-US: Summary
+  zh-CN: 总结栏
+---
+
+## zh-CN
+
+通过 `summary` 设置总结栏。使用 `a-table-summary-cell` 同步 Column 的固定状态。你可以通过配置 `a-table-summary` 的 `fixed` 属性使其固定。
+
+## en-US
+
+Set summary content by `summary` prop. Sync column fixed status with `a-table-summary-cell`. You can fixed it by set `a-table-summary` `fixed` prop.
+
+</docs>
+
+<template>
+  <a-table :columns="columns" :data-source="data" :pagination="false" bordered>
+    <template #summary>
+      <a-table-summary-row>
+        <a-table-summary-cell>Total</a-table-summary-cell>
+        <a-table-summary-cell>
+          <a-typography-text type="danger">{{ totals.totalBorrow }}</a-typography-text>
+        </a-table-summary-cell>
+        <a-table-summary-cell>
+          <a-typography-text>{{ totals.totalRepayment }}</a-typography-text>
+        </a-table-summary-cell>
+      </a-table-summary-row>
+      <a-table-summary-row>
+        <a-table-summary-cell>Balance</a-table-summary-cell>
+        <a-table-summary-cell :col-span="2">
+          <a-typography-text type="danger">
+            {{ totals.totalBorrow - totals.totalRepayment }}
+          </a-typography-text>
+        </a-table-summary-cell>
+      </a-table-summary-row>
+    </template>
+  </a-table>
+  <a-table
+    :columns="fixedColumns"
+    :data-source="fixedData"
+    :pagination="false"
+    :scroll="{ x: 2000, y: 500 }"
+    bordered
+  >
+    <template #summary>
+      <a-table-summary fixed>
+        <a-table-summary-row>
+          <a-table-summary-cell :index="0">Summary</a-table-summary-cell>
+          <a-table-summary-cell :index="1">This is a summary content</a-table-summary-cell>
+        </a-table-summary-row>
+      </a-table-summary>
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const columns = ref([
+      {
+        title: 'Name',
+        dataIndex: 'name',
+      },
+      {
+        title: 'Borrow',
+        dataIndex: 'borrow',
+      },
+      {
+        title: 'Repayment',
+        dataIndex: 'repayment',
+      },
+    ]);
+
+    const data = ref([
+      {
+        key: '1',
+        name: 'John Brown',
+        borrow: 10,
+        repayment: 33,
+      },
+      {
+        key: '2',
+        name: 'Jim Green',
+        borrow: 100,
+        repayment: 0,
+      },
+      {
+        key: '3',
+        name: 'Joe Black',
+        borrow: 10,
+        repayment: 10,
+      },
+      {
+        key: '4',
+        name: 'Jim Red',
+        borrow: 75,
+        repayment: 45,
+      },
+    ]);
+
+    const fixedColumns = ref([
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        fixed: true,
+        width: 100,
+      },
+      {
+        title: 'Description',
+        dataIndex: 'description',
+      },
+    ]);
+
+    const fixedData = ref<{ key: number; name: string; description: string }[]>([]);
+    for (let i = 0; i < 20; i += 1) {
+      fixedData.value.push({
+        key: i,
+        name: ['Light', 'Bamboo', 'Little'][i % 3],
+        description: 'Everything that has a beginning, has an end.',
+      });
+    }
+
+    const totals = computed(() => {
+      let totalBorrow = 0;
+      let totalRepayment = 0;
+
+      data.value.forEach(({ borrow, repayment }) => {
+        totalBorrow += borrow;
+        totalRepayment += repayment;
+      });
+      return { totalBorrow, totalRepayment };
+    });
+    return {
+      data,
+      columns,
+      totals,
+      fixedColumns,
+      fixedData,
+    };
+  },
+});
+</script>
+
+<style>
+#components-table-demo-summary tfoot th,
+#components-table-demo-summary tfoot td {
+  background: #fafafa;
+}
+[data-theme='dark'] #components-table-demo-summary tfoot th,
+[data-theme='dark'] #components-table-demo-summary tfoot td {
+  background: #1d1d1d;
+}
+</style>
diff --git a/components/table/index.tsx b/components/table/index.tsx
index 9784f2ce8..0c9dc2f02 100644
--- a/components/table/index.tsx
+++ b/components/table/index.tsx
@@ -1,27 +1,67 @@
 import Table, { tableProps } from './Table';
-import type Column from './Column';
-import type ColumnGroup from './ColumnGroup';
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
 import type { TableProps, TablePaginationConfig } from './Table';
-import type { App } from 'vue';
+import { App, defineComponent } from 'vue';
+import { Summary, SummaryCell, SummaryRow } from '../vc-table';
+import { SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE } from './hooks/useSelection';
 
 export type { ColumnProps } from './Column';
 export type { ColumnsType, ColumnType, ColumnGroupType } from './interface';
 export type { TableProps, TablePaginationConfig };
 
+const TableSummaryRow = defineComponent({ ...SummaryRow, name: 'ATableSummaryRow' });
+const TableSummaryCell = defineComponent({ ...SummaryCell, name: 'ATableSummaryCell' });
+
+const TempSummary = defineComponent({
+  ...Summary,
+  name: 'ATableSummary',
+});
+
+const TableSummary = TempSummary as typeof TempSummary & {
+  Cell: typeof TableSummaryCell;
+  Row: typeof TableSummaryRow;
+};
+TableSummary.Cell = TableSummaryCell;
+TableSummary.Row = TableSummaryRow;
+
+const T = Table as typeof Table &
+  Plugin & {
+    Column: typeof Column;
+    ColumnGroup: typeof ColumnGroup;
+    Summary: typeof TableSummary;
+    SELECTION_ALL: typeof SELECTION_ALL;
+    SELECTION_INVERT: typeof SELECTION_INVERT;
+    SELECTION_NONE: typeof SELECTION_NONE;
+  };
+
+T.SELECTION_ALL = SELECTION_ALL;
+T.SELECTION_INVERT = SELECTION_INVERT;
+T.SELECTION_NONE = SELECTION_NONE;
+
+T.Column = Column;
+T.ColumnGroup = ColumnGroup;
+
+T.Summary = TableSummary;
+
 /* istanbul ignore next */
-Table.install = function (app: App) {
-  app.component(Table.name, Table);
-  app.component(Table.Column.name, Table.Column);
-  app.component(Table.ColumnGroup.name, Table.ColumnGroup);
+T.install = function (app: App) {
+  app.component(TableSummary.name, TableSummary);
+  app.component(TableSummaryCell.name, TableSummaryCell);
+  app.component(TableSummaryRow.name, TableSummaryRow);
+  app.component(T.name, T);
+  app.component(T.Column.name, Column);
+  app.component(T.ColumnGroup.name, ColumnGroup);
   return app;
 };
 
-export const TableColumn = Table.Column;
-export const TableColumnGroup = Table.ColumnGroup;
-export { tableProps };
+export {
+  tableProps,
+  TableSummary,
+  TableSummaryRow,
+  TableSummaryCell,
+  Column as TableColumn,
+  ColumnGroup as TableColumnGroup,
+};
 
-export default Table as typeof Table &
-  Plugin & {
-    readonly Column: typeof Column;
-    readonly ColumnGroup: typeof ColumnGroup;
-  };
+export default T;
diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
index 755152d5e..49b81e737 100644
--- a/components/vc-table/Cell/index.tsx
+++ b/components/vc-table/Cell/index.tsx
@@ -109,7 +109,7 @@ export default defineComponent<CellProps>({
         align,
         rowType,
         isSticky,
-        column,
+        column = {},
         cellType,
       } = props;
       const cellPrefixCls = `${prefixCls}-cell`;
diff --git a/components/vc-table/Footer/Cell.tsx b/components/vc-table/Footer/Cell.tsx
index 69bb032bb..305425adb 100644
--- a/components/vc-table/Footer/Cell.tsx
+++ b/components/vc-table/Footer/Cell.tsx
@@ -20,7 +20,7 @@ export default defineComponent<SummaryCellProps>({
     const tableContext = useInjectTable();
     const summaryContext = useInjectSummary();
     return () => {
-      const { index, colSpan, rowSpan, align } = props;
+      const { index, colSpan = 1, rowSpan, align } = props;
       const { prefixCls, direction } = tableContext;
       const { scrollColumnIndex, stickyOffsets, flattenColumns } = summaryContext;
       const lastIndex = index + colSpan - 1;
@@ -33,7 +33,6 @@ export default defineComponent<SummaryCellProps>({
         stickyOffsets,
         direction,
       );
-
       return (
         <Cell
           class={attrs.class as string}
@@ -44,7 +43,7 @@ export default defineComponent<SummaryCellProps>({
           dataIndex={null}
           align={align}
           customRender={() => ({
-            children: slots.defalut?.(),
+            children: slots.default?.(),
             props: {
               colSpan: mergedColSpan,
               rowSpan,
diff --git a/components/vc-table/Footer/Summary.tsx b/components/vc-table/Footer/Summary.tsx
index 68bd95f8a..a559b5feb 100644
--- a/components/vc-table/Footer/Summary.tsx
+++ b/components/vc-table/Footer/Summary.tsx
@@ -1,7 +1,5 @@
 import { computed, defineComponent, onBeforeUnmount, watchEffect } from 'vue';
 import { useInjectTable } from '../context/TableContext';
-import Cell from './Cell';
-import Row from './Row';
 
 export interface SummaryProps {
   fixed?: boolean | 'top' | 'bottom';
@@ -11,8 +9,6 @@ let indexGuid = 0;
 const Summary = defineComponent<SummaryProps>({
   props: ['fixed'] as any,
   name: 'Summary',
-  Row,
-  Cell,
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     const uniKey = `table-summary-uni-key-${++indexGuid}`;
diff --git a/components/vc-table/Footer/index.tsx b/components/vc-table/Footer/index.tsx
index 1af9e018c..26f020856 100644
--- a/components/vc-table/Footer/index.tsx
+++ b/components/vc-table/Footer/index.tsx
@@ -1,4 +1,6 @@
 import Summary from './Summary';
+import SummaryRow from './Row';
+import SummaryCell from './Cell';
 import type { DefaultRecordType, StickyOffsets } from '../interface';
 import { computed, defineComponent, reactive, toRef } from 'vue';
 import type { FlattenColumns } from '../context/SummaryContext';
@@ -34,4 +36,5 @@ export default defineComponent({
   },
 });
 
+export { SummaryRow, SummaryCell };
 export const FooterComponents = Summary;
diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
index 521104186..aca19a6ca 100644
--- a/components/vc-table/Table.tsx
+++ b/components/vc-table/Table.tsx
@@ -332,7 +332,7 @@ export default defineComponent<TableProps>({
     const summaryFixedInfos = reactive<Record<string, boolean | string>>({});
     const fixFooter = computed(() => {
       const info = Object.values(summaryFixedInfos)[0];
-      return fixHeader.value || (stickyState.value.isSticky && info);
+      return (fixHeader.value || stickyState.value.isSticky) && info;
     });
 
     const summaryCollect = (uniKey: string, fixed: boolean | string) => {
@@ -568,7 +568,7 @@ export default defineComponent<TableProps>({
         stickyState.value;
       const TableComponent = getComponent(['table'], 'table');
 
-      const summaryNode = slots.summary?.();
+      const summaryNode = slots.summary?.({ pageData: mergedData.value });
 
       let groupTableNode;
 
@@ -703,7 +703,7 @@ export default defineComponent<TableProps>({
             {bodyContent}
 
             {/* Summary Table */}
-            {fixFooter.value !== 'top' && (
+            {fixFooter.value && fixFooter.value !== 'top' && (
               <FixedHolder
                 {...fixedHolderProps}
                 stickyBottomOffset={offsetSummary}
diff --git a/components/vc-table/index.ts b/components/vc-table/index.ts
index efbde4cfd..51d2f8177 100644
--- a/components/vc-table/index.ts
+++ b/components/vc-table/index.ts
@@ -1,10 +1,10 @@
 // base rc-table@7.17.2
 import Table from './Table';
-import { FooterComponents as Summary } from './Footer';
+import { FooterComponents as Summary, SummaryCell, SummaryRow } from './Footer';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
 
-export { Summary, Column, ColumnGroup, INTERNAL_COL_DEFINE };
+export { Summary, Column, ColumnGroup, SummaryCell, SummaryRow, INTERNAL_COL_DEFINE };
 
 export default Table;
diff --git a/site/debugger/index.tsx b/site/debugger/index.tsx
index 30aa12cd2..2cb9f34c3 100644
--- a/site/debugger/index.tsx
+++ b/site/debugger/index.tsx
@@ -1,5 +1,5 @@
 // debugger tsx
-import Demo from '../../components/table/demo/template.vue';
+import Demo from '../../components/table/demo/summary.vue';
 
 export default {
   render() {