@ni/nimble-components 19.8.0 → 19.8.2

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Tue, 18 Jul 2023 17:33:26 GMT
+     * Generated on Wed, 19 Jul 2023 17:17:21 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -17548,7 +17548,7 @@
     }
 
     slot[name='start']::slotted(*) {
-        fill: currentcolor;
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }
@@ -23938,7 +23938,7 @@
         display: contents;
     }
     slot[name='start']::slotted(*) {
-        fill: currentcolor;
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }
@@ -28779,6 +28779,8 @@
 
     :host {
         height: 480px;
+        --ni-private-column-divider-width: 2px;
+        --ni-private-column-divider-padding: 3px;
     }
 
     .disable-select {
@@ -28792,32 +28794,17 @@
         width: 100%;
         font: ${bodyFont};
         color: ${bodyFontColor};
+        cursor: var(--ni-private-table-cursor-override);
     }
 
-    .table-viewport {
-        overflow: auto;
-        display: block;
-        height: 100%;
-        position: relative;
-    }
-
-    .table-scroll {
-        pointer-events: none;
-        position: absolute;
-        top: 0px;
+    .glass-overlay {
         width: 100%;
-        height: var(--ni-private-table-scroll-height);
-    }
-
-    .table-row-container {
-        width: fit-content;
-        min-width: 100%;
-        position: relative;
-        top: var(--ni-private-table-row-container-top);
-        background-color: ${tableRowBorderColor};
+        height: 100%;
+        display: contents;
+        pointer-events: var(--ni-private-glass-overlay-pointer-events);
     }
 
-    .header-container {
+    .header-row-container {
         position: sticky;
         top: 0;
     }
@@ -28827,12 +28814,26 @@
         background: ${applicationBackgroundColor};
         position: relative;
         width: fit-content;
-        min-width: 100%;
+        min-width: max(
+            100%,
+            calc(
+                var(--ni-private-table-scrollable-min-width) +
+                    var(--ni-private-table-header-container-margin-right)
+            )
+        );
         left: var(--ni-private-table-scroll-x);
         align-items: center;
     }
 
-    .column-header-container {
+    .header-row-action-container {
+        display: flex;
+    }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    .column-headers-container {
         display: grid;
         width: 100%;
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
@@ -28848,16 +28849,84 @@
         visibility: visible;
     }
 
+    .header-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+    }
+
     .header-scrollbar-spacer {
-        width: var(--ni-private-table-header-scrollbar-spacer-width);
+        width: var(--ni-private-table-header-container-margin-right);
     }
 
     .header {
         flex: 1;
+        overflow: hidden;
     }
 
-    .checkbox-container {
-        display: flex;
+    .column-divider {
+        border-left: var(--ni-private-column-divider-width) solid
+            ${popupBorderColor};
+        display: none;
+        height: ${controlSlimHeight};
+        cursor: col-resize;
+        position: absolute;
+    }
+
+    .column-divider::before {
+        content: '';
+        position: absolute;
+        width: calc(
+            var(--ni-private-column-divider-width) +
+                (2 * var(--ni-private-column-divider-padding))
+        );
+        height: 100%;
+        left: calc(
+            -1 * (var(--ni-private-column-divider-width) +
+                        var(--ni-private-column-divider-padding))
+        );
+    }
+
+    .column-divider.active {
+        display: block;
+        z-index: 1;
+    }
+
+    .header-container:hover .column-divider.left,
+    .header-container:hover .column-divider.right {
+        display: block;
+        z-index: 1;
+    }
+
+    .column-divider.left {
+        left: -1px;
+    }
+
+    .column-divider.right {
+        left: calc(100% - 1px);
+    }
+
+    .table-viewport {
+        overflow: auto;
+        display: block;
+        height: 100%;
+        position: relative;
+    }
+
+    .table-scroll {
+        pointer-events: none;
+        position: absolute;
+        top: 0px;
+        width: 100%;
+        height: var(--ni-private-table-scroll-height);
+    }
+
+    .table-row-container {
+        width: fit-content;
+        min-width: max(100%, var(--ni-private-table-scrollable-min-width));
+        position: relative;
+        top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .selection-checkbox {
@@ -29623,101 +29692,118 @@
         <div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
             style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
-            --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
-            --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
+            --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
+            --ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
             --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
+            --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
+            --ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
+            --ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
             ">
-            <div role="rowgroup" class="header-container">
-                <div class="header-row" role="row">
-                    ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
-                        <span role="columnheader" class="checkbox-container">
-                            <${checkboxTag}
-                                ${ref('selectionCheckbox')}
-                                class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
-                                @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
-                            >
-                            </${checkboxTag}>
-                        </span>
-                    `)}
-                    <span role="gridcell">
-                        <${buttonTag}
-                            class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
-                            content-hidden
-                            appearance="${ButtonAppearance.ghost}"
-                            title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
-                            @click="${x => x.handleCollapseAllGroupRows()}"
-                        >
-                            <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                            ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
-                        </${buttonTag}>
-                    </span>
-                    <span class="column-header-container">
-                        ${repeat(x => x.columns, html `
-                            ${when(x => !x.columnHidden, html `
-                                <${tableHeaderTag}
-                                    class="header"
-                                    sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
-                                    ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
-                                    @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
-                                    :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
-                                >
-                                    <slot name="${x => x.slot}"></slot>
-                                </${tableHeaderTag}>
-                            `)}
-                        `)}
-                        <div class="header-scrollbar-spacer"></div>
-                    </span>
-                </div>
-            </div>
-            <div class="table-viewport" ${ref('viewport')}>
-                <div class="table-scroll"></div>
-                <div class="table-row-container" ${children$1({ property: 'rowElements', filter: elements(tableRowTag) })}
-                     role="rowgroup">
-                    ${when(x => x.columns.length > 0 && x.canRenderRows, html `
-                        ${repeat(x => x.virtualizer.visibleItems, html `
-                            ${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
-                                <${tableGroupRowTag}
-                                    class="group-row"
-                                    :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
-                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
-                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
-                                    :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
-                                    :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
-                                    ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
-                                    selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
-                                    @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
-                                    @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
-                                >
-                                </${tableGroupRowTag}>
+            <div class="glass-overlay">
+                <div role="rowgroup" class="header-row-container">
+                    <div class="header-row" role="row">
+                        <span class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                            ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
+                                <span role="columnheader" class="checkbox-container">
+                                    <${checkboxTag}
+                                        ${ref('selectionCheckbox')}
+                                        class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
+                                        @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
+                                    >
+                                    </${checkboxTag}>
+                                </span>
                             `)}
-                            ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
-                                <${tableRowTag}
-                                    class="row"
-                                    record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
-                                    ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
-                                    ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
-                                    ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
-                                    :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
-                                    :columns="${(_, c) => c.parent.columns}"
-                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
-                                    @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
-                                    @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
-                                    @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
-                                    @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                            <span role="gridcell">
+                                <${buttonTag}
+                                    class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
+                                    content-hidden
+                                    appearance="${ButtonAppearance.ghost}"
+                                    title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
+                                    @click="${x => x.handleCollapseAllGroupRows()}"
                                 >
-                                ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
-                                    ${repeat((_, c) => c.parent.actionMenuSlots, html `
-                                        <slot
-                                            name="${x => x}"
-                                            slot="${x => `row-action-menu-${x}`}">
-                                        </slot>
+                                    <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                                    ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
+                                </${buttonTag}>
+                            </span>
+                        </span>
+                        <span class="column-headers-container" ${ref('columnHeadersContainer')}>
+                            ${repeat(x => x.visibleColumns, html `
+                                <div class="header-container">
+                                    ${when((_, c) => c.index > 0, html `
+                                        <div class="column-divider left ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}" 
+                                             @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
+                                        </div>
                                     `)}
+                                        <${tableHeaderTag}
+                                            class="header"
+                                            sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
+                                            ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                            @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
+                                            :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
+                                        >
+                                            <slot name="${x => x.slot}"></slot>
+                                        </${tableHeaderTag}>
+                                    ${when((_, c) => c.index < c.length - 1, html `
+                                        <div class="column-divider right ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}"
+                                             @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
+                                        </div>
+                                    `)}                        
+                                </div>
+                            `, { positioning: true })}
+                            <div class="header-scrollbar-spacer"></div>
+                        </span>
+                    </div>
+                </div>
+                <div class="table-viewport" ${ref('viewport')}>
+                    <div class="table-scroll"></div>
+                    <div class="table-row-container" ${children$1({ property: 'rowElements', filter: elements(tableRowTag) })}
+                        role="rowgroup">
+                        ${when(x => x.columns.length > 0 && x.canRenderRows, html `
+                            ${repeat(x => x.virtualizer.visibleItems, html `
+                                ${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
+                                    <${tableGroupRowTag}
+                                        class="group-row"
+                                        :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
+                                        ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
+                                        :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                        :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
+                                        :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
+                                        ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
+                                        selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
+                                        @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
+                                        @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
+                                    >
+                                    </${tableGroupRowTag}>
+                                `)}
+                                ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
+                                    <${tableRowTag}
+                                        class="row"
+                                        record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
+                                        ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
+                                        ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
+                                        ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
+                                        :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
+                                        :columns="${(_, c) => c.parent.columns}"
+                                        :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                        @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
+                                        @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
+                                        @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
+                                        @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                    >
+                                    ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
+                                        ${repeat((_, c) => c.parent.actionMenuSlots, html `
+                                            <slot
+                                                name="${x => x}"
+                                                slot="${x => `row-action-menu-${x}`}">
+                                            </slot>
+                                        `)}
+                                    `)}
+                                    </${tableRowTag}>
                                 `)}
-                                </${tableRowTag}>
                             `)}
                         `)}
-                    `)}
+                    </div>
                 </div>
             </div>
         </div>
@@ -30357,7 +30443,7 @@
     class Virtualizer {
         constructor(table, tanStackTable) {
             this.visibleItems = [];
-            this.allRowsHeight = 0;
+            this.scrollHeight = 0;
             this.headerContainerMarginRight = 0;
             this.rowContainerYOffset = 0;
             this.table = table;
@@ -30417,7 +30503,7 @@
             this.notifyFocusedCellRecycling();
             const virtualizer = this.virtualizer;
             this.visibleItems = virtualizer.getVirtualItems();
-            this.allRowsHeight = virtualizer.getTotalSize();
+            this.scrollHeight = virtualizer.getTotalSize();
             // We're using a separate div ('table-scroll') to represent the full height of all rows, and
             // the row container's height is only big enough to hold the virtualized rows. So we don't
             // use the TanStackVirtual-provided 'start' offset (which is in terms of the full height)
@@ -30454,7 +30540,7 @@
     ], Virtualizer.prototype, "visibleItems", void 0);
     __decorate$1([
         observable
-    ], Virtualizer.prototype, "allRowsHeight", void 0);
+    ], Virtualizer.prototype, "scrollHeight", void 0);
     __decorate$1([
         observable
     ], Virtualizer.prototype, "headerContainerMarginRight", void 0);
@@ -30496,6 +30582,190 @@
         return 1;
     }
 
+    /**
+     * This class manages the layout of columns within a Table.
+     * @interal
+     */
+    class TableLayoutManager {
+        constructor(table) {
+            this.table = table;
+            this.isColumnBeingSized = false;
+            this.visibleColumns = [];
+            this.currentTotalDelta = 0;
+            this.dragStart = 0;
+            this.initialColumnPixelWidths = [];
+            this.onDividerMouseMove = (event) => {
+                const mouseEvent = event;
+                for (let i = 0; i < this.visibleColumns.length; i++) {
+                    this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnPixelWidths[i]?.initialPixelWidth;
+                }
+                this.currentTotalDelta = this.getAllowedSizeDelta(mouseEvent.clientX - this.dragStart);
+                this.performCascadeSizeLeft(this.leftColumnIndex, this.currentTotalDelta);
+                this.performCascadeSizeRight(this.rightColumnIndex, this.currentTotalDelta);
+                const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth;
+                if (totalColumnWidthDelta > 0) {
+                    this.table.tableScrollableMinWidth = this.initialTableScrollableWidth + totalColumnWidthDelta;
+                }
+                else {
+                    this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth;
+                }
+            };
+            this.onDividerMouseUp = () => {
+                document.removeEventListener('mousemove', this.onDividerMouseMove);
+                document.removeEventListener('mouseup', this.onDividerMouseUp);
+                this.resetGridSizedColumns();
+                this.isColumnBeingSized = false;
+                this.activeColumnIndex = undefined;
+            };
+        }
+        getGridTemplateColumns() {
+            return this.getVisibleColumns()
+                .map(column => {
+                const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
+                if (currentPixelWidth) {
+                    const coercedPixelWidth = Math.max(minPixelWidth, currentPixelWidth);
+                    return `${coercedPixelWidth}px`;
+                }
+                return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;
+            })
+                .join(' ');
+        }
+        /**
+         * Sets up state related to interactively sizing a column.
+         * @param dragStart The x-position from which a column size was started
+         * @param activeColumnDivider The divider that was clicked on
+         */
+        beginColumnInteractiveSize(dragStart, activeColumnDivider) {
+            this.activeColumnDivider = activeColumnDivider;
+            this.leftColumnIndex = this.getLeftColumnIndexFromDivider(this.activeColumnDivider);
+            this.rightColumnIndex = this.leftColumnIndex + 1;
+            this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);
+            this.dragStart = dragStart;
+            this.currentTotalDelta = 0;
+            this.visibleColumns = this.getVisibleColumns();
+            this.setColumnsToFixedSize();
+            this.initialTableScrollableWidth = this.table.viewport.scrollWidth;
+            this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
+            this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
+            this.isColumnBeingSized = true;
+            document.addEventListener('mousemove', this.onDividerMouseMove);
+            document.addEventListener('mouseup', this.onDividerMouseUp);
+        }
+        getTotalColumnFixedWidth() {
+            let totalColumnFixedWidth = 0;
+            for (const column of this.visibleColumns) {
+                totalColumnFixedWidth
+                    += column.columnInternals.currentPixelWidth ?? 0;
+            }
+            return totalColumnFixedWidth;
+        }
+        setColumnsToFixedSize() {
+            this.cacheGridSizedColumns();
+            const headers = this.table.getHeaderContainerElements();
+            for (let i = 0; i < headers.length; i++) {
+                this.visibleColumns[i].columnInternals.currentPixelWidth = headers[i].getBoundingClientRect().width;
+            }
+            this.cacheColumnInitialPixelWidths();
+        }
+        getAllowedSizeDelta(requestedResizeAmount) {
+            let availableSpace = 0;
+            if (requestedResizeAmount > 0) {
+                // size right
+                return requestedResizeAmount;
+            }
+            // size left
+            let currentIndex = this.leftColumnIndex;
+            while (currentIndex >= 0) {
+                const columnInitialWidths = this.initialColumnPixelWidths[currentIndex];
+                availableSpace
+                    += columnInitialWidths.initialPixelWidth
+                        - columnInitialWidths.minPixelWidth;
+                currentIndex -= 1;
+            }
+            return Math.max(requestedResizeAmount, -availableSpace);
+        }
+        performCascadeSizeLeft(leftColumnIndex, delta) {
+            let currentDelta = delta;
+            const leftColumnInitialWidths = this.initialColumnPixelWidths[leftColumnIndex];
+            const allowedDelta = delta < 0
+                ? Math.max(leftColumnInitialWidths.minPixelWidth
+                    - leftColumnInitialWidths.initialPixelWidth, currentDelta)
+                : delta;
+            const actualDelta = Math.round(allowedDelta);
+            const leftColumn = this.visibleColumns[leftColumnIndex];
+            leftColumn.columnInternals.currentPixelWidth += actualDelta;
+            if (actualDelta > currentDelta && leftColumnIndex > 0 && delta < 0) {
+                currentDelta -= allowedDelta;
+                this.performCascadeSizeLeft(leftColumnIndex - 1, currentDelta);
+            }
+        }
+        performCascadeSizeRight(rightColumnIndex, delta) {
+            let currentDelta = delta;
+            const rightColumnInitialWidths = this.initialColumnPixelWidths[rightColumnIndex];
+            const allowedDelta = delta > 0
+                ? Math.min(rightColumnInitialWidths.initialPixelWidth
+                    - rightColumnInitialWidths.minPixelWidth, currentDelta)
+                : delta;
+            const actualDelta = Math.round(allowedDelta);
+            const rightColumn = this.visibleColumns[rightColumnIndex];
+            rightColumn.columnInternals.currentPixelWidth -= actualDelta;
+            if (actualDelta < currentDelta
+                && rightColumnIndex < this.visibleColumns.length - 1
+                && delta > 0) {
+                currentDelta -= allowedDelta;
+                this.performCascadeSizeRight(rightColumnIndex + 1, currentDelta);
+            }
+        }
+        cacheGridSizedColumns() {
+            this.gridSizedColumns = [];
+            for (const column of this.visibleColumns) {
+                if (column.columnInternals.currentPixelWidth === undefined) {
+                    this.gridSizedColumns.push(column);
+                }
+            }
+        }
+        cacheColumnInitialPixelWidths() {
+            this.initialColumnPixelWidths = [];
+            for (const column of this.visibleColumns) {
+                this.initialColumnPixelWidths.push({
+                    initalColumnFractionalWidth: column.columnInternals.currentFractionalWidth,
+                    initialPixelWidth: column.columnInternals.currentPixelWidth,
+                    minPixelWidth: column.columnInternals.minPixelWidth
+                });
+            }
+        }
+        resetGridSizedColumns() {
+            if (!this.gridSizedColumns) {
+                return;
+            }
+            let gridColumnIndex = 0;
+            for (let i = 0; i < this.visibleColumns.length
+                && gridColumnIndex < this.gridSizedColumns.length; i++) {
+                const column = this.visibleColumns[i];
+                if (column === this.gridSizedColumns[gridColumnIndex]) {
+                    gridColumnIndex += 1;
+                    column.columnInternals.currentFractionalWidth = (column.columnInternals.currentPixelWidth
+                        / this.initialColumnPixelWidths[i].initialPixelWidth)
+                        * this.initialColumnPixelWidths[i]
+                            .initalColumnFractionalWidth;
+                    column.columnInternals.currentPixelWidth = undefined;
+                }
+            }
+        }
+        getVisibleColumns() {
+            return this.table.columns.filter(column => !column.columnHidden);
+        }
+        getLeftColumnIndexFromDivider(dividerIndex) {
+            return Math.floor(dividerIndex / 2);
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableLayoutManager.prototype, "isColumnBeingSized", void 0);
+    __decorate$1([
+        observable
+    ], TableLayoutManager.prototype, "activeColumnIndex", void 0);
+
     /**
      * Generic Tracker which sets or resets provided flags
      */
@@ -30684,26 +30954,6 @@
         }
     }
 
-    /**
-     * This class provides helper methods for managing the layout of cells within
-     * a Table.
-     */
-    class TableLayoutHelper {
-        static getGridTemplateColumns(columns) {
-            return columns
-                ?.filter(column => !column.columnHidden)
-                .map(column => {
-                const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
-                if (currentPixelWidth) {
-                    const coercedPixelWidth = Math.max(minPixelWidth, currentPixelWidth);
-                    return `${coercedPixelWidth}px`;
-                }
-                return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;
-            })
-                .join(' ');
-        }
-    }
-
     /**
      * Abstract base class for handling behavior associated with interactive row selection of the table.
      */
@@ -31009,6 +31259,13 @@
             /**
              * @internal
              */
+            this.visibleColumns = [];
+            /**
+             * @internal
+             * This value determines the size of the viewport area when a user has created horizontal scrollable
+             * space through a column resize operation.
+             */
+            this.tableScrollableMinWidth = 0;
             this.documentShiftKeyDown = false;
             this.tableValidator = new TableValidator();
             this.tableUpdateTracker = new TableUpdateTracker(this);
@@ -31092,6 +31349,7 @@
             };
             this.table = createTable(this.options);
             this.virtualizer = new Virtualizer(this, this.table);
+            this.layoutManager = new TableLayoutManager(this);
             this.selectionManager = new InteractiveSelectionManager(this.table, this.selectionMode);
         }
         get validity() {
@@ -31225,6 +31483,18 @@
             this.table.toggleAllRowsExpanded(false);
         }
         /** @internal */
+        onRightDividerMouseDown(event, columnIndex) {
+            if (event.button === 0) {
+                this.layoutManager.beginColumnInteractiveSize(event.clientX, columnIndex * 2);
+            }
+        }
+        /** @internal */
+        onLeftDividerMouseDown(event, columnIndex) {
+            if (event.button === 0) {
+                this.layoutManager.beginColumnInteractiveSize(event.clientX, columnIndex * 2 - 1);
+            }
+        }
+        /** @internal */
         handleGroupRowExpanded(rowIndex, event) {
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
@@ -31283,7 +31553,8 @@
                 this.updateActionMenuSlots();
             }
             if (this.tableUpdateTracker.updateColumnWidths) {
-                this.updateRowGridColumns();
+                this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
+                this.visibleColumns = this.columns.filter(column => !column.columnHidden);
             }
             if (this.tableUpdateTracker.updateGroupRows) {
                 this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
@@ -31299,6 +31570,12 @@
                     return null;
             }
         }
+        /**
+         * @internal
+         */
+        getHeaderContainerElements() {
+            return this.columnHeadersContainer.querySelectorAll('.header-container');
+        }
         selectionModeChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
@@ -31438,9 +31715,6 @@
             }
             this.actionMenuSlots = Array.from(slots);
         }
-        updateRowGridColumns() {
-            this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
-        }
         validate() {
             this.tableValidator.validateSelectionMode(this.selectionMode, this.idFieldName);
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
@@ -31690,7 +31964,10 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     __decorate$1([
         observable
-    ], Table.prototype, "documentShiftKeyDown", void 0);
+    ], Table.prototype, "visibleColumns", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "tableScrollableMinWidth", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$9,
@@ -32833,6 +33110,7 @@
 
     slot[name='start']::slotted(*) {
         flex: none;
+        ${iconColor.cssCustomProperty}: currentcolor;
     }
 
     .control {