feat(Table): add wordWrap option to prevent text cut (#919)

gravity-ui · Aug 22, 2023 · 52d6efb · 52d6efb
1 parent 4ced5a0
commit 52d6efb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -50,8 +50,6 @@
     }
 
     &__cell {
-        @include mixins.overflow-ellipsis();
-
         box-sizing: content-box;
         padding: 11px 10px;
         border-bottom: 1px solid var(--g-color-line-generic);
@@ -68,6 +66,10 @@
             padding-right: 0;
         }
 
+        &:not(&_word-wrap) {
+            @include mixins.overflow-ellipsis();
+        }
+
         &_align_center {
             text-align: center;
         }

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -58,6 +58,8 @@ export interface TableProps<I> extends QAProps {
     columns: TableColumnConfig<I>[];
     /** Vertical alignment of contents  */
     verticalAlign?: 'top' | 'middle';
+    /** Break long text to lines instead of cutting with hellip */
+    wordWrap?: boolean;
     /**
      * Horizontal sticky scroll.
      * Note: table cannot be with fixed height and with sticky scroll at the same time.
@@ -333,7 +335,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
     }
 
     private renderHead() {
-        const {columns, edgePadding} = this.props;
+        const {columns, edgePadding, wordWrap} = this.props;
         const {columnsStyles} = this.state;
 
         return (
@@ -355,6 +357,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                                         primary,
                                         sticky,
                                         ['edge-padding']: edgePadding,
+                                        ['word-wrap']: wordWrap,
                                     },
                                     className,
                                 )}
@@ -398,6 +401,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
             getRowClassNames,
             verticalAlign,
             edgePadding,
+            wordWrap,
         } = this.props;
         const {columnsStyles} = this.state;
 
@@ -447,6 +451,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                                     primary,
                                     sticky,
                                     ['edge-padding']: edgePadding,
+                                    ['word-wrap']: wordWrap,
                                 },
                                 className,
                             )}