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

taiga-family · Dec 14, 2024 · 8ba19d7 · 8ba19d7
1 parent 155c96c
commit 8ba19d7
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 2 deletions.
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,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -19,5 +19,6 @@ export default class Page {
         'Virtual scroll',
         'Dynamic columns',
         'Footer',
+        'Resize columns',
     ];
 }