feat: non resizable columns functionality in table (#813)

* feat: non resizable columns functionality in table

Author: itssharmasandeep

projects/components/src/table/table.component.scss

@@ -81,13 +81,15 @@ $header-height: 32px;
   .header-column-resize-handle {
     padding: 6px 2px;
     height: 100%;
-    cursor: col-resize;
 
-    &:hover {
-      padding: 0 2px;
+    &.resizable {
+      cursor: col-resize;
+      &:hover {
+        padding: 0 2px;
 
-      .header-column-divider {
-        background-color: $gray-9;
+        .header-column-divider {
+          background-color: $gray-9;
+        }
       }
     }
 

projects/components/src/table/table.component.ts

@@ -80,6 +80,7 @@ import { TableColumnConfigExtended, TableService } from './table.service';
               <div
                 *ngIf="index !== 0"
                 class="header-column-resize-handle"
+                [ngClass]="{ resizable: this.resizable }"
                 (mousedown)="this.onResizeMouseDown($event, index)"
               >
                 <div class="header-column-divider"></div>
@@ -247,6 +248,9 @@ export class TableComponent
   @Input()
   public pageable?: boolean = true;
 
+  @Input()
+  public resizable?: boolean = true;
+
   @Input()
   public detailContent?: TemplateRef<{ row: StatefulTableRow }>;
 
@@ -426,15 +430,17 @@ export class TableComponent
   }
 
   public onResizeMouseDown(event: MouseEvent, index: number): void {
-    this.resizeHeaderOffsetLeft = this.headerRowElement.nativeElement.offsetLeft;
+    if (this.resizable) {
+      this.resizeHeaderOffsetLeft = this.headerRowElement.nativeElement.offsetLeft;
 
-    this.resizeColumns = {
-      left: this.buildColumnInfo(index - 1),
-      right: this.buildColumnInfo(index)
-    };
+      this.resizeColumns = {
+        left: this.buildColumnInfo(index - 1),
+        right: this.buildColumnInfo(index)
+      };
 
-    this.resizeStartX = event.clientX;
-    event.preventDefault();
+      this.resizeStartX = event.clientX;
+      event.preventDefault();
+    }
   }
 
   @HostListener('mousemove', ['$event'])

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts

@@ -104,6 +104,13 @@ export abstract class TableWidgetBaseModel extends BaseModel {
   })
   public pageable: boolean = true;
 
+  @ModelProperty({
+    key: 'resizable',
+    displayName: 'Resizable',
+    type: BOOLEAN_PROPERTY.type
+  })
+  public resizable: boolean = true;
+
   @ModelInject(MODEL_API)
   protected readonly api!: ModelApi;
 
@@ -157,4 +164,8 @@ export abstract class TableWidgetBaseModel extends BaseModel {
   public isPageable(): boolean {
     return this.pageable;
   }
+
+  public isResizable(): boolean {
+    return this.resizable;
+  }
 }

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -78,6 +78,7 @@ import { TableWidgetModel } from './table-widget.model';
           [filters]="this.combinedFilters$ | async"
           [queryProperties]="this.queryProperties$ | async"
           [pageable]="this.api.model.isPageable()"
+          [resizable]="this.api.model.isResizable()"
           [detailContent]="childDetail"
           [syncWithUrl]="this.syncWithUrl"
           (selectionsChange)="this.onRowSelection($event)"