From f7790344f3693f6f81a3c2f0f7f5be24e4fcbb6e Mon Sep 17 00:00:00 2001
From: maxin <48519459+nnmax@users.noreply.github.com>
Date: Fri, 7 Jan 2022 15:55:10 +0800
Subject: [PATCH] fix(table): title ellipsis (#1777)

Co-authored-by: maxin <maxin@growingio.com>
---
 src/table/Title.tsx        |  9 +++++++--
 src/table/style/index.less | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/table/Title.tsx b/src/table/Title.tsx
index 7064b72b2e..04f354d528 100644
--- a/src/table/Title.tsx
+++ b/src/table/Title.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { UpFilled, DownFilled, FilterOutlined, QuestionCircleOutlined } from '@gio-design/icons';
-import { isEmpty, isUndefined } from 'lodash';
+import { isEmpty, isString, isUndefined } from 'lodash';
 import Button from '../button';
 import Tooltip from '../tooltip';
 import FilterPopover from './FilterPopover';
@@ -98,7 +98,12 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
 
   return (
     <div className={cls}>
-      {column.title}
+      <span
+        className={classNames(`${prefixCls}-column-title-text`, `${prefixCls}-column-title-text-ellipsis`)}
+        title={isString(column.title) ? column.title : undefined}
+      >
+        {column.title}
+      </span>
       {renderInfo()}
       {renderSorter()}
       {renderFilter()}
diff --git a/src/table/style/index.less b/src/table/style/index.less
index 12d8b41f2e..8e410cb69a 100644
--- a/src/table/style/index.less
+++ b/src/table/style/index.less
@@ -88,6 +88,12 @@
     }
   }
 
+  .ellipsis() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &-cell {
     box-sizing: border-box;
     &-scrollbar {
@@ -95,9 +101,7 @@
       padding: 0 !important;
     }
     &-ellipsis {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      .ellipsis();
     }
     &-fix-left,
     &-fix-right {
@@ -154,6 +158,7 @@
   &-column-title {
     display: flex;
     align-items: center;
+    width: 100%;
     min-height: 22px;
     &-info {
       display: inline-flex;
@@ -166,6 +171,11 @@
         vertical-align: 0;
       }
     }
+    &-text {
+      &-ellipsis {
+        .ellipsis();
+      }
+    }
   }
 
   &-column-title-align-left {