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"
+}

change/@ni-spright-components-b5fad4b3-b842-42db-9302-e191ec567e1a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add DOM.Iterable to the build",
+  "packageName": "@ni/spright-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -545,25 +545,29 @@ export class Table<
     }
 
     /** @internal */
-    public onRightDividerMouseDown(
-        event: MouseEvent,
+    public onRightDividerPointerDown(
+        event: PointerEvent,
         columnIndex: number
     ): void {
-        if (event.button === 0) {
+        if (event.pointerType !== 'mouse' || event.button === 0) {
             this.layoutManager.beginColumnInteractiveSize(
+                event.target as HTMLElement,
+                event.pointerId,
                 event.clientX,
                 this.getRightDividerIndex(columnIndex)
             );
         }
     }
 
     /** @internal */
-    public onLeftDividerMouseDown(
-        event: MouseEvent,
+    public onLeftDividerPointerDown(
+        event: PointerEvent,
         columnIndex: number
     ): void {
-        if (event.button === 0) {
+        if (event.pointerType !== 'mouse' || event.button === 0) {
             this.layoutManager.beginColumnInteractiveSize(
+                event.target as HTMLElement,
+                event.pointerId,
                 event.clientX,
                 this.getLeftDividerIndex(columnIndex)
             );

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

@@ -22,6 +22,7 @@ export class TableLayoutManager<TData extends TableRecord> {
     private initialTableScrollableWidth?: number;
     private initialTableScrollableMinWidth?: number;
     private initialColumnTotalWidth?: number;
+    private activeColumnDividerElement?: HTMLElement;
     private currentTotalDelta = 0;
     private dragStart = 0;
     private leftColumnIndex?: number;
@@ -56,14 +57,19 @@ export class TableLayoutManager<TData extends TableRecord> {
 
     /**
      * Sets up state related to interactively sizing a column.
+     * @param activeColumnDividerElement The divider element that was clicked on
+     * @param pointerId The pointerId of the pointer that started the drag
      * @param dragStart The x-position from which a column size was started
-     * @param activeColumnDivider The divider that was clicked on
+     * @param activeColumnDivider The 1-based index of the divider that was clicked on
      */
     public beginColumnInteractiveSize(
+        activeColumnDividerElement: HTMLElement,
+        pointerId: number,
         dragStart: number,
         activeColumnDivider: number
     ): void {
         this.activeColumnDivider = activeColumnDivider;
+        this.activeColumnDividerElement = activeColumnDividerElement;
         this.leftColumnIndex = this.getLeftColumnIndexFromDivider(
             this.activeColumnDivider
         );
@@ -77,8 +83,18 @@ export class TableLayoutManager<TData extends TableRecord> {
         this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
         this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
         this.isColumnBeingSized = true;
-        document.addEventListener('mousemove', this.onDividerMouseMove);
-        document.addEventListener('mouseup', this.onDividerMouseUp);
+        // pointerId of -1 indicates source was synthetic PointerEvent: https://w3c.github.io/pointerevents/#dom-pointerevent-pointerid
+        if (pointerId !== -1) {
+            activeColumnDividerElement.setPointerCapture(pointerId);
+        }
+        activeColumnDividerElement.addEventListener(
+            'pointermove',
+            this.onDividerPointerMove
+        );
+        activeColumnDividerElement.addEventListener(
+            'pointerup',
+            this.onDividerPointerUp
+        );
     }
 
     /**
@@ -95,13 +111,12 @@ export class TableLayoutManager<TData extends TableRecord> {
         return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;
     }
 
-    private readonly onDividerMouseMove = (event: Event): void => {
-        const mouseEvent = event as MouseEvent;
+    private readonly onDividerPointerMove = (event: PointerEvent): 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
+            event.clientX - this.dragStart
         );
         this.performCascadeSizeLeft(
             this.leftColumnIndex!,
@@ -120,13 +135,20 @@ export class TableLayoutManager<TData extends TableRecord> {
         }
     };
 
-    private readonly onDividerMouseUp = (): void => {
-        document.removeEventListener('mousemove', this.onDividerMouseMove);
-        document.removeEventListener('mouseup', this.onDividerMouseUp);
+    private readonly onDividerPointerUp = (): void => {
+        this.activeColumnDividerElement!.removeEventListener(
+            'pointermove',
+            this.onDividerPointerMove
+        );
+        this.activeColumnDividerElement!.removeEventListener(
+            'pointerup',
+            this.onDividerPointerUp
+        );
         this.resetGridSizedColumns();
         this.isColumnBeingSized = false;
         this.activeColumnIndex = undefined;
         this.activeColumnDivider = undefined;
+        this.activeColumnDividerElement = undefined;
         this.visibleColumns = [];
     };
 

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

@@ -66,13 +66,6 @@ export const styles = css`
         cursor: var(--ni-private-table-cursor-override);
     }
 
-    .glass-overlay {
-        width: 100%;
-        height: 100%;
-        display: contents;
-        pointer-events: var(--ni-private-glass-overlay-pointer-events);
-    }
-
     .header-row-container {
         position: sticky;
         top: 0;
@@ -150,6 +143,7 @@ export const styles = css`
         cursor: col-resize;
         position: absolute;
         z-index: ${ZIndexLevels.zIndex1};
+        touch-action: pan-y;
     }
 
     .column-divider:hover,