From 170aa8273eff9aa6a9875d65ddee785a6bfaeec2 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Mon, 14 Nov 2022 17:40:06 +0800
Subject: [PATCH 1/2] feat(comp:table): enhancement for icon of expandable and
 ellipsis

---
 .../components/_private/footer/src/Footer.tsx |   4 +-
 .../components/_private/footer/src/types.ts   |   5 +-
 packages/components/config/src/types.ts       |   2 +-
 packages/components/header/docs/Design.zh.md  |   8 +-
 packages/components/header/docs/Index.zh.md   |   1 +
 packages/components/header/docs/Theme.zh.md   |   4 +-
 .../header/style/themes/default.variable.less |   4 +-
 packages/components/space/docs/Index.zh.md    |   2 +-
 packages/components/space/docs/Theme.zh.md    |   4 +-
 packages/components/space/style/index.less    |   4 +
 .../space/style/themes/default.variable.less  |   4 +-
 .../components/statistic/docs/Theme.zh.md     |   2 +-
 .../style/themes/default.variable.less        |   2 +-
 packages/components/table/demo/AutoHeight.vue |   6 +-
 .../table/demo/AutoHeightVirtual.vue          |   4 +-
 packages/components/table/demo/Basic.vue      |   8 +-
 .../components/table/demo/ColSpanRowSpan.vue  |   2 +-
 .../table/demo/CustomAdditional.vue           |   2 +-
 packages/components/table/demo/EditCells.md   |  14 ++
 packages/components/table/demo/EditCells.vue  | 128 ++++++++++++++++++
 packages/components/table/demo/EditRows.md    |  14 ++
 packages/components/table/demo/EditRows.vue   | 121 +++++++++++++++++
 packages/components/table/demo/Expandable.vue |   2 +-
 packages/components/table/demo/Filterable.vue |   2 +-
 .../table/demo/FilterableFilterBy.vue         |   2 +-
 packages/components/table/demo/Fixed.vue      |   4 +-
 packages/components/table/demo/HeadGroup.vue  |   2 +-
 packages/components/table/demo/Selectable.vue |   3 +-
 .../table/demo/SelectableOptions.vue          |   2 +-
 packages/components/table/demo/Server.vue     |  20 +--
 packages/components/table/demo/Sortable.vue   |   2 +-
 .../table/demo/SortableMultiple.vue           |   2 +-
 .../components/table/demo/SortableOrderBy.vue |   8 +-
 packages/components/table/demo/Sticky.vue     |   2 +-
 packages/components/table/demo/Template.vue   |   2 +-
 packages/components/table/demo/TreeTable.vue  |   8 +-
 packages/components/table/demo/Virtual.vue    |   2 +-
 packages/components/table/docs/Api.zh.md      |   6 +-
 packages/components/table/src/Table.tsx       |  17 ++-
 .../table/src/composables/useColumns.ts       |  15 +-
 .../table/src/main/body/BodyCell.tsx          |   5 +-
 .../table/src/main/head/HeadCell.tsx          |   5 +-
 packages/components/table/src/types.ts        |   6 +-
 packages/components/table/src/utils/index.ts  |  26 ++--
 packages/components/table/style/size.less     |   3 +-
 .../src/components/global/GlobalCodeBox.vue   |   3 +-
 46 files changed, 396 insertions(+), 98 deletions(-)
 create mode 100644 packages/components/table/demo/EditCells.md
 create mode 100644 packages/components/table/demo/EditCells.vue
 create mode 100644 packages/components/table/demo/EditRows.md
 create mode 100644 packages/components/table/demo/EditRows.vue

diff --git a/packages/components/_private/footer/src/Footer.tsx b/packages/components/_private/footer/src/Footer.tsx
index b9a779dd1..8ebcd2ebc 100644
--- a/packages/components/_private/footer/src/Footer.tsx
+++ b/packages/components/_private/footer/src/Footer.tsx
@@ -29,7 +29,7 @@ export default defineComponent({
         onClick: cancel,
         loading: cancelLoading,
         ...cancelButton,
-      }
+      } as FooterButtonProps
     })
 
     const okButtonProps = computed<FooterButtonProps | undefined>(() => {
@@ -44,7 +44,7 @@ export default defineComponent({
         loading: okLoading,
         mode: cancelButtonProps.value ? 'primary' : 'default',
         ...okButton,
-      }
+      } as FooterButtonProps
     })
 
     return () => {
diff --git a/packages/components/_private/footer/src/types.ts b/packages/components/_private/footer/src/types.ts
index ba4056fb4..8ed5aaa98 100644
--- a/packages/components/_private/footer/src/types.ts
+++ b/packages/components/_private/footer/src/types.ts
@@ -7,9 +7,10 @@
 
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
 import type { ButtonProps } from '@idux/components/button'
-import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
+import type { ButtonHTMLAttributes, DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
 
-export interface FooterButtonProps extends ButtonProps {
+export interface FooterButtonProps extends ButtonHTMLAttributes, ButtonProps {
+  disabled?: boolean
   key?: VKey
   text?: string | VNode
   onClick?: (evt: Event) => void
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index 1dfd85630..bd852466c 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -460,7 +460,7 @@ export interface TableColumnBaseConfig {
 }
 
 export interface TableColumnExpandableConfig {
-  icon: string
+  icon: string | VNodeChild | ((expanded: boolean) => string | VNodeChild)
 }
 
 export interface TagConfig {
diff --git a/packages/components/header/docs/Design.zh.md b/packages/components/header/docs/Design.zh.md
index 78e7c9753..2d6204fd8 100644
--- a/packages/components/header/docs/Design.zh.md
+++ b/packages/components/header/docs/Design.zh.md
@@ -1,7 +1,5 @@
-## 组件定义
-
-页头用于各中容器的顶部，起到了内容概览和引导操作的作用。
-
 ## 使用场景
 
-当需要使用户快速理解当前容器是什么以及提供一些快捷操作。
+- 当某模块的最大层级数≤2时，整个模块使用页头组件。
+
+- 当某模块的最大层级数＞2时，整个模块应使用[面包屑]组件。
diff --git a/packages/components/header/docs/Index.zh.md b/packages/components/header/docs/Index.zh.md
index c465d086a..80356c2d1 100644
--- a/packages/components/header/docs/Index.zh.md
+++ b/packages/components/header/docs/Index.zh.md
@@ -7,3 +7,4 @@ order: 0
 theme: true
 ---
 
+页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。
diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md
index 62bfd1432..e11b225e6 100644
--- a/packages/components/header/docs/Theme.zh.md
+++ b/packages/components/header/docs/Theme.zh.md
@@ -2,8 +2,8 @@
 | --- | --- | --- | --- |
 | `@header-height-sm` | `var(--ix-height-lg)` | - | - |
 | `@header-height-md` | `var(--ix-height-xl)` | - | - |
-| `@header-height-lg` | `var(--ix-height-2xl)` | - | - |
-| `@header-height-xl` | `var(--ix-height-3xl)` | - | - |
+| `@header-height-lg` | `var(--ix-height-xl)` | - | - |
+| `@header-height-xl` | `var(--ix-height-2xl)` | - | - |
 | `@header-font-size-sm` | `var(--ix-font-size-md)` | - | - |
 | `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - |
 | `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - |
diff --git a/packages/components/header/style/themes/default.variable.less b/packages/components/header/style/themes/default.variable.less
index 106bd6c11..bb71fc8af 100644
--- a/packages/components/header/style/themes/default.variable.less
+++ b/packages/components/header/style/themes/default.variable.less
@@ -1,7 +1,7 @@
 @header-height-sm: var(--ix-height-lg);
 @header-height-md: var(--ix-height-xl);
-@header-height-lg: var(--ix-height-2xl);
-@header-height-xl: var(--ix-height-3xl);
+@header-height-lg: var(--ix-height-xl);
+@header-height-xl: var(--ix-height-2xl);
 
 @header-font-size-sm: var(--ix-font-size-md);
 @header-font-size-md: var(--ix-font-size-lg);
diff --git a/packages/components/space/docs/Index.zh.md b/packages/components/space/docs/Index.zh.md
index 5dd6a862f..7cec85e62 100644
--- a/packages/components/space/docs/Index.zh.md
+++ b/packages/components/space/docs/Index.zh.md
@@ -3,6 +3,6 @@ category: components
 type: 布局
 title: Space
 subtitle: 间距
-cover:
+theme: true
 ---
 
diff --git a/packages/components/space/docs/Theme.zh.md b/packages/components/space/docs/Theme.zh.md
index 8eeac3946..cd239f2d2 100644
--- a/packages/components/space/docs/Theme.zh.md
+++ b/packages/components/space/docs/Theme.zh.md
@@ -1,5 +1,3 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@space-margin-sm` | `@spacing-sm` | - | - |
-| `@space-margin-md` | `@spacing-lg` | - | - |
-| `@space-margin-lg` | `@spacing-xl` | - | - |
+| `@space-separator-color` | `var(--ix-border-color-secondary)` | - | - |
diff --git a/packages/components/space/style/index.less b/packages/components/space/style/index.less
index cfa9cd06a..1c73e4934 100644
--- a/packages/components/space/style/index.less
+++ b/packages/components/space/style/index.less
@@ -62,4 +62,8 @@
   &-item:empty {
     display: none;
   }
+
+  &-item-separator {
+    color: @space-separator-color;
+  }
 }
diff --git a/packages/components/space/style/themes/default.variable.less b/packages/components/space/style/themes/default.variable.less
index 96e0f4bdd..22b39e778 100644
--- a/packages/components/space/style/themes/default.variable.less
+++ b/packages/components/space/style/themes/default.variable.less
@@ -1,3 +1 @@
-@space-margin-sm: @spacing-sm;
-@space-margin-md: @spacing-lg;
-@space-margin-lg: @spacing-xl;
+@space-separator-color: var(--ix-border-color-secondary);
diff --git a/packages/components/statistic/docs/Theme.zh.md b/packages/components/statistic/docs/Theme.zh.md
index 38aa51a51..2a1173db4 100644
--- a/packages/components/statistic/docs/Theme.zh.md
+++ b/packages/components/statistic/docs/Theme.zh.md
@@ -6,6 +6,6 @@
 | `@statistic-font-size-xl` | `@font-size-2xl` | - | - |
 | `@statistic-line-height` | `@line-height-base` | - | - |
 | `@statistic-color` | `@color-black` | `@color-graphite-d40` | - |
-| `@statistic-title-margin` | `@space-margin-lg` | - | - |
+| `@statistic-title-margin` | `@spacing-xl` | - | - |
 | `@statistic-prefix-margin` | `@spacing-xs` | - | - |
 | `@statistic-suffix-margin` | `@spacing-xs` | - | - |
diff --git a/packages/components/statistic/style/themes/default.variable.less b/packages/components/statistic/style/themes/default.variable.less
index 4100d846a..456513c34 100644
--- a/packages/components/statistic/style/themes/default.variable.less
+++ b/packages/components/statistic/style/themes/default.variable.less
@@ -6,6 +6,6 @@
 @statistic-line-height: @line-height-base;
 @statistic-color: @color-black;
 
-@statistic-title-margin: @space-margin-lg;
+@statistic-title-margin: @spacing-xl;
 @statistic-prefix-margin: @spacing-xs;
 @statistic-suffix-margin: @spacing-xs;
diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue
index 6aaeeba76..7956b3a19 100644
--- a/packages/components/table/demo/AutoHeight.vue
+++ b/packages/components/table/demo/AutoHeight.vue
@@ -7,13 +7,13 @@
     :step="100"
   ></IxInputNumber>
 
-  <div :style="{ height: `${containerHeight}px` }">
+  <div :style="{ height: `${containerHeight}px`, marginTop: '8px' }">
     <IxTable :columns="columns" :dataSource="data" autoHeight :scroll="scroll">
       <template #name="{ value }">
-        <a>{{ value }}</a>
+        <IxButton mode="link">{{ value }}</IxButton>
       </template>
       <template #action>
-        <a>action</a>
+        <IxButton>Action</IxButton>
       </template>
     </IxTable>
   </div>
diff --git a/packages/components/table/demo/AutoHeightVirtual.vue b/packages/components/table/demo/AutoHeightVirtual.vue
index beab99995..5135455b1 100644
--- a/packages/components/table/demo/AutoHeightVirtual.vue
+++ b/packages/components/table/demo/AutoHeightVirtual.vue
@@ -7,10 +7,10 @@
       :max="600"
       :step="100"
     ></IxInputNumber>
-    <div :style="{ height: `${containerHeight}px` }">
+    <div :style="{ height: `${containerHeight}px`, marginTop: '8px' }">
       <IxTable :columns="columns" :dataSource="data" :pagination="false" autoHeight virtual>
         <template #name="{ value }">
-          <a>{{ value }}</a>
+          <IxButton mode="link">{{ value }}</IxButton>
         </template>
       </IxTable>
     </div>
diff --git a/packages/components/table/demo/Basic.vue b/packages/components/table/demo/Basic.vue
index 1ed161ec8..28d26f4ce 100644
--- a/packages/components/table/demo/Basic.vue
+++ b/packages/components/table/demo/Basic.vue
@@ -1,11 +1,13 @@
 <template>
   <IxTable :columns="columns" :dataSource="data">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
     <template #action="{ record }">
-      <a style="margin-right: 8px">Invite {{ record.name }}</a>
-      <a>Delete</a>
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>Invite {{ record.name }}</IxButton>
+        <IxButton>Delete</IxButton>
+      </IxButtonGroup>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/ColSpanRowSpan.vue b/packages/components/table/demo/ColSpanRowSpan.vue
index d06194a2b..6fc9a1529 100644
--- a/packages/components/table/demo/ColSpanRowSpan.vue
+++ b/packages/components/table/demo/ColSpanRowSpan.vue
@@ -2,7 +2,7 @@
   <IxTable :columns="columns" :dataSource="data" :borderless="false">
     <IxTableColumn> </IxTableColumn>
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/CustomAdditional.vue b/packages/components/table/demo/CustomAdditional.vue
index 3cbe82382..94b4d90d0 100644
--- a/packages/components/table/demo/CustomAdditional.vue
+++ b/packages/components/table/demo/CustomAdditional.vue
@@ -7,7 +7,7 @@
     :pagination="false"
   >
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/EditCells.md b/packages/components/table/demo/EditCells.md
new file mode 100644
index 000000000..8d4afdd90
--- /dev/null
+++ b/packages/components/table/demo/EditCells.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可编辑单元格
+  en: Editable cells
+order: 86
+---
+
+## zh
+
+表格的单元格支持编辑
+
+## en
+
+The cells of the table support editing.
diff --git a/packages/components/table/demo/EditCells.vue b/packages/components/table/demo/EditCells.vue
new file mode 100644
index 000000000..fdecf2474
--- /dev/null
+++ b/packages/components/table/demo/EditCells.vue
@@ -0,0 +1,128 @@
+<template>
+  <IxTable :columns="columns" :dataSource="data">
+    <template #name="{ value, record }">
+      <IxFormItem v-if="record.editable === 'name'" messageTooltip>
+        <IxInput :control="editControl" @blur="onSave(record, 'name')"></IxInput>
+      </IxFormItem>
+      <span v-else class="edit-cell" @click="onEdit(record, 'name')">
+        {{ value }}
+        <IxIcon name="edit" />
+      </span>
+    </template>
+    <template #age="{ value, record }">
+      <IxFormItem v-if="record.editable === 'age'" messageTooltip>
+        <IxInputNumber :control="editControl" @blur="onSave(record, 'age')"></IxInputNumber>
+      </IxFormItem>
+      <span v-else class="edit-cell" @click="onEdit(record, 'age')">
+        {{ value }}
+        <IxIcon name="edit" />
+      </span>
+    </template>
+    <template #address="{ value, record }">
+      <IxFormItem v-if="record.editable === 'address'" messageTooltip>
+        <IxInput :control="editControl" @blur="onSave(record, 'address')"></IxInput>
+      </IxFormItem>
+      <span v-else class="edit-cell" @click="onEdit(record, 'address')">
+        {{ value }}
+        <IxIcon name="edit" />
+      </span>
+    </template>
+    <template #action>
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>Detail</IxButton>
+        <IxButton>Delete</IxButton>
+      </IxButtonGroup>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { Validators, useFormControl } from '@idux/cdk/forms'
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key?: number
+  name?: string
+  age?: number
+  address?: string
+  editable?: 'name' | 'age' | 'address'
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+    width: 150,
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    customCell: 'age',
+    width: 120,
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+    customCell: 'address',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+    width: 150,
+  },
+]
+
+const data = ref<Data[]>([])
+
+for (let index = 0; index < 3; index++) {
+  data.value.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+  })
+}
+
+const { required, range, maxLength } = Validators
+const editControl = useFormControl<string | number | undefined>(undefined)
+const validatorMap = {
+  name: [required],
+  age: [required, range(18, 99)],
+  address: [maxLength(100)],
+}
+
+const onEdit = (record: Data, type: 'name' | 'age' | 'address') => {
+  record.editable = type
+  editControl.setValue(record[type])
+  editControl.setValidators(validatorMap[type])
+}
+
+const onSave = (record: Data, type: 'name' | 'age' | 'address') => {
+  if (editControl.valid.value) {
+    // 发起请求，成功后刷新数据
+    record[type] = editControl.getValue()
+    record.editable = undefined
+  } else {
+    editControl.markAsDirty()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.edit-cell {
+  .ix-icon {
+    visibility: hidden;
+    margin-left: 16px;
+  }
+
+  &:hover {
+    .ix-icon {
+      visibility: visible;
+    }
+  }
+}
+</style>
diff --git a/packages/components/table/demo/EditRows.md b/packages/components/table/demo/EditRows.md
new file mode 100644
index 000000000..4ddab9f05
--- /dev/null
+++ b/packages/components/table/demo/EditRows.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可编辑行
+  en: Editable rows
+order: 88
+---
+
+## zh
+
+表格的行支持编辑。
+
+## en
+
+The rows of the table support editing.
diff --git a/packages/components/table/demo/EditRows.vue b/packages/components/table/demo/EditRows.vue
new file mode 100644
index 000000000..cd186c639
--- /dev/null
+++ b/packages/components/table/demo/EditRows.vue
@@ -0,0 +1,121 @@
+<template>
+  <IxFormWrapper :control="formGroup">
+    <IxTable :columns="columns" :dataSource="data">
+      <template #name="{ value, record }">
+        <IxFormItem v-if="record.editable" messageTooltip>
+          <IxInput control="name"></IxInput>
+        </IxFormItem>
+        <span v-else>{{ value }}</span>
+      </template>
+      <template #age="{ value, record }">
+        <IxFormItem v-if="record.editable" messageTooltip>
+          <IxInputNumber control="age"></IxInputNumber>
+        </IxFormItem>
+        <span v-else>{{ value }}</span>
+      </template>
+      <template #address="{ value, record }">
+        <IxFormItem v-if="record.editable" messageTooltip>
+          <IxInput control="address"></IxInput>
+        </IxFormItem>
+        <span v-else>{{ value }}</span>
+      </template>
+      <template #action="{ record }">
+        <IxButtonGroup :gap="8" mode="link" separator="|">
+          <template v-if="record.editable">
+            <IxButton @click="onSave(record)">Save</IxButton>
+            <IxButton @click="onCancel(record)">Cancel</IxButton>
+          </template>
+          <template v-else>
+            <IxButton @click="onEdit(record)">Edit</IxButton>
+            <IxButton @click="onDelete(record)">Delete</IxButton>
+          </template>
+        </IxButtonGroup>
+      </template>
+    </IxTable>
+  </IxFormWrapper>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { Validators, useFormGroup } from '@idux/cdk/forms'
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key?: number
+  name?: string
+  age?: number
+  address?: string
+  editable?: boolean
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+    width: 150,
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    customCell: 'age',
+    width: 120,
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+    customCell: 'address',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+    width: 150,
+  },
+]
+
+const data = ref<Data[]>([])
+
+for (let index = 0; index < 3; index++) {
+  data.value.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+  })
+}
+
+const { required, range, maxLength } = Validators
+const formGroup = useFormGroup<Data>({
+  name: ['', required],
+  age: [undefined, [required, range(18, 99)]],
+  address: ['', maxLength(100)],
+})
+
+const onSave = (record: Data) => {
+  if (formGroup.valid.value) {
+    // 发起请求，成功后刷新数据
+    const oldData = [...data.value]
+    const targetIndex = oldData.findIndex(item => item.key === record.key)
+    oldData.splice(targetIndex, 1, formGroup.getValue())
+    data.value = oldData
+  } else {
+    formGroup.markAsDirty()
+  }
+}
+
+const onCancel = (record: Data) => {
+  record.editable = false
+  formGroup.reset()
+}
+
+const onEdit = (record: Data) => {
+  record.editable = true
+  formGroup.setValue(record)
+}
+
+const onDelete = (record: Data) => {
+  console.log('delete', record)
+}
+</script>
diff --git a/packages/components/table/demo/Expandable.vue b/packages/components/table/demo/Expandable.vue
index 6795d1987..4576be3d8 100644
--- a/packages/components/table/demo/Expandable.vue
+++ b/packages/components/table/demo/Expandable.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable v-model:expandedRowKeys="expandedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
     <template #expand="{ record }">
       <span>{{ record.description }}</span>
diff --git a/packages/components/table/demo/Filterable.vue b/packages/components/table/demo/Filterable.vue
index 2ea311d2d..f2165895a 100644
--- a/packages/components/table/demo/Filterable.vue
+++ b/packages/components/table/demo/Filterable.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/FilterableFilterBy.vue b/packages/components/table/demo/FilterableFilterBy.vue
index 3999d85c8..34fdb803d 100644
--- a/packages/components/table/demo/FilterableFilterBy.vue
+++ b/packages/components/table/demo/FilterableFilterBy.vue
@@ -6,7 +6,7 @@
   </IxSpace>
   <IxTable :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Fixed.vue b/packages/components/table/demo/Fixed.vue
index 7fb2062cd..3c4a57962 100644
--- a/packages/components/table/demo/Fixed.vue
+++ b/packages/components/table/demo/Fixed.vue
@@ -1,10 +1,10 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :scroll="scroll">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
     <template #action>
-      <a>action</a>
+      <IxButton mode="link">Action</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/HeadGroup.vue b/packages/components/table/demo/HeadGroup.vue
index 42ca01876..4a4aa6512 100644
--- a/packages/components/table/demo/HeadGroup.vue
+++ b/packages/components/table/demo/HeadGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :borderless="false" :scroll="scroll">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Selectable.vue b/packages/components/table/demo/Selectable.vue
index 1cc6cec3d..814f8f1c6 100644
--- a/packages/components/table/demo/Selectable.vue
+++ b/packages/components/table/demo/Selectable.vue
@@ -7,9 +7,10 @@
     </IxRadioGroup>
   </IxSpace>
   <br />
+  <br />
   <IxTable v-model:selectedRowKeys="selectedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/SelectableOptions.vue b/packages/components/table/demo/SelectableOptions.vue
index 4fe8d4888..bea06525d 100644
--- a/packages/components/table/demo/SelectableOptions.vue
+++ b/packages/components/table/demo/SelectableOptions.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable v-model:selectedRowKeys="selectedRowKeys" :columns="columns" :dataSource="data">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Server.vue b/packages/components/table/demo/Server.vue
index 6fdea2587..40a0066b4 100644
--- a/packages/components/table/demo/Server.vue
+++ b/packages/components/table/demo/Server.vue
@@ -1,12 +1,5 @@
 <template>
-  <IxTable
-    :columns="columns"
-    :dataSource="dataSource"
-    :getKey="getRowKey"
-    :pagination="pagination"
-    :spin="loading"
-    @pageChange="setPagination"
-  >
+  <IxTable :columns="columns" :dataSource="dataSource" :getKey="getKey" :pagination="pagination" :spin="loading">
   </IxTable>
 </template>
 
@@ -15,10 +8,6 @@ import { onMounted, reactive, ref } from 'vue'
 
 import { TableColumn, TablePagination } from '@idux/components/table'
 
-const pagination = reactive<TablePagination>({
-  showSizeChanger: true,
-})
-
 const setPagination = (pageIndex: number, pageSize: number) => {
   // 如果修改了 pageSize, 应该把 pageIndex 重置为 1
   if (pagination.pageSize !== pageSize) {
@@ -31,6 +20,11 @@ const setPagination = (pageIndex: number, pageSize: number) => {
   fetchData(pagination.pageIndex, pagination.pageSize)
 }
 
+const pagination = reactive<TablePagination>({
+  showSizeChanger: true,
+  onChange: setPagination,
+})
+
 const loading = ref(false)
 
 const fetchData = async (pageIndex: number, pageSize: number) => {
@@ -87,5 +81,5 @@ const columns: TableColumn<RandomUser>[] = [
 
 const dataSource = ref<RandomUser[]>([])
 
-const getRowKey = (record: RandomUser) => record.login.uuid
+const getKey = (record: RandomUser) => record.login.uuid
 </script>
diff --git a/packages/components/table/demo/Sortable.vue b/packages/components/table/demo/Sortable.vue
index c2ecaae61..33cfae9c3 100644
--- a/packages/components/table/demo/Sortable.vue
+++ b/packages/components/table/demo/Sortable.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/SortableMultiple.vue b/packages/components/table/demo/SortableMultiple.vue
index db68ab1b1..008b5018f 100644
--- a/packages/components/table/demo/SortableMultiple.vue
+++ b/packages/components/table/demo/SortableMultiple.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/SortableOrderBy.vue b/packages/components/table/demo/SortableOrderBy.vue
index dc2fbc513..dbbf77016 100644
--- a/packages/components/table/demo/SortableOrderBy.vue
+++ b/packages/components/table/demo/SortableOrderBy.vue
@@ -1,12 +1,14 @@
 <template>
-  <IxSpace>
+  <IxButtonGroup>
     <IxButton @Click="orderByAgeAscend">Order By Age(Ascend)</IxButton>
     <IxButton @Click="orderByGradeDescend">Order By Grade(Descend)</IxButton>
     <IxButton @Click="clear">Clear</IxButton>
-  </IxSpace>
+  </IxButtonGroup>
+  <br />
+  <br />
   <IxTable :columns="columns" :dataSource="data" :pagination="false">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Sticky.vue b/packages/components/table/demo/Sticky.vue
index 9e517e981..46f30f0f5 100644
--- a/packages/components/table/demo/Sticky.vue
+++ b/packages/components/table/demo/Sticky.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false" :scroll="scroll" sticky>
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Template.vue b/packages/components/table/demo/Template.vue
index c2d30c75c..c7cac4fac 100644
--- a/packages/components/table/demo/Template.vue
+++ b/packages/components/table/demo/Template.vue
@@ -7,7 +7,7 @@
     </IxTableColumn>
     <IxTableColumn title="Name" dataKey="name">
       <template #cell="{ value }">
-        <a>{{ value }}</a>
+        <IxButton mode="link">{{ value }}</IxButton>
       </template>
     </IxTableColumn>
     <IxTableColumn title="Age" dataKey="age"></IxTableColumn>
diff --git a/packages/components/table/demo/TreeTable.vue b/packages/components/table/demo/TreeTable.vue
index 426a946ee..49b9be964 100644
--- a/packages/components/table/demo/TreeTable.vue
+++ b/packages/components/table/demo/TreeTable.vue
@@ -1,11 +1,13 @@
 <template>
   <IxTable :columns="columns" :dataSource="data">
     <template #name="{ value }">
-      <span>{{ value }}</span>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
     <template #action="{ record }">
-      <a style="margin-right: 8px">Invite {{ record.name }}</a>
-      <a>Delete</a>
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>Invite {{ record.name }}</IxButton>
+        <IxButton>Delete</IxButton>
+      </IxButtonGroup>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/demo/Virtual.vue b/packages/components/table/demo/Virtual.vue
index c429a3435..dc366851f 100644
--- a/packages/components/table/demo/Virtual.vue
+++ b/packages/components/table/demo/Virtual.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false" :scroll="scroll" virtual>
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>
diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
index 8af1d5171..d7929d6bb 100644
--- a/packages/components/table/docs/Api.zh.md
+++ b/packages/components/table/docs/Api.zh.md
@@ -14,7 +14,7 @@
 | `columns` | 表格列的配置描述 | `TableColumn[]` | - | - |  参见[TableColumn](#TableColumn)  |
 | `customAdditional` | 自定义表格行和单元格的额外属性 | `TableCustomAdditional` | - | - | 参见[TableCustomAdditional](#TableCustomAdditional) |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |
-| `ellipsis` | 超过宽度将自动省略 | `boolean \| { title: boolean }` | `false` | - | `title` 为 `false` 时, 不显示原生的 `title` |
+| `ellipsis` | 超过宽度将自动省略 | `boolean \| { title?: boolean; head?: boolean }` | `false` | - | 对带有 `type` 的列不生效; `title` 为 `false` 时, 不显示原生的 `title`; `head` 为 `false` 时, 对表头不生效 |
 | `empty` | `dataSource` 为空时默认渲染的内容 | `'default' \| 'simple' \| EmptyProps` | `'default'` | - | - |
 | `emptyCell` | 单元格数据为空时默认渲染的内容 | `string \| ((options: TableEmptyCellOptions) => VNodeChild) \| #emptyCell='TableEmptyCellOptions'` | - | ✅ | 仅支持普通列，且数据为 `undefined \| null \| ''` 时生效 |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - |
@@ -69,7 +69,7 @@ export type TableColumn<T = any, V = any> =
 | `key` | 表格列 `key` 的取值 | `string \| number` | - | - | 默认为 `dataKey` 或者 `type` |
 | `children` | 子列的配置项 | `TableColumnBase[]` | - | - | 用于设置分组表头 |
 | `dataKey` | 数据在数据项中对应的路径 | `string \| string[]` | - | - | 支持通过数组查询嵌套路径 |
-| `ellipsis` | 超过宽度将自动省略 | `boolean` | - | - | 优先级高于 `props` 中的 `ellipsis` |
+| `ellipsis` | 超过宽度将自动省略 | `boolean \| { title?: boolean; head?: boolean }` | - | - | 优先级高于 `props` 中的 `ellipsis`, 且对带有 `type` 的列生效  |
 | `sortable` | 是否可排序, 参见[TableColumnSortable](#TableColumnSortable) | `TableColumnSortable` | - | - | - |
 | `title` | 列头的文本 | `string` | - | - | - |
 | `customCell` | 自定义单元格内容 | `string \| ((data: { value: V; record: T; rowIndex: number }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
@@ -83,7 +83,7 @@ export type TableColumn<T = any, V = any> =
 | --- | --- | --- | --- | --- | --- |
 | `type` | 列类型 | `'expandable'` | - | - | 必填 |
 | `disabled` |  设置是否允许行展开 | `(record:T) => boolean` | - | - | - |
-| `icon` | 展开按钮图标 | `string` | `'right'` | ✅ | - |
+| `icon` | 展开按钮图标 | `string \| VNode \| ((data: { expanded: boolean; record: T }) => string \| VNodeChild)` | `'right'` | ✅ | - |
 | `indent` | 展示树形数据时，每层缩进的宽度 | `number` | `12` | - | - |
 | `trigger` | 不通过图标，触发行展开的方式 | `'click' \| 'doubleClick'` | - | - | - |
 | `onChange` | 展开状态发生变化时触发 | `(expendedRowKeys: (string \| number)[], expendedRecords: T[]) => void` | - | - | - |
diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
index 8dcd7ab9e..14860e304 100644
--- a/packages/components/table/src/Table.tsx
+++ b/packages/components/table/src/Table.tsx
@@ -5,15 +5,13 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { SpinProps } from '@idux/components/spin'
-
-import { computed, defineComponent, normalizeClass, provide } from 'vue'
+import { type VNode, computed, defineComponent, normalizeClass, provide } from 'vue'
 
 import { isBoolean } from 'lodash-es'
 
 import { ɵHeader } from '@idux/components/_private/header'
 import { useGlobalConfig } from '@idux/components/config'
-import { IxSpin } from '@idux/components/spin'
+import { IxSpin, type SpinProps } from '@idux/components/spin'
 import { useGetKey } from '@idux/components/utils'
 
 import { useColumns } from './composables/useColumns'
@@ -117,10 +115,15 @@ export default defineComponent({
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
       const [paginationTop, paginationBottom] = renderPagination(mergedPagination.value, filteredData.value, prefixCls)
-      const children = [header, paginationTop, <MainTable />, footer, paginationBottom]
+      const children = [header]
+      const resetChildren = [paginationTop, <MainTable />, footer, paginationBottom].filter(Boolean) as VNode[]
       const spinProps = convertSpinProps(props.spin)
-      const spinWrapper = spinProps ? <IxSpin {...spinProps}>{children}</IxSpin> : children
-      return <div class={classes.value}>{spinWrapper}</div>
+      if (spinProps) {
+        children.push(<IxSpin {...spinProps}>{resetChildren}</IxSpin>)
+      } else {
+        children.push(...resetChildren)
+      }
+      return <div class={classes.value}>{children}</div>
     }
   },
 })
diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts
index 719d35aa1..86509f2c3 100644
--- a/packages/components/table/src/composables/useColumns.ts
+++ b/packages/components/table/src/composables/useColumns.ts
@@ -5,7 +5,18 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, type Ref, type Slots, type VNode, computed, reactive, ref, watch, watchEffect } from 'vue'
+import {
+  type ComputedRef,
+  type Ref,
+  type Slots,
+  type VNode,
+  type VNodeChild,
+  computed,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue'
 
 import { debounce, isNil } from 'lodash-es'
 
@@ -111,7 +122,7 @@ export interface TableColumnMergedBaseExtra extends TableColumnMergedBase {
 export interface TableColumnMergedExpandable extends TableColumnMergedBaseExtra, TableColumnExpandable {
   align: TableColumnAlign
   key: VKey
-  icon: string
+  icon: string | VNodeChild | ((options: { expanded?: boolean; record: unknown }) => string | VNodeChild)
   titleColSpan: number
 }
 export interface TableColumnMergedSelectable extends TableColumnMergedBaseExtra, TableColumnSelectable {
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 060e137b6..8c9decf27 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -187,7 +187,10 @@ function renderExpandableChildren(
   } else if (isString(customIcon) && slots[customIcon]) {
     iconNode = slots[customIcon]!({ expanded, record })
   } else {
-    iconNode = <IxIcon name={icon} rotate={expanded ? 90 : 0} />
+    iconNode = isFunction(icon) ? icon({ expanded, record }) : icon
+    if (isString(iconNode)) {
+      iconNode = <IxIcon name={iconNode} />
+    }
   }
 
   return (
diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
index 596ba6658..7effc7e1f 100644
--- a/packages/components/table/src/main/head/HeadCell.tsx
+++ b/packages/components/table/src/main/head/HeadCell.tsx
@@ -16,7 +16,7 @@ import {
   normalizeClass,
 } from 'vue'
 
-import { isFunction, isString } from 'lodash-es'
+import { isFunction, isObject, isString } from 'lodash-es'
 
 import { type VKey, convertCssPixel } from '@idux/cdk/utils'
 
@@ -57,7 +57,8 @@ export default defineComponent({
     const mergedEllipsis = computed(() => {
       // tableProps 的 ellipsis 对特殊(带有 type )的列不生效
       const { type, ellipsis } = props.column as HeadColumn
-      return type ? ellipsis : ellipsis ?? tableProps.ellipsis
+      const _ellipsis = type ? ellipsis : ellipsis ?? tableProps.ellipsis
+      return isObject(_ellipsis) && !_ellipsis.head ? undefined : _ellipsis
     })
 
     const classes = computed(() => {
diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
index f5c35894c..899ca0d4b 100644
--- a/packages/components/table/src/types.ts
+++ b/packages/components/table/src/types.ts
@@ -31,7 +31,7 @@ export const tableProps = {
   customAdditional: { type: Object as PropType<TableCustomAdditional<any, any>>, default: undefined },
   customTag: { type: Object as PropType<TableCustomTag>, default: undefined },
   dataSource: { type: Array as PropType<any[]>, default: () => [] },
-  ellipsis: { type: [Boolean, Object] as PropType<boolean | { title?: boolean }>, default: false },
+  ellipsis: { type: [Boolean, Object] as PropType<boolean | { title?: boolean; head?: boolean }>, default: false },
   empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'default' },
   emptyCell: {
     type: [String, Function] as PropType<string | ((options: TableEmptyCellOptions) => VNodeChild)>,
@@ -91,7 +91,7 @@ export interface TableColumnCommon<T = any> {
 
 export interface TableColumnBase<T = any, K = VKey> extends TableColumnCommon<T> {
   dataKey?: VKey | VKey[]
-  ellipsis?: boolean | { title?: boolean }
+  ellipsis?: boolean | { title?: boolean; head?: boolean }
   sortable?: TableColumnSortable<T>
   filterable?: TableColumnFilterable<T>
   title?: string
@@ -105,7 +105,7 @@ export interface TableColumnExpandable<T = any, K = VKey> extends TableColumnBas
   type: 'expandable'
   disabled?: (record: T) => boolean
 
-  icon?: string
+  icon?: string | VNodeChild | ((options: { expanded: boolean; record: T }) => string | VNodeChild)
   indent?: number
   trigger?: 'click' | 'dblclick'
 
diff --git a/packages/components/table/src/utils/index.ts b/packages/components/table/src/utils/index.ts
index 93ee485a0..9c4fc52bd 100644
--- a/packages/components/table/src/utils/index.ts
+++ b/packages/components/table/src/utils/index.ts
@@ -7,11 +7,11 @@
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import { type VNode, type VNodeChild } from 'vue'
+import { Text, type VNodeChild } from 'vue'
 
-import { isObject, isString } from 'lodash-es'
+import { isNumber, isObject, isString } from 'lodash-es'
 
-import { Logger, type VKey, convertArray, getFirstValidNode, uniqueId } from '@idux/cdk/utils'
+import { Logger, type VKey, convertArray, flattenNode, uniqueId } from '@idux/cdk/utils'
 
 import { type TableColumn } from '../types'
 
@@ -24,16 +24,16 @@ export function getColTitle(
     return undefined
   }
 
-  let _title = title
-  if (isString(children)) {
-    _title = children
-  } else {
-    const node = getFirstValidNode(children as VNode)
-    if (node && isString(node.children)) {
-      _title = node.children
-    }
+  if (isString(children) || isNumber(children)) {
+    return children as string
   }
-  return _title
+
+  const textNode = flattenNode(children).find(node => node.type === Text)
+  if (textNode) {
+    return textNode.children as string
+  }
+
+  return title
 }
 
 export function getColumnKey(column: TableColumn): VKey {
@@ -41,7 +41,7 @@ export function getColumnKey(column: TableColumn): VKey {
     return column.key
   }
   // @ts-ignore
-  if (column.dataKey && column.dataKey) {
+  if (column.dataKey) {
     // @ts-ignore
     return convertArray(column.dataKey).join('-')
   }
diff --git a/packages/components/table/style/size.less b/packages/components/table/style/size.less
index 3fed7b506..108dba8d8 100644
--- a/packages/components/table/style/size.less
+++ b/packages/components/table/style/size.less
@@ -32,7 +32,8 @@
   .@{table-prefix}-expanded-row > td,
   .@{table-prefix}-footer {
     height: @body-height;
-    padding: 4px @padding-horizontal;
+    // border-bottom: 1px
+    padding: 4px @padding-horizontal 3px;
   }
 
   // TODO: Nest Table
diff --git a/packages/site/src/components/global/GlobalCodeBox.vue b/packages/site/src/components/global/GlobalCodeBox.vue
index fcf69107c..eb51a8904 100644
--- a/packages/site/src/components/global/GlobalCodeBox.vue
+++ b/packages/site/src/components/global/GlobalCodeBox.vue
@@ -132,6 +132,7 @@ export default defineComponent({
   &-raw-code {
     position: relative;
     padding: 16px;
+    margin-bottom: 8px;
   }
 
   &-highlight-code {
@@ -150,7 +151,7 @@ export default defineComponent({
 
   &-tools {
     position: absolute;
-    bottom: -8px;
+    bottom: -12px;
     right: 16px;
     cursor: pointer;
 

From ba8bd04a5bf1ad8ae1af3fae08e9b5b018b650f2 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Wed, 16 Nov 2022 12:38:52 +0800
Subject: [PATCH 2/2] test(comp:table): add test case and update snapshots

---
 .../__tests__/__snapshots__/table.spec.ts.snap   |  2 --
 .../components/table/__tests__/table.spec.ts     | 16 ++++++++++++++++
 .../components/table/src/main/body/BodyCell.tsx  |  2 +-
 .../components/table/src/main/head/HeadCell.tsx  |  2 +-
 packages/components/table/src/utils/index.ts     |  2 +-
 .../__snapshots__/proTransfer.spec.ts.snap       |  6 ------
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
index ba4806c10..652048891 100644
--- a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
+++ b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -2,7 +2,6 @@
 
 exports[`Table > basic work > render work 1`] = `
 "<div class=\\"ix-table ix-table-borderless ix-table-md\\">
-  <!---->
   <!---->
   <div class=\\"ix-table-container\\">
     <div class=\\"ix-table-content\\">
@@ -312,7 +311,6 @@ exports[`Table > basic work > render work 1`] = `
       </table>
     </div>
   </div>
-  <!---->
   <ul class=\\"ix-pagination ix-pagination-md ix-table-pagination ix-table-pagination-end\\" position=\\"bottomEnd\\">
     <li class=\\"ix-pagination-total\\">共 100 项</li>
     <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts
index 99ab70685..fb6aff57b 100644
--- a/packages/components/table/__tests__/table.spec.ts
+++ b/packages/components/table/__tests__/table.spec.ts
@@ -207,6 +207,22 @@ describe('Table', () => {
       expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
     })
 
+    test('ellipsis with head work', async () => {
+      const wrapper = TableMount({ props: { ellipsis: { head: false } } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).not.toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
+
+      await wrapper.setProps({ ellipsis: { head: true } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).not.toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
+    })
+
     test('ellipsis with columns work', async () => {
       const wrapper = TableMount({
         props: {
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 8c9decf27..40a7b7b06 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -189,7 +189,7 @@ function renderExpandableChildren(
   } else {
     iconNode = isFunction(icon) ? icon({ expanded, record }) : icon
     if (isString(iconNode)) {
-      iconNode = <IxIcon name={iconNode} />
+      iconNode = <IxIcon name={iconNode} rotate={expanded ? 90 : 0} />
     }
   }
 
diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
index 7effc7e1f..90c982727 100644
--- a/packages/components/table/src/main/head/HeadCell.tsx
+++ b/packages/components/table/src/main/head/HeadCell.tsx
@@ -58,7 +58,7 @@ export default defineComponent({
       // tableProps 的 ellipsis 对特殊(带有 type )的列不生效
       const { type, ellipsis } = props.column as HeadColumn
       const _ellipsis = type ? ellipsis : ellipsis ?? tableProps.ellipsis
-      return isObject(_ellipsis) && !_ellipsis.head ? undefined : _ellipsis
+      return isObject(_ellipsis) && _ellipsis.head === false ? undefined : _ellipsis
     })
 
     const classes = computed(() => {
diff --git a/packages/components/table/src/utils/index.ts b/packages/components/table/src/utils/index.ts
index 9c4fc52bd..871f0d80f 100644
--- a/packages/components/table/src/utils/index.ts
+++ b/packages/components/table/src/utils/index.ts
@@ -20,7 +20,7 @@ export function getColTitle(
   children: VNodeChild,
   title: string | undefined,
 ): string | undefined {
-  if (!ellipsis || (isObject(ellipsis) && !ellipsis.title)) {
+  if (!ellipsis || (isObject(ellipsis) && ellipsis.title === false)) {
     return undefined
   }
 
diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
index b4f172678..a57eec2a4 100644
--- a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
+++ b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
@@ -41,7 +41,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
             class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-transfer-table-content"
           >
             
-            <!---->
             <!---->
             <div
               class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
@@ -1001,8 +1000,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
               </div>
               
             </div>
-            <!---->
-            <!---->
             
           </div>
           
@@ -1092,7 +1089,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
             class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-transfer-table-content"
           >
             
-            <!---->
             <!---->
             <div
               class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
@@ -1370,8 +1366,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
               </div>
               
             </div>
-            <!---->
-            <!---->
             
           </div>