From f142277ef6a501cca3c2b9f4265859542c71989f Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 10 Dec 2024 19:57:30 +0300
Subject: [PATCH] feat(addon-table): allow resize more than 100% width of table

---
 .../components/table/th/th.component.ts       |  2 +
 .../components/table/examples/1/index.html    |  8 ++-
 .../components/table/examples/1/index.less    |  2 +
 .../components/table/examples/1/index.ts      |  2 +
 .../components/table/examples/8/index.html    | 60 +++++++++++++++++++
 .../components/table/examples/8/index.ts      | 13 ++++
 .../src/modules/components/table/index.html   |  2 +-
 .../src/modules/components/table/index.ts     |  1 +
 8 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 projects/demo/src/modules/components/table/examples/8/index.html
 create mode 100644 projects/demo/src/modules/components/table/examples/8/index.ts

diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts
index 3b6046f035142..ed2abab8a8a8b 100644
--- a/projects/addon-table/components/table/th/th.component.ts
+++ b/projects/addon-table/components/table/th/th.component.ts
@@ -24,7 +24,9 @@ import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options';
     styleUrls: ['./th.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
+        '[style.min-width.px]': 'width',
         '[style.width.px]': 'width',
+        '[style.max-width.px]': 'width',
         '[class._sticky]': 'sticky',
     },
 })
diff --git a/projects/demo/src/modules/components/table/examples/1/index.html b/projects/demo/src/modules/components/table/examples/1/index.html
index b5078d141f55d..be3d503a4ff0f 100644
--- a/projects/demo/src/modules/components/table/examples/1/index.html
+++ b/projects/demo/src/modules/components/table/examples/1/index.html
@@ -11,7 +11,13 @@
             >
                 Name
             </th>
-            <th tuiTh>Balance</th>
+            <th
+                tuiTh
+                [resizable]="true"
+            >
+                Balance
+            </th>
+            <th tuiTh>Country</th>
         </tr>
     </thead>
     <tbody
diff --git a/projects/demo/src/modules/components/table/examples/1/index.less b/projects/demo/src/modules/components/table/examples/1/index.less
index 7973deb403eba..37ef4c204de1b 100644
--- a/projects/demo/src/modules/components/table/examples/1/index.less
+++ b/projects/demo/src/modules/components/table/examples/1/index.less
@@ -1,3 +1,5 @@
 .table {
     inline-size: 100%;
+    max-inline-size: 100%;
+    table-layout: fixed;
 }
diff --git a/projects/demo/src/modules/components/table/examples/1/index.ts b/projects/demo/src/modules/components/table/examples/1/index.ts
index 4814a0cdc8e2e..db9b9d068c8fe 100644
--- a/projects/demo/src/modules/components/table/examples/1/index.ts
+++ b/projects/demo/src/modules/components/table/examples/1/index.ts
@@ -18,10 +18,12 @@ export default class Example {
         {
             name: 'Alex Inkin',
             balance: 1323525,
+            country: 'UAE',
         },
         {
             name: 'Roman Sedov',
             balance: 423242,
+            country: 'Russia',
         },
     ] as const;
 
diff --git a/projects/demo/src/modules/components/table/examples/8/index.html b/projects/demo/src/modules/components/table/examples/8/index.html
new file mode 100644
index 0000000000000..ae564c43b7e58
--- /dev/null
+++ b/projects/demo/src/modules/components/table/examples/8/index.html
@@ -0,0 +1,60 @@
+<table
+    tuiTable
+    [columns]="['a', 'b', 'c']"
+>
+    <thead>
+        <tr tuiThGroup>
+            <th
+                *tuiHead="'a'"
+                tuiTh
+                [resizable]="true"
+            >
+                a
+            </th>
+            <th
+                *tuiHead="'b'"
+                tuiTh
+                [resizable]="true"
+            >
+                b
+            </th>
+            <th
+                *tuiHead="'c'"
+                tuiTh
+            >
+                c
+            </th>
+        </tr>
+    </thead>
+    <tbody
+        tuiTbody
+        [data]="[{a: 1, b: 2, c: 3}]"
+    >
+        <tr tuiTr>
+            <td
+                *tuiCell="'a'"
+                tuiTd
+            >
+                a
+            </td>
+            <td
+                *tuiCell="'b'"
+                tuiTd
+            >
+                b
+            </td>
+            <td
+                *tuiCell="'c'"
+                tuiTd
+            >
+                content content
+                ntcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcon
+                tentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
+                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentconten
+                tcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentconten
+                tcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentco
+                ntentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/projects/demo/src/modules/components/table/examples/8/index.ts b/projects/demo/src/modules/components/table/examples/8/index.ts
new file mode 100644
index 0000000000000..302184873bd0a
--- /dev/null
+++ b/projects/demo/src/modules/components/table/examples/8/index.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTable} from '@taiga-ui/addon-table';
+
+@Component({
+    standalone: true,
+    imports: [TuiTable],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}
diff --git a/projects/demo/src/modules/components/table/index.html b/projects/demo/src/modules/components/table/index.html
index 5e45e7fc274f3..7c54c905d1555 100644
--- a/projects/demo/src/modules/components/table/index.html
+++ b/projects/demo/src/modules/components/table/index.html
@@ -11,7 +11,7 @@
             [component]="index + 1 | tuiComponent"
             [content]="index + 1 | tuiExample"
             [description]="index === 4 ? cdkVirtualScrollDescription : null"
-            [fullsize]="index === 4 || index === 5"
+            [fullsize]="index === 0 || index === 4 || index === 5"
             [heading]="example"
             [id]="example | tuiKebab"
         >
diff --git a/projects/demo/src/modules/components/table/index.ts b/projects/demo/src/modules/components/table/index.ts
index dbe2ba8dd43a2..4c4de75043a56 100644
--- a/projects/demo/src/modules/components/table/index.ts
+++ b/projects/demo/src/modules/components/table/index.ts
@@ -19,5 +19,6 @@ export default class Page {
         'Virtual scroll',
         'Dynamic columns',
         'Footer',
+        'Resize columns',
     ];
 }