From 52d6efbfc405cd156ae1b62d4532cb22a96f649f Mon Sep 17 00:00:00 2001
From: Alexey <sudilovskiy@yandex-team.ru>
Date: Tue, 22 Aug 2023 16:57:34 +0300
Subject: [PATCH] feat(Table): add `wordWrap` option to prevent text cut (#919)

---
 src/components/Table/Table.scss | 6 ++++--
 src/components/Table/Table.tsx  | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
index caee97edb..451c0f5b1 100644
--- 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
index 228601dd2..8b5cbb57e 100644
--- 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,
                             )}