Angular 4 material table resizable columns

Question

Is it possible to make Angular 4 material table with resizable columns? Something like This example.

Answer 1

This works perfectly in Angular 4.

export class SomeComponent {
  constructor(private renderer: Renderer2) {
  }

  start: any = undefined;
  pressed: boolean = false;
  startX: any;
  startWidth: any;
  resizableFnMousemove: () => void;
  resizableFnMouseup: () => void;

  resizeTable(event: any, column: any) {
    this.start = event.target;
    this.pressed = true;
    this.startX = event.pageX;
    this.startWidth = this.start.clientWidth;
    this.mouseMove(column);
  }

  mouseMove(column: any) {
    this.resizableFnMousemove = this.renderer.listen('document', 'mousemove', (event) => {
      if (this.pressed) {
        let width = this.startWidth + (event.pageX - this.startX);
        let index = this.start.cellIndex;
        column.width = width;
      }
    });
    this.resizableFnMouseup = this.renderer.listen('document', 'mouseup', (event) => {
      if (this.pressed) {
        this.pressed = false;
        this.resizableFnMousemove();
        this.resizableFnMouseup();
      }
    });
  };

}

You can give the mouse move event on the table header like this

<th [ngStyle]="{'width': column.width > 0 ? column.width + 'px':'100px'}" (mousedown)="resizeTable($event, column)" >
     {{ column.title }}
</th>