Add support for resizable columns for CpsTable and CpsTreeTable compo…

…nents (#402)

* Add support for resizable columns in table and treetable

* Remove cypress component test files

* Update docs generator tsconfig to ignore spec files, regenerate docs

projects/composition/src/app/api-data/cps-table.json

@@ -563,6 +563,22 @@
                         "type": "any[]",
                         "default": "[]",
                         "description": "An array of objects to display."
+                    },
+                    {
+                        "name": "resizableColumns",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
+                    },
+                    {
+                        "name": "columnResizeMode",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "\"expand\" | \"fit\"",
+                        "default": "fit",
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

projects/composition/src/app/api-data/cps-tree-table.json

@@ -547,6 +547,22 @@
                         "type": "any[]",
                         "default": "[]",
                         "description": "An array of objects to display."
+                    },
+                    {
+                        "name": "resizableColumns",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
+                    },
+                    {
+                        "name": "columnResizeMode",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "\"expand\" | \"fit\"",
+                        "default": "fit",
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

projects/composition/src/app/pages/table-page/table-page.component.html

@@ -47,8 +47,9 @@
         [virtualScroll]="true"
         [showColumnsToggleBtn]="true"
         scrollHeight="500px"
-        toolbarTitle="Sortable table with virtual scroller, global filter, internal columns toggle and with column filtering enabled"
-        [filterableByColumns]="true">
+        toolbarTitle="Sortable table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled"
+        [filterableByColumns]="true"
+        [resizableColumns]="true">
       </cps-table>
     </cps-tab>
     <cps-tab label="Table 3">
@@ -63,18 +64,20 @@
         (editRowBtnClicked)="onEditRowButtonClicked($event)"
         (actionBtnClicked)="onActionBtnClicked()"
         (dataReloadBtnClicked)="onReloadBtnClicked()"
-        toolbarTitle="Table with draggable rows, rows menus, action and data reload buttons. Each row menu has a 'Remove' button, which is currently {{
+        toolbarTitle="Table with resizable columns (expand mode), draggable rows, rows menus, action and data reload buttons. Each row menu has a 'Remove' button, which is currently {{
           isRemoveBtnVisible ? 'visible' : 'hidden'
         }}"
         actionBtnTitle="{{
           isRemoveBtnVisible ? 'Hide' : 'Show'
-        }} Remove buttons">
+        }} Remove buttons"
+        [resizableColumns]="true"
+        [columnResizeMode]="'expand'">
         <ng-template #header>
-          <th>A</th>
-          <th>B</th>
-          <th>C</th>
-          <th>D</th>
-          <th>E</th>
+          <th cpsTColResizable>A</th>
+          <th cpsTColResizable>B</th>
+          <th cpsTColResizable>C</th>
+          <th cpsTColResizable>D</th>
+          <th cpsTColResizable>E</th>
         </ng-template>
 
         <ng-template let-item #body>

projects/composition/src/app/pages/table-page/table-page.component.ts

@@ -5,6 +5,7 @@ import {
   CpsTableComponent,
   CpsTableColumnFilterDirective,
   CpsTableColumnSortableDirective,
+  CpsTableColumnResizableDirective,
   CpsTableHeaderSelectableDirective,
   CpsTabGroupComponent,
   CpsTabComponent,
@@ -29,6 +30,7 @@ import ComponentData from '../../api-data/cps-table.json';
     CpsTableColumnSortableDirective,
     CpsTableColumnFilterDirective,
     CpsTableHeaderSelectableDirective,
+    CpsTableColumnResizableDirective,
     CpsTabGroupComponent,
     CpsTabComponent,
     CpsButtonToggleComponent,

projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html

@@ -11,30 +11,43 @@
         [paginator]="true"
         [scrollable]="false"
         sortMode="multiple"
-        toolbarTitle="Tree table with a paginator, multiple sorting and individual filtering">
+        [resizableColumns]="true"
+        [columnResizeMode]="'expand'"
+        toolbarTitle="Tree table with a paginator, resizable columns, multiple sorting and individual filtering">
         <ng-template #header>
-          <th cpsTTColSortable="name" cpsTTColFilter="name" filterType="text">
+          <th
+            cpsTTColSortable="name"
+            cpsTTColFilter="name"
+            filterType="text"
+            cpsTTColResizable>
             Name
           </th>
-          <th cpsTTColSortable="size" cpsTTColFilter="size" filterType="number">
+          <th
+            cpsTTColSortable="size"
+            cpsTTColFilter="size"
+            filterType="number"
+            cpsTTColResizable>
             Size
           </th>
           <th
             cpsTTColSortable="modified"
             cpsTTColFilter="modified"
-            filterType="date">
+            filterType="date"
+            cpsTTColResizable>
             Modified
           </th>
           <th
             cpsTTColSortable="encrypted"
             cpsTTColFilter="encrypted"
-            filterType="boolean">
+            filterType="boolean"
+            cpsTTColResizable>
             Encrypted
           </th>
           <th
             cpsTTColSortable="importance"
             cpsTTColFilter="importance"
-            filterType="category">
+            filterType="category"
+            cpsTTColResizable>
             Importance
           </th>
         </ng-template>
@@ -62,8 +75,14 @@
         [virtualScroll]="true"
         [showColumnsToggleBtn]="true"
         [filterableByColumns]="true"
+        [resizableColumns]="true"
         scrollHeight="500px"
-        toolbarTitle="Sortable tree table with virtual scroller, global filter, internal columns toggle and with column filtering enabled">
+        toolbarTitle="Sortable tree table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled">
+        <ng-template #colgroup>
+          <colgroup>
+            <col *ngFor="let col of colsVirtual" />
+          </colgroup>
+        </ng-template>
       </cps-tree-table>
     </cps-tab>
     <cps-tab label="Tree table 3">

projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts

@@ -13,7 +13,8 @@ import {
   CpsTreeTableHeaderSelectableDirective,
   CpsButtonToggleOption,
   CpsTreeTableSize,
-  CpsMenuItem
+  CpsMenuItem,
+  CpsTreeTableColumnResizableDirective
 } from 'cps-ui-kit';
 
 import ComponentData from '../../api-data/cps-tree-table.json';
@@ -30,6 +31,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
     CpsTreeTableColumnSortableDirective,
     CpsTreeTableColumnFilterDirective,
     CpsTreeTableHeaderSelectableDirective,
+    CpsTreeTableColumnResizableDirective,
     CpsTabGroupComponent,
     CpsTabComponent,
     CpsButtonToggleComponent,