fix(table): title ellipsis (#1777)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Jan 7, 2022 · f779034 · f779034 · vercel · Jan 7, 2022
1 parent 2b3b048
commit f779034
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -88,16 +88,20 @@
     }
   }
 
+  .ellipsis() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &-cell {
     box-sizing: border-box;
     &-scrollbar {
       position: relative;
       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 {