Prevent sort trigger on a table column when resizing it

user_8714275 0
Viewed 692

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

ng-zorro-antd angular
2 Answers

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.

user_87142750

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

user_31069200
Related