@globalpayments/vega 2.92.0 → 2.94.0

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-cell-renderer.js

@@ -20,10 +20,11 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaTableEditableFieldTypes, } from '../../interface';
 import { getValueByPath } from '../../../../utils/object';
 import { LogUtility } from '../../../../utils/log';
+import { ColumnRenderInputModel } from '../controllers/dto/column-render-input-model';
 export class VegaTableCellRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderTableCellContent = (column, record, index) => {
+    this.renderTableCellContent = (column, record, index, isSpanning) => {
       var _a, _b;
       const value = getValueByPath(record, column.prop);
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
@@ -32,13 +33,14 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         .find((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
       const editing = this.vegaTableEditableController.isEditing(rowKey);
       const rowForm = this.vegaTableEditableController.getRowFormRefMap().get(rowKey);
-      if (editing && rowForm && column.renderFormItem) {
+      // REQ-007: spanning cells are forced read-only — never render editable form items.
+      if (!isSpanning && editing && rowForm && column.renderFormItem) {
         return column.renderFormItem(h, column.prop ? value : rowKey, record, index, {
           rowForm,
           isNewRow,
         });
       }
-      if (editing && rowForm && column.editable) {
+      if (!isSpanning && editing && rowForm && column.editable) {
         const formItemProps = (_a = column.formItemProps) === null || _a === void 0 ? void 0 : _a.call(column, rowForm, {
           record,
           index,
@@ -86,30 +88,52 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
     };
   }
-  render(renderInput, record, index) {
-    const column = this.columns.find((column) => column.key === renderInput.key ||
-      column.prop === renderInput.key ||
-      column.label === renderInput.key);
+  render(renderInput, record, index, colSpanResult) {
+    var _a;
+    const column = this.vegaTableBodyColSpanController.findColumn(renderInput);
+    /* istanbul ignore next -- defensive: colSpanResult is always provided by the caller */
+    const htmlColspan = (_a = colSpanResult === null || colSpanResult === void 0 ? void 0 : colSpanResult.htmlColspan) !== null && _a !== void 0 ? _a : 1;
+    const isSpanning = htmlColspan > 1;
+    // When a cell spans, merge pinned-boundary flags from all consumed leaves so the spanning
+    // cell inherits boundary indicators (e.g. right-divider for pinned-end).
+    const effectiveRenderInput = isSpanning && colSpanResult
+      ? this.getMergedRenderInputForSpan(renderInput, colSpanResult)
+      : renderInput;
     if (column) {
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
       const columnKey = `${rowKey}_${column.key || column.prop}`;
-      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
-        } }, this.renderTableCellContent(column, record, index)));
+      const ellipsisOptions = column.ellipsisOptions;
+      const ellipsisShowTooltip = !!(ellipsisOptions === null || ellipsisOptions === void 0 ? void 0 : ellipsisOptions.showTooltip);
+      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ellipsisShowTooltip: ellipsisShowTooltip, colSpan: isSpanning ? htmlColspan : undefined, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
+        } }, this.renderTableCellContent(column, record, index, isSpanning)));
     }
     else {
       return (h("vega-table-cell", { key: renderInput.key, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
         } }));
     }
   }
+  /**
+   * Build a render input with merged boundary flags from all leaves consumed by a body colSpan.
+   *
+   * @param {ColumnRenderInputModel} baseInput - The starting leaf's render input.
+   * @param {BodyColSpanResult} colSpanResult - The resolved span result (provides skipCount).
+   * @returns {ColumnRenderInputModel} A render input with OR-merged boundary flags.
+   */
+  getMergedRenderInputForSpan(baseInput, colSpanResult) {
+    const allLeaves = this.vegaTableRenderInputController.getLeafRenderInputs();
+    const startIndex = allLeaves.indexOf(baseInput);
+    /* istanbul ignore next -- defensive: baseInput should always be in the leaves array */
+    if (startIndex < 0)
+      return baseInput;
+    const spannedLeaves = allLeaves.slice(startIndex + 1, startIndex + 1 + colSpanResult.skipCount);
+    return ColumnRenderInputModel.withMergedBoundaries(baseInput, spannedLeaves);
+  }
 }
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableCellRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
@@ -119,3 +143,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableBodyColSpanController", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-pinned-renderer.js

@@ -28,6 +28,12 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
       },
     });
     this.previouslyStyledCells = new Set();
+    // Each set tracks cells where exactly one dynamic class was added — cleared per class so
+    // that static classes from render() on the same cell are never inadvertently stripped
+    // (e.g. a cell that is both isRightStartPinned and the last-visible body cell).
+    this.dynamicRightDividerCells = new Set();
+    this.dynamicLeftDividerCells = new Set();
+    this.dynamicHideRightBorderCells = new Set();
     this.clearPinnedPositionsTaskQueue = new SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
@@ -36,7 +42,17 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
   async componentDidRender() {
     await this.clearPinnedPositionsTaskQueue.runTask();
     this.updateTableRowPinnedPosition();
-    this.updateTableCellPinnedPosition();
+    const unreadyCells = this.updateTableCellPinnedPosition();
+    if (unreadyCells.length > 0) {
+      // In dev builds, Stencil's HMR flag forces loadModule() to always use a
+      // dynamic import(), so a brand-new cell's first render is deferred. We wait
+      // for each unready cell via componentOnReady() — which resolves exactly when
+      // the cell's shadow <td> is first rendered — then apply sticky positioning.
+      // In production (hotModuleReplacement=false) loadModule() is synchronous, so
+      // cells are always ready by componentDidRender and this branch is never reached.
+      await Promise.all(unreadyCells.map((cell) => cell.componentOnReady()));
+      this.updateTableCellPinnedPosition();
+    }
   }
   watchColumnStructureModel() {
     void this.clearPinnedPositionsTaskQueue.enqueue({
@@ -48,24 +64,165 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
   updateTableCellPinnedPosition() {
     if (!this.columnStructureModel.hasLeftPinnedColumn() &&
       !this.columnStructureModel.hasRightPinnedColumn())
-      return;
+      return [];
+    // Clear stale dynamic boundary classes before re-evaluating breakpoint visibility.
+    // This ensures the classes are removed when the viewport grows back (e.g. column B
+    // becomes visible again) and not only when the column structure changes.
+    // Each set only removes the single class it tracks, preserving any other static
+    // border classes that render() placed on the same cell (VD-9565).
+    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
+    this.dynamicRightDividerCells.clear();
+    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
+    this.dynamicLeftDividerCells.clear();
+    this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
+    this.dynamicHideRightBorderCells.clear();
     // if not have head row, it means no pinned, so no need to update
     const row = this.host.shadowRoot.querySelector('vega-table-head-row');
     // to avoid window resize before table rendered.
     // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
     if (!row)
-      return;
+      return [];
     const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
     const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
     const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
     const leafWidths = this.getLeafWidths();
+    // Track the last visible left-pinned head cell and first visible right-pinned head cell
+    // to dynamically apply boundary classes when breakpoint-hidden columns shift the boundary.
+    let lastVisibleLeftPinnedHeadCell = null;
+    let firstVisibleRightPinnedHeadCell = null;
+    let lastVisibleRightPinnedHeadCell = null;
     headCellRenderInputMap.forEach((renderInput, headCell) => {
+      var _a;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowCell = (_a = headCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
       this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+      if (isVisible && renderInput.pinned === 'left') {
+        lastVisibleLeftPinnedHeadCell = shadowCell;
+      }
+      if (isVisible && renderInput.pinned === 'right' && !firstVisibleRightPinnedHeadCell) {
+        firstVisibleRightPinnedHeadCell = shadowCell;
+      }
+      if (isVisible && renderInput.pinned === 'right') {
+        lastVisibleRightPinnedHeadCell = shadowCell;
+      }
     });
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, headCell) => {
-      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    // Remove stale entries (disconnected cells) left over from prior renders (e.g. after drag reorder).
+    pinnedColumnBodyCellRenderInputMap.forEach((_, bodyCell) => {
+      /* istanbul ignore next -- defensive cleanup for disconnected cells; jsdom always keeps cells connected */
+      if (!(bodyCell === null || bodyCell === void 0 ? void 0 : bodyCell.isConnected)) {
+        pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
+      }
+    });
+    // Track last visible left-pinned body cells per row for boundary class propagation.
+    const lastVisibleLeftPinnedBodyCells = new Map();
+    const firstVisibleRightPinnedBodyCells = new Map();
+    const lastVisibleRightPinnedBodyCells = new Map();
+    // Collect body cells whose shadow DOM is not yet ready (newly created cells).
+    const unreadyCells = [];
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
+      var _a;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowCell = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
+      // Shadow DOM not ready yet — cell was just created (e.g. colspan collapsed after drag).
+      if (['left', 'right'].includes(renderInput.pinned) && !shadowCell) {
+        unreadyCells.push(bodyCell);
+        return;
+      }
+      this.updateCellPinnedPosition(renderInput, bodyCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+      if (isVisible && renderInput.pinned === 'left') {
+        // Use the parent row as the grouping key for per-row tracking
+        const parentRow = bodyCell.closest('vega-table-row');
+        if (parentRow) {
+          lastVisibleLeftPinnedBodyCells.set(parentRow, shadowCell);
+        }
+      }
+      if (isVisible && renderInput.pinned === 'right') {
+        const parentRow = bodyCell.closest('vega-table-row');
+        if (parentRow && !firstVisibleRightPinnedBodyCells.has(parentRow)) {
+          firstVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
+        }
+        if (parentRow) {
+          lastVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
+        }
+      }
     });
+    // Apply boundary divider to the last visible left-pinned cell when the static
+    // isLeftEndPinned column is hidden by breakpoint.
+    if (lastVisibleLeftPinnedHeadCell &&
+      !lastVisibleLeftPinnedHeadCell.classList.contains('right-divider')) {
+      // Check if the static boundary column is hidden — if leafWidths shows 0 for the
+      // isLeftEndPinned column, the boundary has shifted.
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isLeftEndPinned);
+      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
+        lastVisibleLeftPinnedHeadCell.classList.add('right-divider');
+        this.dynamicRightDividerCells.add(lastVisibleLeftPinnedHeadCell);
+        lastVisibleLeftPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `right-divider` from their
+          // static render (effectiveRenderInput.isLeftEndPinned). If we add a
+          // statically-classed cell here, the per-class clear on the next resize
+          // would erroneously remove the static class (VD-9540).
+          if (!cell.classList.contains('right-divider')) {
+            cell.classList.add('right-divider');
+            this.dynamicRightDividerCells.add(cell);
+          }
+        });
+      }
+    }
+    if (firstVisibleRightPinnedHeadCell &&
+      !firstVisibleRightPinnedHeadCell.classList.contains('left-divider')) {
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isRightStartPinned);
+      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
+        firstVisibleRightPinnedHeadCell.classList.add('left-divider');
+        this.dynamicLeftDividerCells.add(firstVisibleRightPinnedHeadCell);
+        firstVisibleRightPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `left-divider` from their
+          // static render (effectiveRenderInput.isRightStartPinned). If we add a
+          // statically-classed cell here, the per-class clear on the next resize
+          // would erroneously remove the static class (VD-9540).
+          if (!cell.classList.contains('left-divider')) {
+            cell.classList.add('left-divider');
+            this.dynamicLeftDividerCells.add(cell);
+          }
+        });
+      }
+    }
+    // Apply hide-right-border to the last visible right-pinned cell when the structural
+    // right-most column is hidden by breakpoint. Without this, the new right-most visible
+    // pinned column keeps a right border while the head cell suppresses it (head cells use
+    // isViewEnd), leaving an extra vertical border at the table's right edge (VD-9565).
+    if (lastVisibleRightPinnedHeadCell &&
+      !lastVisibleRightPinnedHeadCell.classList.contains('hide-right-border')) {
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      // The structural right-most column is the last right-pinned leaf. Leaf render
+      // inputs do not carry `isViewEnd` (unlike head render inputs), so identify the
+      // boundary via `pinned` order instead.
+      const rightPinnedLeaves = leafRenderInputs.filter((leaf) => leaf.pinned === 'right');
+      const structuralEndLeaf = rightPinnedLeaves[rightPinnedLeaves.length - 1];
+      if (structuralEndLeaf && leafWidths[structuralEndLeaf.columnIndex] === 0) {
+        lastVisibleRightPinnedHeadCell.classList.add('hide-right-border');
+        this.dynamicHideRightBorderCells.add(lastVisibleRightPinnedHeadCell);
+        lastVisibleRightPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `hide-right-border` from their
+          // static render (isViewEnd/isNoPinnedEnd). Adding a statically-classed cell
+          // here would let the per-class clear erroneously strip the static class on
+          // the next resize (mirrors the VD-9540 divider guard).
+          if (!cell.classList.contains('hide-right-border')) {
+            cell.classList.add('hide-right-border');
+            this.dynamicHideRightBorderCells.add(cell);
+          }
+        });
+      }
+    }
+    // Sync colspan on pinned body cells that span breakpoint-hidden columns.
+    // Chrome does not honour visibility:collapse / display:none on <col> for table layout,
+    // so we directly adjust the shadow <td> colspan attribute to exclude hidden columns (VD-9540).
+    this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
+    return unreadyCells;
   }
   getRowShadowThWidths() {
     const row = this.host.shadowRoot.querySelector('vega-table-head-row');
@@ -102,6 +259,33 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
       }
     });
   }
+  syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap) {
+    // NOTE: renderInput.colSpan is null for flat (non-group) tables — it only holds a value for
+    // group-column subtree spans. We read the original colspan from the component prop (bodyCell.colSpan)
+    // which is always the rendered value, unaffected by our shadow-DOM attribute writes.
+    //
+    // Skip when ALL leaf widths are 0 — that means the table is running in jsdom / an off-screen
+    // context where getBoundingClientRect() always returns 0. Adjusting in that state would
+    // incorrectly reduce every colspan to 1 (no visible columns = Math.max(1,0)=1).
+    if (leafWidths.every((w) => w === 0))
+      return;
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
+      var _a;
+      const originalColspan = bodyCell.colSpan || 1;
+      if (originalColspan <= 1)
+        return;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowTd = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td');
+      /* istanbul ignore next -- shadowTd is always present in jsdom */
+      if (!shadowTd)
+        return;
+      // Count how many columns in the span are visible (width > 0) — hidden breakpoint
+      // columns have leafWidth === 0 because their <th> has display:none.
+      const spanned = leafWidths.slice(renderInput.columnIndex, renderInput.columnIndex + originalColspan);
+      const effectiveColspan = Math.max(1, spanned.filter((w) => w > 0).length);
+      shadowTd.setAttribute('colspan', String(effectiveColspan));
+    });
+  }
   updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
     if (['left', 'right'].includes(renderInput.pinned)) {
       const shadowCell = headCell.shadowRoot.querySelector('th, td');
@@ -113,10 +297,17 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         this.updatePinnedPosition(shadowCell, 'left', position);
       }
       if (renderInput.pinned === 'right') {
-        const colSpan = isNonNullable(renderInput.colSpan) ? renderInput.colSpan : 1;
+        // renderInput.colSpan is null for flat (non-group) tables — it only carries a value
+        // for group-column subtree spans (multi-level headers). For body cells with an HTML
+        // colspan (e.g. colSpan:2 spanning the last two right-pinned columns), we read the
+        // actual span from the host component prop so the right-edge offset is calculated
+        // over the full spanned width rather than just one column (VD-9565).
+        const colSpan = isNonNullable(renderInput.colSpan)
+          ? renderInput.colSpan
+          : headCell.colSpan || 1;
         const position = nextShadowThWidth +
           leafWidths
-            .slice(renderInput.columnIndex + (colSpan - 1) + 1)
+            .slice(renderInput.columnIndex + colSpan)
             .reduce((count, colWidth) => count + colWidth, 0);
         this.updatePinnedPosition(shadowCell, 'right', position);
       }
@@ -171,6 +362,15 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         cell.style.width = '';
       }
     });
+    // Remove boundary classes only from cells where they were dynamically added
+    // (breakpoint-shifted boundaries). Static boundary classes from renderInput are
+    // re-applied by the cell's own render cycle.
+    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
+    this.dynamicRightDividerCells.clear();
+    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
+    this.dynamicLeftDividerCells.clear();
+    this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
+    this.dynamicHideRightBorderCells.clear();
     this.previouslyStyledCells.clear();
   }
   updatePinnedPosition(cell, type, position) {

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-row-renderer.js

@@ -15,6 +15,18 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     this.renderTableRowComponent = (rowProps) => {
       const { rowKey, index, record, isVisibleInCurrentPage } = rowProps;
       const renderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      // Resolve every leaf's colspan in one pass. Entries are index-aligned with renderInputs;
+      // a `null` entry marks a leaf consumed by a preceding spanning cell (skip it).
+      const colSpanResults = this.vegaTableBodyColSpanController.resolveRow(record, index, renderInputs);
+      const cells = [];
+      renderInputs.forEach((renderInput, leafIndex) => {
+        const colSpanResult = colSpanResults[leafIndex];
+        if (!colSpanResult) {
+          // Consumed by a preceding spanning cell — nothing to render for this leaf.
+          return;
+        }
+        cells.push(this.vegaTableCellRenderer.render(renderInput, record, index, colSpanResult));
+      });
       return (h("vega-table-row", { class: {
           'v-hidden': !isVisibleInCurrentPage,
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
@@ -23,9 +35,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
-        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, renderInputs.map((renderInput) => {
-        return this.vegaTableCellRenderer.render(renderInput, record, index);
-      })));
+        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, cells));
     };
   }
   render(rowProps, editable) {
@@ -42,6 +52,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableCellRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableBodyColSpanController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "striped", void 0);

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.js

@@ -30,6 +30,14 @@ export class VegaTableCell {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnBodyCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
+    this.ellipsisTooltipText = '';
+    this.ellipsisTooltipTrigger = 'none';
+    /**
+     * Whether to show a Vega tooltip (instead of the native title attribute) for truncated ellipsis cell content.
+     *
+     * @vegaVersion 2.94.0
+     */
+    this.ellipsisShowTooltip = false;
     this.getCellOverflowClass = () => {
       switch (this.overflow) {
         case 'ellipsis':
@@ -39,8 +47,13 @@ export class VegaTableCell {
       }
     };
   }
+  componentDidLoad() {
+    if (this.overflow === 'ellipsis' && this.ellipsisShowTooltip) {
+      requestAnimationFrame(() => this.updateEllipsisState());
+    }
+  }
   render() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
@@ -54,7 +67,7 @@ export class VegaTableCell {
     if ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isLeftEndPinned) {
       columnClasses.push('right-divider');
     }
-    if ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) {
+    if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd)) {
       columnClasses.push('hide-right-border');
     }
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
@@ -65,22 +78,68 @@ export class VegaTableCell {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]) },
-      h("td", { class: arrayToClassString(columnClasses), part: "cell", 
+      ]), "aria-colspan": ((_e = this.colSpan) !== null && _e !== void 0 ? _e : 0) > 1 ? String(this.colSpan) : null },
+      h("td", { class: arrayToClassString(columnClasses), part: "cell", colSpan: ((_f = this.colSpan) !== null && _f !== void 0 ? _f : 0) > 1 ? this.colSpan : null, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onMouseEnter: this.onMouseEnter.bind(this), 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } },
-        h("div", { class: overflowClass },
-          h("slot", null)))), this.host);
+        onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } }, this.overflow === 'ellipsis' && this.ellipsisShowTooltip ? (h("vega-tooltip", { text: this.ellipsisTooltipText, trigger: this.ellipsisTooltipTrigger, maxWidth: 300, style: { display: 'block', width: '100%', minWidth: '0' } },
+        h("div", { class: overflowClass, ref: (ref) => {
+            this.overflowContentRef = ref;
+          } },
+          h("slot", { ref: (ref) => {
+              this.slotRef = ref;
+            } })))) : (h("div", { class: overflowClass, ref: (ref) => {
+          this.overflowContentRef = ref;
+        } },
+        h("slot", { ref: (ref) => {
+            this.slotRef = ref;
+          } }))))), this.host);
   }
   onMouseEnter() {
-    const row = this.host.parentElement;
-    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.add('hovered'));
+    this.updateEllipsisState();
+    this.getRowCells().forEach((cell) => cell.classList.add('hovered'));
   }
   onMouseLeave() {
+    this.getRowCells().forEach((cell) => cell.classList.remove('hovered'));
+  }
+  getRowCells() {
     const row = this.host.parentElement;
-    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.remove('hovered'));
+    if (!row) {
+      return [];
+    }
+    return Array.from(row.querySelectorAll('vega-table-cell'));
+  }
+  updateEllipsisState() {
+    if (this.overflow !== 'ellipsis' || !this.overflowContentRef) {
+      return;
+    }
+    const isTruncated = this.overflowContentRef.scrollWidth > this.overflowContentRef.clientWidth;
+    const text = this.getCellText();
+    if (this.ellipsisShowTooltip) {
+      this.overflowContentRef.removeAttribute('title');
+      this.ellipsisTooltipText = text;
+      this.ellipsisTooltipTrigger = isTruncated ? 'hover' : 'none';
+    }
+    else {
+      if (isTruncated && text) {
+        this.overflowContentRef.setAttribute('title', text);
+      }
+      else {
+        this.overflowContentRef.removeAttribute('title');
+      }
+    }
+  }
+  getCellText() {
+    var _a, _b, _c;
+    const assignedNodes = this.slotRef && typeof this.slotRef.assignedNodes === 'function'
+      ? this.slotRef.assignedNodes({ flatten: true })
+      : [];
+    const slotText = assignedNodes
+      .map((node) => { var _a; return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''; })
+      .filter((text) => text)
+      .join(' ');
+    return (slotText || ((_b = (_a = this.overflowContentRef) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '');
   }
   static get is() { return "vega-table-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -175,6 +234,47 @@ export class VegaTableCell {
       },
       "attribute": "width",
       "reflect": false
+    },
+    "colSpan": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Number of columns this cell should span horizontally.\nValues of `undefined`, `null`, and `1` are treated as no spanning.\nWhen the effective span is `>= 2`, a `colspan` attribute is set on the inner `<td>`\nand `aria-colspan` is exposed on the host element for assistive technology."
+      },
+      "attribute": "col-span",
+      "reflect": false
+    },
+    "ellipsisShowTooltip": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.94.0"
+          }],
+        "text": "Whether to show a Vega tooltip (instead of the native title attribute) for truncated ellipsis cell content."
+      },
+      "attribute": "ellipsis-show-tooltip",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -186,7 +286,9 @@ export class VegaTableCell {
     "checked": {},
     "striped": {},
     "expanded": {},
-    "renderInput": {}
+    "renderInput": {},
+    "ellipsisTooltipText": {},
+    "ellipsisTooltipTrigger": {}
   }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/vega-table/vega-table-expand-row/slimmers/controllers/vega-table-expand-row-col-span-controller.js

@@ -65,13 +65,22 @@ export class VegaTableExpandRowColSpanController extends VegaSlimmer {
     const cells = isTemplateRenderMode
       ? table.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell')
       : table.shadowRoot.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell');
-    return Array.from(cells).filter((cell) => {
+    return Array.from(cells)
+      .filter((cell) => {
       if (!cell.breakpoint)
         return true;
       if (currentBreakpoint === 'default')
         return false;
       return Breakpoints[currentBreakpoint] >= Breakpoints[cell.breakpoint];
-    }).length;
+    })
+      .reduce((total, cell) => {
+      var _a;
+      // A cell with `colSpan >= 2` is a single element that occupies multiple physical
+      // columns, so add its span rather than 1. This keeps the expand-row colspan aligned
+      // with the full table width when body cells merge columns.
+      const span = (_a = cell.colSpan) !== null && _a !== void 0 ? _a : 1;
+      return total + (span > 1 ? span : 1);
+    }, 0);
   }
 }
 __decorate([

package/dist/collection/components/vega-table/vega-table-foot-cell/slimmers/renderers/vega-table-foot-cell-renderer.js

@@ -11,11 +11,12 @@ import { generateResponsiveClass } from '../../../utils';
 import { arrayToClassString } from '../../../../../utils/ui';
 export class VegaTableFootCellRenderer extends VegaSlimmer {
   render() {
+    var _a;
     return (h("td", { class: {
         'vega-table-cell': true,
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      } },
+      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
@@ -30,3 +31,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "textAlign", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "colSpan", void 0);