feat(addon-table): allow resize more than 100% width of table

taiga-family · Dec 10, 2024 · 69a2095 · 69a2095
1 parent b94bec5
commit 69a2095
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 1 deletion.
diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts
@@ -24,7 +24,8 @@ import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options';
     styleUrls: ['./th.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[style.width.px]': 'width',
+        '[style.min-width.px]': 'width',
+        '[style.max-width.px]': 'width',
         '[class._sticky]': 'sticky',
     },
 })

diff --git a/projects/demo/src/modules/components/table/examples/8/index.html b/projects/demo/src/modules/components/table/examples/8/index.html
@@ -0,0 +1,61 @@
+<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
+                [resizable]="true"
+            >
+                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
@@ -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.ts b/projects/demo/src/modules/components/table/index.ts
@@ -19,5 +19,6 @@ export default class Page {
         'Virtual scroll',
         'Dynamic columns',
         'Footer',
+        'Allow resize more than 100%',
     ];
 }