Interactive column sizing

change/@ni-nimble-components-752d1b02-6122-4d2f-b737-809aff6729d2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Adding interactive column sizing",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/base/tests/table-column.stories.ts

@@ -713,10 +713,11 @@ const fractionalWidthOptions = {
 } as const;
 
 const fractionalWidthDescription = `Configure each column's width relative to the other columns with the \`fractional-width\` property. For example, a column with a \`fractional-width\` set to 2 will be twice as wide as a column with a \`fractional-width\` set to 1. 
-The default value for \`fractional-width\` is 1, and columns that don't support \`fractional-width\` explicitly, or another API responsible for managing the width of the column, will also behave as if they have a \`fractional-width\` of 1.`;
+The default value for \`fractional-width\` is 1, and columns that don't support \`fractional-width\` explicitly, or another API responsible for managing the width of the column, will also behave as if they have a \`fractional-width\` of 1. This value only serves
+as an initial state for a column. Once a column has been manually resized the column will use a fractional width calculated by the table from the resize.`;
 
 const minPixelWidthDescription = `Table columns that support having a \`fractional-width\` can also be configured to have a minimum width such that its width
-will never shrink below the specified pixel width.`;
+will never shrink below the specified pixel width. This applies to both when a table is resized as well as when a column is interactively resized.`;
 
 export const fractionalWidthColumn: StoryObj<ColumnWidthTableArgs> = {
     parameters: {

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

@@ -48,8 +48,8 @@ import {
 } from './types';
 import { Virtualizer } from './models/virtualizer';
 import { getTanStackSortingFunction } from './models/sort-operations';
+import { TableLayoutManager } from './models/table-layout-manager';
 import { TableUpdateTracker } from './models/table-update-tracker';
-import { TableLayoutHelper } from './models/table-layout-helper';
 import type { TableRow } from './components/row';
 import { ColumnInternals } from '../table-column/base/models/column-internals';
 import { InteractiveSelectionManager } from './models/interactive-selection-manager';
@@ -153,16 +153,31 @@ export class Table<
     @observable
     public showCollapseAll = false;
 
+    /**
+     * @internal
+     */
+    public readonly headerRowActionContainer!: HTMLElement;
+
     /**
      * @internal
      */
     public readonly rowContainer!: HTMLElement;
 
+    /**
+     * @internal
+     */
+    public readonly columnHeadersContainer!: Element;
+
     /**
      * @internal
      */
     public readonly virtualizer: Virtualizer<TData>;
 
+    /**
+     * @internal
+     */
+    public readonly layoutManager: TableLayoutManager<TData>;
+
     /**
      * @internal
      */
@@ -173,6 +188,16 @@ export class Table<
      * @internal
      */
     @observable
+    public visibleColumns: TableColumn[] = [];
+
+    /**
+     * @internal
+     * This value determines the size of the viewport area when a user has created horizontal scrollable
+     * space through a column resize operation.
+     */
+    @observable
+    public tableScrollableMinWidth = 0;
+
     public documentShiftKeyDown = false;
 
     private readonly table: TanStackTable<TData>;
@@ -217,6 +242,7 @@ export class Table<
         };
         this.table = tanStackCreateTable(this.options);
         this.virtualizer = new Virtualizer(this, this.table);
+        this.layoutManager = new TableLayoutManager(this);
         this.selectionManager = new InteractiveSelectionManager(
             this.table,
             this.selectionMode
@@ -394,6 +420,32 @@ export class Table<
         this.table.toggleAllRowsExpanded(false);
     }
 
+    /** @internal */
+    public onRightDividerMouseDown(
+        event: MouseEvent,
+        columnIndex: number
+    ): void {
+        if (event.button === 0) {
+            this.layoutManager.beginColumnInteractiveSize(
+                event.clientX,
+                columnIndex * 2
+            );
+        }
+    }
+
+    /** @internal */
+    public onLeftDividerMouseDown(
+        event: MouseEvent,
+        columnIndex: number
+    ): void {
+        if (event.button === 0) {
+            this.layoutManager.beginColumnInteractiveSize(
+                event.clientX,
+                columnIndex * 2 - 1
+            );
+        }
+    }
+
     /** @internal */
     public handleGroupRowExpanded(rowIndex: number, event: Event): void {
         this.toggleGroupExpanded(rowIndex);
@@ -464,7 +516,10 @@ export class Table<
         }
 
         if (this.tableUpdateTracker.updateColumnWidths) {
-            this.updateRowGridColumns();
+            this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
+            this.visibleColumns = this.columns.filter(
+                column => !column.columnHidden
+            );
         }
 
         if (this.tableUpdateTracker.updateGroupRows) {
@@ -483,6 +538,15 @@ export class Table<
         }
     }
 
+    /**
+     * @internal
+     */
+    public getHeaderContainerElements(): NodeListOf<Element> {
+        return this.columnHeadersContainer.querySelectorAll(
+            '.header-container'
+        );
+    }
+
     protected selectionModeChanged(
         _prev: string | undefined,
         _next: string | undefined
@@ -691,12 +755,6 @@ export class Table<
         this.actionMenuSlots = Array.from(slots);
     }
 
-    private updateRowGridColumns(): void {
-        this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(
-            this.columns
-        );
-    }
-
     private validate(): void {
         this.tableValidator.validateSelectionMode(
             this.selectionMode,