[ACS-6489] Add resizable option for column data model (#9220)

* [ACS-6489] Add resizable option for column data model

* [ACS-6489] CR fixes

docs/core/components/data-column.component.md

@@ -48,6 +48,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | cssClass | `string` |  | Additional CSS class to be applied to column (header and cells). |
 | customData | `any` |  | You can specify any custom data which can be used by any specific feature |
 | draggable | `boolean` | false | Enable drag and drop for header column |
+| resizable | `boolean` | true | Enable column resizing |
 | editable | `boolean` | false | Toggles the editing support of the column data. |
 | focus | `boolean` | true | Enable or disable cell focus |
 | format | `string` |  | Value format (if supported by the parent component), for example format of the date. |

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -96,7 +96,7 @@
                     </span>
                 </div>
                 <div
-                    *ngIf="isResizingEnabled"
+                    *ngIf="isResizingEnabled && col.resizable"
                     adf-resize-handle
                     class="adf-datatable__resize-handle"
                     [resizableContainer]="resizableElement">

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -1694,6 +1694,10 @@ describe('Column Resizing', () => {
 
     const getResizeHandler = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
 
+    const getResizeHandlersCount = (): number => {
+        const resizeHandlers = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable__resize-handle');
+        return resizeHandlers.length;
+    };
 
     const testClassesAfterResizing = (headerColumnsSelector = '.adf-datatable-cell-header', excludedClass = 'adf-datatable__cursor--pointer') => {
         dataTable.isResizingEnabled = true;
@@ -1744,6 +1748,22 @@ describe('Column Resizing', () => {
         });
     });
 
+    it('should display resize handle for each column by default', () => {
+        dataTable.isResizingEnabled = true;
+        fixture.detectChanges();
+
+        expect(getResizeHandlersCount()).toBe(2);
+    });
+
+    it('should NOT display resize handle for the column when the column has resizable param set to false', () => {
+        dataTable.isResizingEnabled = true;
+        dataTableSchema[0].resizable = false;
+        dataTable.data = new ObjectDataTableAdapter([...data], [...dataTableSchema]);
+        fixture.detectChanges();
+
+        expect(getResizeHandlersCount()).toBe(1);
+    });
+
     it('should display resize handle when the feature is Enabled [isResizingEnabled=true]', () => {
         dataTable.isResizingEnabled = true;
 

lib/core/src/lib/datatable/data-column/data-column.component.stories.ts

@@ -85,6 +85,20 @@ export default {
                 }
             }
         },
+        resizable: {
+            description: 'Toggles resize for column.',
+            control: { type: 'boolean' },
+            defaultValue: true,
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
         editable: {
             description: 'Toggles the editing support of the column data.',
             control: { type: 'boolean', disable: true },

lib/core/src/lib/datatable/data-column/data-column.component.ts

@@ -61,6 +61,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     draggable: boolean = false;
 
+    /** Enable resize for column */
+    @Input()
+    resizable = true;
+
     /** Hide column */
     @Input()
     isHidden: boolean = false;

lib/core/src/lib/datatable/data/data-column.model.ts

@@ -37,6 +37,7 @@ export interface DataColumn<T = unknown> {
     sortingKey?: string;
     header?: TemplateRef<any>;
     draggable?: boolean;
+    resizable?: boolean;
     isHidden?: boolean;
     width?: number;
     customData?: T;

lib/core/src/lib/datatable/data/object-datacolumn.model.ts

@@ -35,6 +35,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     sortingKey?: string;
     header?: TemplateRef<any>;
     draggable: boolean;
+    resizable: boolean;
     isHidden: boolean;
     customData?: T;
     width?: number;
@@ -58,6 +59,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
         this.sortingKey = input.sortingKey;
         this.header = input.header;
         this.draggable = input.draggable ?? false;
+        this.resizable = input.resizable ?? true;
         this.isHidden = input.isHidden ?? false;
         this.customData = input.customData;
         this.width = input.width;

lib/core/src/lib/mock/data-column.mock.ts

@@ -36,6 +36,7 @@ export const getDataColumnMock = <T = unknown>(
     sortingKey: 'sortingKey',
     header: undefined,
     draggable: false,
+    resizable: true,
     isHidden: false,
     customData: undefined,
     ...column

lib/extensions/src/lib/config/document-list.extensions.ts

@@ -50,4 +50,5 @@ export interface DocumentListPresetRef extends ExtensionElement {
         visible?: string;
     };
     draggable?: boolean;
+    resizable?: boolean;
 }

lib/extensions/src/lib/config/schema/plugin-extension.schema.json

@@ -565,6 +565,10 @@
         "desktopOnly": {
           "description": "Display column only for large screens",
           "type": "boolean"
+        },
+        "resizable": {
+          "description": "Toggles resizable state of the column",
+          "type": "boolean"
         }
       }
     }