feat: resize column to fit content on double click

Author: mistrykaran91

projects/ngx-datatable/src/lib/components/body/body-row.component.ts

@@ -43,6 +43,7 @@ import { DataTableBodyCellComponent } from './body-cell.component';
             <datatable-body-cell
               role="cell"
               tabindex="-1"
+              [attr.header-id]="column.$$id"
               [row]="row"
               [group]="group"
               [expanded]="expanded"

projects/ngx-datatable/src/lib/components/datatable.component.html

@@ -23,6 +23,7 @@
         (sort)="onColumnSort($event)"
         (resize)="onColumnResize($event)"
         (resizing)="onColumnResizing($event)"
+        (fitToContent)="onColumnFitToContent($event)"
         (reorder)="onColumnReorder($event)"
         (select)="onHeaderSelect()"
         (columnContextmenu)="onColumnContextmenu($event)"

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -99,8 +99,7 @@ import { NGX_DATATABLE_CONFIG, NgxDatatableConfig } from '../ngx-datatable.confi
   ]
 })
 export class DatatableComponent<TRow extends Row = any>
-  implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy
-{
+  implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy {
   private scrollbarHelper = inject(ScrollbarHelper);
   private cd = inject(ChangeDetectorRef);
   private columnChangesService = inject(ColumnChangesService);
@@ -906,7 +905,7 @@ export class DatatableComponent<TRow extends Row = any>
   }
 
   /**
-   * Recalulcates the column widths based on column width
+   * Recalculates the column widths based on column width
    * distribution mode and scrollbar offsets.
    */
   recalculateColumns(
@@ -1129,6 +1128,56 @@ export class DatatableComponent<TRow extends Row = any>
     this.recalculateColumns(this._internalColumns, idx);
   }
 
+  /**
+    * Triggered when double clicked on resize handler
+  */
+  onColumnFitToContent({ headerElement, column }: { headerElement: HTMLElement, column: TableColumnInternal }): void {
+
+    const columnCells = Array.from(
+      this.bodyElement.nativeElement.querySelectorAll('datatable-body-cell')
+    );
+
+    const selectedColumnItems = columnCells.filter(c =>
+      c.getAttribute('header-id') === column.$$id
+    );
+
+    // this element has to be a form, otherwise form elements within a cell
+    // will be validated while being cloned. This can cause issues such as
+    // radio buttons being reset and losing their values.
+    const eDummyContainer = document.createElement('form');
+    // position fixed, so it isn't restricted to the boundaries of the parent
+    eDummyContainer.style.position = 'fixed';
+    eDummyContainer.style.padding = '16px';
+
+    const eBodyContainer = this.bodyElement.nativeElement;
+
+    selectedColumnItems.concat(headerElement).forEach(el => this.cloneItemIntoDummy(el, eDummyContainer));
+
+    eBodyContainer.appendChild(eDummyContainer);
+
+    const dummyContainerWidth = eDummyContainer.offsetWidth;
+
+    // we are finished with the dummy container, so get rid of it
+    eBodyContainer.removeChild(eDummyContainer);
+
+    this.onColumnResize({ column, newValue: dummyContainerWidth, prevValue: column.width });
+  }
+
+  private cloneItemIntoDummy(eCell: Element, eDummyContainer: HTMLElement): void {
+    // make a deep clone of the cell
+    const eCellClone: HTMLElement = eCell.cloneNode(true) as HTMLElement;
+    // the original has a fixed width, we remove this to allow the natural width based on content
+    eCellClone.style.width = '';
+    // the original has position = absolute, we need to remove this so it's positioned normally
+    eCellClone.style.position = 'static';
+    eCellClone.style.left = '';
+
+    const eCloneParent = document.createElement('div');
+
+    eCloneParent.append(eCellClone);
+    eDummyContainer.appendChild(eCloneParent);
+  }
+
   /**
    * The header triggered a column re-order event.
    */

projects/ngx-datatable/src/lib/components/header/header-cell.component.ts

@@ -132,6 +132,7 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
   }>(false);
   @Output() resize = new EventEmitter<{ width: number; column: TableColumnInternal }>();
   @Output() resizing = new EventEmitter<{ width: number; column: TableColumnInternal }>();
+  @Output() fitToContent = new EventEmitter<HTMLElement>();
 
   @HostBinding('class')
   get columnCssClasses(): string {
@@ -234,6 +235,15 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
     this.onSort();
   }
 
+  @HostListener('dblclick', ['$event'])
+  onDblClick(event: MouseEvent): void {
+    const isHandle = (event.target as HTMLElement).classList.contains('resize-handle');
+    if (isHandle) {
+      event.stopPropagation();
+      this.fitToContent.emit(this.element);
+    }
+  }
+
   ngOnInit() {
     this.sortClass = this.calcSortClass(this.sortDir);
     // If there is already a default sort then start the counter with 1.

projects/ngx-datatable/src/lib/components/header/header.component.ts

@@ -60,6 +60,7 @@ import { OrderableDirective } from '../../directives/orderable.directive';
                 role="columnheader"
                 (resize)="onColumnResized($event)"
                 (resizing)="onColumnResizing($event)"
+                (fitToContent)="onColumnFitToContent($event, column)"
                 long-press
                 [pressModel]="column"
                 [pressEnabled]="reorderable && column.draggable"
@@ -191,6 +192,10 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
     event: MouseEvent;
     column: TableColumnInternal;
   }>(false);
+  @Output() fitToContent = new EventEmitter<{
+    headerElement: HTMLElement;
+    column: TableColumnInternal;
+  }>();
 
   _columnsByPin!: PinnedColumns[];
   _columnGroupWidths: any = {
@@ -267,6 +272,10 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
     this.resizing.emit(this.makeResizeEvent(width, column));
   }
 
+  onColumnFitToContent(headerElement: HTMLElement, column: TableColumnInternal) {
+    this.fitToContent.emit({ headerElement, column });
+  }
+
   private makeResizeEvent(
     width: number,
     column: TableColumnInternal<Row>