Render an ellipsis ("...") to represent overflowed text.

Author: Tina C Lin (RD-TW)

src/Table.jsx

@@ -132,7 +132,7 @@ export default class extends Component {
                             onClick(key, event);
                         }}
                     >
-                        {title}
+                        <span className={styles.overflowEllipsis}>{title}</span>
                         {columnSortStyle &&
                         <i className={columnSortStyle} />
                         }

src/table-sortable.styl

@@ -4,6 +4,7 @@
         th {
             white-space: nowrap;
         }
+
         .column-sort {
             color: #222;
 
@@ -12,6 +13,18 @@
                 color: #222;
                 text-decoration: none;
             }
+
+            > .overflow-ellipsis {
+                vertical-align: middle;
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-width: calc(100% - 16px); // 16px is icon width
+            }
+
+            > i {
+                vertical-align: middle;
+            }
         }
 
         .column-sort-asc,

src/table.styl

@@ -82,11 +82,8 @@
 .table {
     table {
         .clickable-column {
-            margin: -8px -12px;
-            padding: 8px 12px;
             color: inherit;
             display: block;
-            padding: 8px 12px;
 
             &:hover {
                 background-color: #e6e6e6;