Angular JS : increase table Column size with mouse

With an Angular simple table designed in the Bootstrap way, you may accomplish resizable table columns by implementing a custom directive that handles column scaling through mouse actions. This is a workaround that lets users adjust the size of table columns by sliding the table header borders.

Step 1: Create a Directive for Resizable Columns

To handle mouse events and resizing logic, first create a new directive. A new file with the name resizable.directive.ts can be created.

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({ 
selector: '[appResizable]' 
})

export class ResizableDirective { 
private startX: number; 
private startWidth: number; 
private resizableElement: HTMLElement; 

constructor(private el: ElementRef, private renderer: Renderer2) { 
this.resizableElement = this.el.nativeElement; 
}

@HostListener('mousedown', ['$event']) 
onMouseDown(event: MouseEvent) { 
// Only allow resizing when clicked near the right edge of the column 
if (this.isNearColumnEdge(event)) { 
this.startX = event.pageX; this.startWidth = this.resizableElement.offsetWidth; 

document.addEventListener('mousemove', this.onMouseMove); 
document.addEventListener('mouseup', this.onMouseUp); 
} 
}

onMouseMove = (event: MouseEvent) => { 
const newWidth = this.startWidth + (event.pageX - this.startX); 
this.renderer.setStyle(this.resizableElement, 'width', ${newWidth}px); 
};

onMouseUp = () => { 
document.removeEventListener('mousemove', this.onMouseMove); 
document.removeEventListener('mouseup', this.onMouseUp); 
};

private isNearColumnEdge(event: MouseEvent): boolean { 
const rect = this.resizableElement.getBoundingClientRect(); 
const offset = 10; // Set a margin near the edge for resizing 
return event.pageX > rect.right - offset && event.pageX < rect.right + offset; 
} 
}

Step 2: Apply the Directive to Your Table Headers

Next, add the directive to the <th> elements in the table headers where you want to enable scaling. To add the appResizable directive to the table, make modifications to your template.

<table class="table table-bordered"> 
<thead> 
<tr> 
<th appResizable>Column 1</th> 
<th appResizable>Column 2</th> 
<th appResizable>Column 3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Row 1, Column 1</td> 
<td>Row 1, Column 2</td> 
<td>Row 1, Column 3</td> 
</tr> 
<tr> 
<td>Row 2, Column 1</td> 
<td>Row 2, Column 2</td> 
<td>Row 2, Column 3</td> 
</tr> 
</tbody> 
</table>

Step 3: Update Your Module

Finally, don't forget to declare your new directive in the module.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { ResizableDirective } from './resizable.directive'; // import the directive 

@NgModule({ 
declarations: [ 
AppComponent, 
ResizableDirective // declare the directive 
], 
imports: [ 
BrowserModule 
], 
providers: [], 
bootstrap: [AppComponent] }) 
export class AppModule { }

With this method, users can adjust the table columns' width by sliding the column headers' right border. It can be further customised by adjusting the resizing sensitivity or by including visual feedback.