Here in mat table resizeColumn used to resize the columns of table. I am able to resize for two columns Annotation and status because this column has no sorting header but uploadTime and size here resize column is not working, when i remove mat-sort-header it starts working. i am unable find the problem.how can i resize with mat-sort-header??
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChange($event)"
class="mat-elevation-z8">
<ng-container matColumnDef="annotation">
<th mat-header-cell *matHeaderCellDef [resizeColumn]="true">Annotation</th>
<td mat-cell *matCellDef="let data;let i=index">{{data.annotation}}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef [resizeColumn]="true">Status</th>
<td mat-cell *matCellDef="let data;let i=index">{{data.status}}</td>
</ng-container>
<ng-container matColumnDef="uploadTime">
<th mat-header-cell *matHeaderCellDef [resizeColumn]="true" mat-sort-header>UploadTime</th>
<td mat-cell *matCellDef="let data;let i=index">{{data.uploadedTime}}</td>
</ng-container>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef [resizeColumn]="true" mat-sort-header>Size</th>
<td mat-cell *matCellDef="let data;let i=index">{{data.size}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
<tr mat-row *matRowDef="let row;columns:displayColumns | paginate: {itemsPerPage:
itemsPerPage, currentPage: p,totalItems:size}"></tr>
</table>
ResizeColumn directive
import { Directive,OnInit, Renderer2, Input, ElementRef,ViewChild} from '@angular/core';
import { MatSort } from '@angular/material/sort';
@Directive({
selector: '[resizeColumn]'
})
export class ResizecolDirective implements OnInit {
@Input("resizeColumn") resizable!:boolean;
private startX!:number;
private startWidth!:number;
private column!: HTMLElement;
private table!: HTMLElement;
private pressed!: boolean;
constructor(private renderer: Renderer2, private el: ElementRef) {
this.column = this.el.nativeElement;
}
ngOnInit(){
if (this.resizable) {
const row = this.renderer.parentNode(this.column);
const thead = this.renderer.parentNode(row);
this.table = this.renderer.parentNode(thead);
const resizer = this.renderer.createElement("span");
this.renderer.addClass(resizer, "resize-holder");
this.renderer.appendChild(this.column, resizer);
this.renderer.listen(resizer, "mousedown", this.onMouseDown);
this.renderer.listen(this.table, "mousemove", this.onMouseMove);
this.renderer.listen("document", "mouseup", this.onMouseUp);
}
}
onMouseDown = (event: MouseEvent) => {
this.pressed = true;
this.startX = event.pageX;
this.startWidth = this.column.offsetWidth;
};
onMouseMove = (event: MouseEvent) => {
const offset = 30;
if (this.pressed && event.buttons) {
this.renderer.addClass(this.table, "resizing");
let width =this.startWidth + (event.pageX - this.startX - offset);
this.renderer.setStyle(this.column, "width", `${width}px`);
}
};
onMouseUp = (event: MouseEvent) => {
if (this.pressed) {
this.pressed = false;
this.renderer.removeClass(this.table, "resizing");
}
};
}
