Enable table column resizing on touch-based devices

change/@ni-nimble-components-3680232d-ba1a-47f0-8cdc-dc6effd176ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable table column resizing on touch-based devices",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table/index.ts

@@ -557,6 +557,18 @@ export class Table<
         }
     }
 
+    /** @internal */
+    public onRightDividerTouchStart(
+        event: TouchEvent,
+        columnIndex: number
+    ): void {
+        this.layoutManager.beginColumnInteractiveSize(
+            event.targetTouches[0]!.clientX,
+            this.getRightDividerIndex(columnIndex)
+        );
+        event.preventDefault();
+    }
+
     /** @internal */
     public onLeftDividerMouseDown(
         event: MouseEvent,
@@ -570,6 +582,18 @@ export class Table<
         }
     }
 
+    /** @internal */
+    public onLeftDividerTouchStart(
+        event: TouchEvent,
+        columnIndex: number
+    ): void {
+        this.layoutManager.beginColumnInteractiveSize(
+            event.targetTouches[0]!.clientX,
+            this.getLeftDividerIndex(columnIndex)
+        );
+        event.preventDefault();
+    }
+
     /** @internal */
     public getLeftDividerIndex(columnIndex: number): number {
         return columnIndex * 2 - 1;

packages/nimble-components/src/table/models/table-layout-manager.ts

@@ -78,7 +78,9 @@ export class TableLayoutManager<TData extends TableRecord> {
         this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
         this.isColumnBeingSized = true;
         document.addEventListener('mousemove', this.onDividerMouseMove);
-        document.addEventListener('mouseup', this.onDividerMouseUp);
+        document.addEventListener('touchmove', this.onDividerTouchMove);
+        document.addEventListener('mouseup', this.onDividerMoveEnd);
+        document.addEventListener('touchend', this.onDividerMoveEnd);
     }
 
     /**
@@ -96,12 +98,19 @@ export class TableLayoutManager<TData extends TableRecord> {
     }
 
     private readonly onDividerMouseMove = (event: Event): void => {
-        const mouseEvent = event as MouseEvent;
+        this.onDividerMove((event as MouseEvent).clientX);
+    };
+
+    private readonly onDividerTouchMove = (event: Event): void => {
+        this.onDividerMove((event as TouchEvent).targetTouches[0]!.clientX);
+    };
+
+    private onDividerMove(clientX: number): void {
         for (let i = 0; i < this.visibleColumns.length; i++) {
             this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;
         }
         this.currentTotalDelta = this.getAllowedSizeDelta(
-            mouseEvent.clientX - this.dragStart
+            clientX - this.dragStart
         );
         this.performCascadeSizeLeft(
             this.leftColumnIndex!,
@@ -118,11 +127,13 @@ export class TableLayoutManager<TData extends TableRecord> {
         } else {
             this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth!;
         }
-    };
+    }
 
-    private readonly onDividerMouseUp = (): void => {
+    private readonly onDividerMoveEnd = (): void => {
         document.removeEventListener('mousemove', this.onDividerMouseMove);
-        document.removeEventListener('mouseup', this.onDividerMouseUp);
+        document.removeEventListener('touchmove', this.onDividerTouchMove);
+        document.removeEventListener('mouseup', this.onDividerMoveEnd);
+        document.removeEventListener('touchend', this.onDividerMoveEnd);
         this.resetGridSizedColumns();
         this.isColumnBeingSized = false;
         this.activeColumnIndex = undefined;

packages/nimble-components/src/table/template.ts

@@ -103,7 +103,8 @@ export const template = html<Table>`
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
                                             "
-                                            @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event as MouseEvent, c.index)}">
+                                            @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event as MouseEvent, c.index)}"
+                                            @touchstart="${(_, c) => c.parent.onLeftDividerTouchStart(c.event as TouchEvent, c.index)}">
                                         </div>
                                     `)}
                                         <${tableHeaderTag}
@@ -128,7 +129,8 @@ export const template = html<Table>`
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
                                             "
-                                             @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event as MouseEvent, c.index)}">
+                                             @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event as MouseEvent, c.index)}"
+                                            @touchstart="${(_, c) => c.parent.onRightDividerTouchStart(c.event as TouchEvent, c.index)}">
                                         </div>
                                     `)}                        
                                 </div>