From 30172519868d90cdcf78e9ec64ba43bbae1716df Mon Sep 17 00:00:00 2001
From: Glen Staes <staeseke@gmail.com>
Date: Sat, 22 Nov 2025 10:07:41 +0100
Subject: [PATCH 1/2] Lock table record row dragging visually within tbody
 element

---
 .../ng-common-components/src/lib/table/table.component.html     | 2 ++
 .../ng-common-components/src/lib/table/table.component.scss     | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
index fd4626f1..9eeb11f9 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
+++ b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
@@ -172,6 +172,8 @@
             (cdkDragReleased)="dragDisabled = true"
             [class.highlight]="options()?.rows?.highlightOnHover"
             [class.clickable]="options()?.rows?.onClick || options()?.rows?.onCtrlClick || expandable()"
+            [cdkDragLockAxis]="'y'"
+            [cdkDragBoundary]="'tbody'"
         ></tr>
         @if (expandable()) {
             <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="ppw-table-expanded-row"></tr>
diff --git a/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss b/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
index cc451a53..c8b5e5c5 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
+++ b/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
@@ -124,7 +124,7 @@
     }
 }
 
-.ppw-table-row-enter {
+.ppw-table-row-enter:not(.cdk-drag-preview) {
     animation: slide-in-row 0.25s ease-in-out;
 }
 

From aa84dccb8c03ae1037f638b6c843fc1d5ddbb0e3 Mon Sep 17 00:00:00 2001
From: Glen Staes <staeseke@gmail.com>
Date: Sat, 22 Nov 2025 10:06:40 +0100
Subject: [PATCH 2/2] Fix table row drag not happening on first clicks

---
 .../src/lib/table/abstract-table.component.ts   |  2 +-
 .../src/lib/table/table.component.html          | 17 +++--------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts b/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
index 8215f7e0..4f9333e7 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
+++ b/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
@@ -123,7 +123,7 @@ export abstract class AbstractTableComponent<TRecord, TData = FormArray<FormGrou
     public dataSource: WritableSignal<MatTableDataSource<TableRecord<TRecord>>> = linkedSignal(() => {
         return new MatTableDataSource(this.localRecords())
     })
-    dragDisabled = true
+
     public selection = new SelectionModel<TableRecord<TRecord>>(
         true,
         [],
diff --git a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
index 9eeb11f9..cb88324c 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
+++ b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
@@ -22,16 +22,7 @@
             <ng-container matColumnDef="rowDrag">
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let element" class="drag-table-cell">
-                    <mat-icon
-                        cdkDragHandle
-                        mat-ripple
-                        class="drag-handle"
-                        (touchstart)="dragDisabled = false"
-                        (touchend)="dragDisabled = true"
-                        (mousedown)="dragDisabled = false"
-                        (mouseup)="dragDisabled = true"
-                        >drag_indicator
-                    </mat-icon>
+                    <mat-icon cdkDragHandle mat-ripple class="drag-handle">drag_indicator </mat-icon>
                 </td>
                 @if (footerData() !== undefined) {
                     <td mat-footer-cell *matFooterCellDef></td>
@@ -165,11 +156,9 @@
         <tr mat-header-row *matHeaderRowDef="columnNames(); sticky: !!options()?.header?.sticky"></tr>
         <tr
             mat-row
-            [class.ppw-table-row-enter]="!disableAnimations()"
-            *matRowDef="let row; columns: columnNames()"
             cdkDrag
-            [cdkDragDisabled]="dragDisabled"
-            (cdkDragReleased)="dragDisabled = true"
+            *matRowDef="let row; columns: columnNames()"
+            [class.ppw-table-row-enter]="!disableAnimations()"
             [class.highlight]="options()?.rows?.highlightOnHover"
             [class.clickable]="options()?.rows?.onClick || options()?.rows?.onCtrlClick || expandable()"
             [cdkDragLockAxis]="'y'"