Prevent sort trigger on a table column when resizing it

Question

How can I prevent the sort being triggered on a table column when resizing the column with the resizable component? When the mouseup event occurs over the th that's being resized it triggers the sort. I tried to prevent it in the nzResizeEnd event but I guess thats's too late. Can some one help me please? Example https://stackblitz.com/edit/angular-jqs53u?embed=1&file=src/app/app.component.ts

Went to file the issue in the library repo and someone already has 11 days ago. Let's hope for a quick fix. https://github.com/NG-ZORRO/ng-zorro-antd/issues/5199

I'm not getting the described behavior in the stackblitz, in fact it's not sorting at all. Can you double check it? Then maybe I will be able to help. — kebab-case, May 15 '20 at 16:37
@Minyc510 The problem is not sorting the data, that's not coded in the example. The problem is that sorting is being triggered when resizing, which is wrong. I added an alert so its more visible when sorting triggers. Try resizing a column, more specifically shrinking it. — haxor, May 15 '20 at 17:07
@PoulKruijt Yes that's right, I will. In the meantime I'm trying to prevent the event some how. — haxor, May 15 '20 at 17:29
@PoulKruijt Went to file the issue and someone already has 11 days ago. Let's hope for a quick fix. — haxor, May 15 '20 at 18:59
@haxor perhaps you can post the issue link here, for futher readers reference — Poul Kruijt, May 15 '20 at 20:11

haxor · Accepted Answer · 2020-06-17T13:52:29.940

Solved the issue by disabling pointer events while resizing.

Component.ts: resizing: boolean = false;

Template:

<th 
  [class.pointer-events-none]="resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

Style:

.pointer-events-none {
  pointer-events: none;
}

The stackblitz shows the working state. Now resizing doesn't cause a change in sort direction.

Found out about css pointer-events in another StackOverflow answer.

Also want to thank you Poul Kruijt for your help.

score 0 · Answer 2 · answered May 15 '20 at 18:32

0

You can do the following on the table header (removed unimportant code):

<th 
  [nzShowSort]="!resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

component ts:

resizing: boolean = false;

working example

This will disable sort while resizing, and re-enable it when it's done

answered May 15 '20 at 18:32

Poul Kruijt

69,713
12
145
149

Oh man, that would have been such a nice workaround, but it's not working right. It still triggers the sort on column shrink. Thanks though. – haxor May 15 '20 at 18:55
@haxor not for me on that stackblitz. Are you sure? – Poul Kruijt May 15 '20 at 19:36
Yeah I've tried both in your stackblitz link and in my real project. When I start resizing the columns loose the ShowSort directive, but when release the mouse over the resized th the sort gets triggered. – haxor May 15 '20 at 22:16
@haxor that is so odd. When i hold down the mouse to resize, I can see the sort icons disappear, and re-appear when releasing the mouse. What browser are you using? – Poul Kruijt May 16 '20 at 08:36

score 0 · Answer 3 · answered Jun 08 '23 at 18:52

Old thread, but this was the top and best result I found when searching for this issue. I have a Material table that was doing the same thing.

Here is the fix I applied, just in case it helps someone else:

HTML

<th mat-header-cell *matHeaderCellDef mat-sort-header [class.pointer-events-none]="areWeResizingAColumn">

CSS (or SCSS)

.pointer-events-none {
  pointer-events: none;
}

TS

areWeResizingAColumn: boolean = false;

onResizeColumn(event: any, index: number) {
  this.areWeResizingAColumn = true;
  this.checkResizing(event, index);
  this.currentResizeIndex = index;
  this.pressed = true;
  this.startX = event.pageX;
  this.startWidth = this.columnsToDisplay[index].width;
  event.preventDefault();
  this.mouseMove(index);
}

mouseMove(index: number) {
   this.resizableMousemove = this.renderer.listen('document', 'mousemove', (event) => {
     if (this.pressed && event.buttons ) {
       const dx = (this.isResizingRight) ? (event.pageX - this.startX) : (-event.pageX + this.startX);
       const width = this.startWidth + dx;
       if ( this.currentResizeIndex === index  && width > 50) {
         this.setColumnWidthChanges(index, width);
       }
      } else {
        this.areWeResizingAColumn = false;
        event.preventDefault();
      }
    });
    this.resizableMouseup = this.renderer.listen('document', 'mouseup', (event) => {
      if (this.pressed) {
        this.pressed = false;
        this.currentResizeIndex = -1;
        this.resizableMousemove();
        this.resizableMouseup();
        setTimeout(() => {this.areWeResizingAColumn = false;}, 100);
      } else {
      }
    });
  }

  sortChange(sortParams: any) {

    if (this.areWeResizingAColumn) return;
    //Your other sort code here

  }

Prevent sort trigger on a table column when resizing it

3 Answers3