@ni/nimble-components 19.8.0 → 19.8.2

package/dist/esm/table/models/table-layout-manager.js

@@ -0,0 +1,186 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+/**
+ * This class manages the layout of columns within a Table.
+ * @interal
+ */
+export 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([
+    observable
+], TableLayoutManager.prototype, "isColumnBeingSized", void 0);
+__decorate([
+    observable
+], TableLayoutManager.prototype, "activeColumnIndex", void 0);
+//# sourceMappingURL=table-layout-manager.js.map

package/dist/esm/table/models/table-layout-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/models/virtualizer.d.ts

@@ -9,7 +9,7 @@ import type { TableRecord } from '../types';
  */
 export declare class Virtualizer<TData extends TableRecord = TableRecord> {
     visibleItems: VirtualItem[];
-    allRowsHeight: number;
+    scrollHeight: number;
     headerContainerMarginRight: number;
     rowContainerYOffset: number;
     private readonly table;

package/dist/esm/table/models/virtualizer.js

@@ -11,7 +11,7 @@ import { TableCellView } from '../../table-column/base/cell-view';
 export class Virtualizer {
     constructor(table, tanStackTable) {
         this.visibleItems = [];
-        this.allRowsHeight = 0;
+        this.scrollHeight = 0;
         this.headerContainerMarginRight = 0;
         this.rowContainerYOffset = 0;
         this.table = table;
@@ -71,7 +71,7 @@ export class Virtualizer {
         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)
@@ -108,7 +108,7 @@ __decorate([
 ], Virtualizer.prototype, "visibleItems", void 0);
 __decorate([
     observable
-], Virtualizer.prototype, "allRowsHeight", void 0);
+], Virtualizer.prototype, "scrollHeight", void 0);
 __decorate([
     observable
 ], Virtualizer.prototype, "headerContainerMarginRight", void 0);

package/dist/esm/table/models/virtualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, controlSlimHeight, smallPadding, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, popupBorderColor, controlSlimHeight, smallPadding, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { themeBehavior } from '../utilities/style/theme';
@@ -11,6 +11,8 @@ export const styles = css `
 
     :host {
         height: 480px;
+        --ni-private-column-divider-width: 2px;
+        --ni-private-column-divider-padding: 3px;
     }
 
     .disable-select {
@@ -24,32 +26,17 @@ export const styles = css `
         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;
     }
@@ -59,12 +46,26 @@ export const styles = css `
         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;
@@ -80,16 +81,84 @@ export const styles = css `
         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 {

package/dist/esm/table/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;UAOX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;4BAuBF,mBAAmB;;;;;;;;;;sBAUzB,0BAA0B;;;;;;;;;;;;;;;kBAe9B,iBAAiB;4BACP,YAAY;;;;;;;;;;;;;;;;;;;;;uBAqBjB,eAAe;;;;;;;;;;;;;;CAcrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;4BACP,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;cAyB1B,gBAAgB;;kBAEZ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA0DP,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;CAcrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC"}

package/dist/esm/table/template.js

@@ -18,101 +18,118 @@ export const template = html `
         <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({ 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({ 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>