@globalpayments/vega 2.56.0 → 2.57.0

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-column-structure-model-controller.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { ColumnStructureModel } from './dto/column-structure-model';
+/**
+ * Controller responsible for building and keeping the ColumnStructureModel in sync
+ * with the component's `columns` and `groupColumns` properties.
+ *
+ * This slimmer maps relevant component fields and lifecycle/watch hooks to
+ * automatically rebuild the column structure when inputs change.
+ */
+export class VegaTableColumnStructureModelController extends VegaSlimmer {
+  /**
+   * Component lifecycle hook mapped to the host's componentWillLoad.
+   * Initializes the ColumnStructureModel prior to initial render.
+   */
+  componentWillLoad() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchColumns.
+   * Rebuilds the ColumnStructureModel when `columns` changes.
+   */
+  watchColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchGroupColumns.
+   * Rebuilds the ColumnStructureModel when `groupColumns` changes.
+   */
+  watchGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
+   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   */
+  setColumnStructureModel() {
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "columns", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchColumns')
+], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
+__decorate([
+  MapToComponentMethod('watchGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-render-input-controller.js

@@ -0,0 +1,171 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnBodyCellRenderInputRIC, VegaInternalColumnHeadCellRenderInputRIC, VegaInternalColumnHeadRowRenderInputRIC, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import { ColumnRenderInputModel } from './dto/column-render-input-model';
+/**
+ * VegaTableRenderInputController
+ *
+ * Central controller that computes and provides render input data for table header rows,
+ * header cells and body cells. Responsibilities:
+ * - Build and cache shared header layout context (depth, width, pinned indices).
+ * - Generate per-head-row and per-body-row render inputs used by head/row renderers.
+ * - Expose render inputs to shadow DOM cells via Remote Invocation Call (RIC) registry.
+ */
+export class VegaTableRenderInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.headRowRenderInputMap = new Map();
+    this.headCellRenderInputMap = new Map();
+    this.pinnedColumnBodyCellRenderInputMap = new Map();
+  }
+  /**
+   * Register remote invocation observers when controller is connected.
+   * Called via component lifecycle mapping.
+   */
+  connectedCallback() {
+    this.registerRenderInputRICObserver();
+  }
+  /**
+   * Unregister remote invocation observers when controller is disconnected.
+   * Called via component lifecycle mapping.
+   */
+  disconnectedCallback() {
+    this.unRegisterRenderInputRICObserver();
+  }
+  /**
+   * Initialize head context before component load.
+   * Called via component lifecycle mapping.
+   */
+  componentWillLoad() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Recompute head context when the column structure model changes.
+   * Called via watch mapping.
+   */
+  watchColumnStructureModel() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Return render input models for table body (flattened leaves).
+   *
+   * @returns {ColumnRenderInputModel[]} Flattened array of leaf render input models.
+   */
+  getLeafRenderInputs() {
+    return this.leavesRenderInputModels;
+  }
+  /**
+   * Return render input models for table head (root-level forest).
+   *
+   * @returns {ColumnRenderInputModel[]} Root-level column render input models.
+   */
+  getHeadRenderInputs() {
+    return this.columnRenderInputModels;
+  }
+  /**
+   * Store head row render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headRow - The head row element.
+   * @param {ColumnRenderInputModel[]} renderInputs - Associated render input models.
+   */
+  addHeadRowRenderInputMap(headRow, renderInputs) {
+    this.headRowRenderInputMap.set(headRow, renderInputs);
+  }
+  /**
+   * Store head cell render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headCell - The head cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addHeadCellRenderInputMap(headCell, renderInput) {
+    this.headCellRenderInputMap.set(headCell, renderInput);
+  }
+  /**
+   * Store body cell render input mapping for pinned cells (used to update sticky positions).
+   *
+   * Only stores cells that require sticky positioning (left/right or no-pinned-end).
+   *
+   * @param {HTMLElement} cell - The body cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addCellRenderInputMap(cell, renderInput) {
+    if ((cell && ['left', 'right'].includes(renderInput.pinned)) || renderInput.isNoPinnedEnd) {
+      this.pinnedColumnBodyCellRenderInputMap.set(cell, renderInput);
+    }
+  }
+  /**
+   * Expose the internal head-cell -> render-input mapping.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableHeadCellElement} HTMLVegaTableHeadCellElement
+   * @returns {Map<HTMLVegaTableHeadCellElement, ColumnRenderInputModel>} Map of head cell elements to render input.
+   */
+  getHeadCellRenderInputMap() {
+    return this.headCellRenderInputMap;
+  }
+  /**
+   * Expose the internal map of pinned body cells to their render inputs.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableCellElement} HTMLVegaTableCellElement
+   * @returns {Map<HTMLVegaTableCellElement, ColumnRenderInputModel>} Map of body cell hosts requiring sticky positioning.
+   */
+  getPinnedColumnBodyCellRenderInputMap() {
+    return this.pinnedColumnBodyCellRenderInputMap;
+  }
+  /**
+   * Register remote invocation callbacks to allow DOM nodes to request render inputs.
+   */
+  registerRenderInputRICObserver() {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC), (headRow) => {
+      return this.headRowRenderInputMap.get(headRow);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC), (headCell) => {
+      return this.headCellRenderInputMap.get(headCell);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC), (cell) => {
+      return this.pinnedColumnBodyCellRenderInputMap.get(cell);
+    });
+  }
+  /**
+   * Unregister remote invocation callbacks previously registered.
+   */
+  unRegisterRenderInputRICObserver() {
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC));
+  }
+  /**
+   * Build the ColumnRenderInputModel forest from the current ColumnStructureModel.
+   */
+  setRenderInputModel() {
+    this.columnRenderInputModels = ColumnRenderInputModel.from(this.columnStructureModel);
+    this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderInputController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderInputController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchColumnStructureModel')
+], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);

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

@@ -34,7 +34,9 @@ export class VegaTableBodyRenderer extends VegaSlimmer {
     return this.tableFormRef;
   }
   render() {
-    const editable = this.columns.some((item) => item.editable);
+    const editable = this.columnStructureModel
+      .generateColumnConfigByLeaves(this.columns)
+      .some((item) => item === null || item === void 0 ? void 0 : item.editable);
     return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
@@ -65,3 +67,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);

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

@@ -86,18 +86,36 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
     };
   }
-  render(column, record, index) {
-    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 }, this.renderTableCellContent(column, record, index)));
+  render(renderInput, record, index) {
+    const column = this.columns.find((column) => column.key === renderInput.key ||
+      column.prop === renderInput.key ||
+      column.label === renderInput.key);
+    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)));
+    }
+    else {
+      return (h("vega-table-cell", { key: renderInput.key, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+        } }));
+    }
   }
 }
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);

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

@@ -20,9 +20,16 @@ export class VegaTableColGroupRenderer extends VegaSlimmer {
     return (h("colgroup", null,
       h("col", { style: { minWidth: this.paddingX[0], width: this.paddingX[0] } }),
       this.vegaTableRowSelectionController.getRowSelectionType() === 'multiple' && (h("col", { style: { minWidth: '40px', width: '40px' } })),
-      this.columns.map((column) => {
-        const responsiveClass = this.getColResponsiveClass(column);
-        return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+      this.columnStructureModel
+        .generateColumnConfigByLeaves(this.columns)
+        .map((column) => {
+        if (column) {
+          const responsiveClass = this.getColResponsiveClass(column);
+          return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+        }
+        else {
+          return h("col", null);
+        }
       }),
       this.rowExpandable && h("col", { style: { minWidth: '40px', width: '40px' } }),
       h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
@@ -31,6 +38,9 @@ export class VegaTableColGroupRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);

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

@@ -11,24 +11,58 @@ import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event
 export class VegaTableHeaderRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderHeaderColumnCells = () => {
-      return this.columns.map((column) => {
+    this.renderHeaderRows = () => {
+      const renderInputs = this.vegaTableRenderInputController.getHeadRenderInputs();
+      const rows = [];
+      let levelRenderInputs = renderInputs;
+      while (levelRenderInputs.length > 0) {
+        rows.push(levelRenderInputs);
+        levelRenderInputs = levelRenderInputs.flatMap((n) => n.children);
+      }
+      return rows.map((cells) => {
         var _a;
+        return (h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll, ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadRowRenderInputMap(ref, cells);
+          } }, cells.map((renderInput) => {
+          if (renderInput.label) {
+            return this.renderGroupCell(renderInput);
+          }
+          else {
+            const column = this.columns.find((column) => column.key === renderInput.key ||
+              column.prop === renderInput.key ||
+              column.label === renderInput.key);
+            return this.renderCell(renderInput, column);
+          }
+        })));
+      });
+    };
+    this.renderGroupCell = (renderInput) => {
+      return (h("vega-table-head-cell", { key: renderInput.key, ref: (ref) => {
+          this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
+        } }, renderInput.label));
+    };
+    this.renderCell = (renderInput, column) => {
+      var _a;
+      if (column) {
         return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), sortConfig: this.sortConfig, breakpoint: column.breakpoint, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
               const sortOrder = input.detail.sortOrder;
               this.vegaTableSortController.handleHeadSortClick(column, sortOrder);
             });
           } }, column.label));
-      });
+      }
+      else {
+        return (h("vega-table-head-cell", { key: renderInput.key, ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
+          } }));
+      }
     };
   }
   render() {
-    var _a;
-    return (this.showHeader && (h("vega-table-head", null,
-      h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll }, this.renderHeaderColumnCells()))));
+    return this.showHeader && h("vega-table-head", null, this.renderHeaderRows());
   }
 }
 __decorate([
@@ -52,3 +86,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);

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

@@ -0,0 +1,175 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
+import { isNonNullable } from '../../../../types/type-guard';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { extractNumberFromString } from '../../../../utils/ui';
+export class VegaTablePinnedRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      // eslint-disable-next-line
+      target: () => this.host.shadowRoot.querySelector('table'),
+      isDeferred: true,
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:resize-pinned-position-by-edit-row}
+       */
+      callback: /* istanbul ignore next */ async () => {
+        await this.host.componentOnReady().then(() => {
+          this.updateTableRowPinnedPosition();
+          this.updateTableCellPinnedPosition();
+        });
+      },
+    });
+  }
+  componentDidLoad() {
+    methodPlaceholder;
+  }
+  componentDidRender() {
+    this.updateTableRowPinnedPosition();
+    this.updateTableCellPinnedPosition();
+  }
+  updateTableCellPinnedPosition() {
+    if (!this.columnStructureModel.hasLeftPinnedColumn() &&
+      !this.columnStructureModel.hasRightPinnedColumn())
+      return;
+    // 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;
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
+    const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
+    const leafWidths = this.getLeafWidths();
+    headCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+  }
+  getRowShadowThWidths() {
+    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const rowShadow = row.shadowRoot;
+    const firstTh = rowShadow.querySelector('th:first-of-type');
+    const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
+    const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
+    const lastTh = rowShadow.querySelector('th:last-of-type');
+    if (firstTh) {
+      const prevWidth = firstTh.getBoundingClientRect().width + ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0);
+      const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
+      return [prevWidth, nextWidth];
+    }
+    // to avoid window resize before row rendered.
+    // @see{module:resize-pinned-position-by-edit-row}
+    /* istanbul ignore next */
+    return [0, 0];
+  }
+  getLeafWidths() {
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    return leafRenderInputs.map((leaf) => {
+      var _a;
+      for (const [cell, renderInput] of headCellRenderInputMap.entries()) {
+        if (leaf === renderInput) {
+          // to avoid window resize before cell rendered.
+          // @see{module:resize-pinned-position-by-edit-row}
+          /* istanbul ignore next */
+          return ((_a = cell.shadowRoot.querySelector('th, td')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        }
+      }
+    });
+  }
+  updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
+    if (['left', 'right'].includes(renderInput.pinned)) {
+      const shadowCell = headCell.shadowRoot.querySelector('th, td');
+      if (renderInput.pinned === 'left') {
+        const position = prevShadowThWidth +
+          leafWidths
+            .slice(0, renderInput.columnIndex)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'left', position);
+      }
+      if (renderInput.pinned === 'right') {
+        const colSpan = isNonNullable(renderInput.colSpan) ? renderInput.colSpan : 1;
+        const position = nextShadowThWidth +
+          leafWidths
+            .slice(renderInput.columnIndex + (colSpan - 1) + 1)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'right', position);
+      }
+    }
+  }
+  updateTableRowPinnedPosition() {
+    const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
+    const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
+    const tableWidth = this.host.getBoundingClientRect().width;
+    const leftPadding = extractNumberFromString(this.paddingX[0]);
+    const rightPadding = extractNumberFromString(this.paddingX[1]);
+    // table width - padding(8*2) - border(2);
+    const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
+    this.host.shadowRoot
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row')
+      .forEach((row) => {
+      const rowShadow = row.shadowRoot;
+      if (hasLeftPinnedColumn) {
+        const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
+        const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
+        this.updatePinnedPosition(firstCell, 'left', 0);
+        this.updatePinnedPosition(selectionCell, 'left', leftPadding);
+      }
+      if (hasRightPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
+        const lastCell = rowShadow.querySelector('th:last-of-type, td:last-of-type');
+        this.updatePinnedPosition(expandCell, 'right', rightPadding);
+        this.updatePinnedPosition(lastCell, 'right', 0);
+      }
+      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
+        if (expandCell) {
+          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
+          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
+          // we should set the width to make the expand slot not scroll by table scroll.
+          // ticket: https://gethired.atlassian.net/browse/VD-7015
+          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+        }
+      }
+    });
+  }
+  updatePinnedPosition(cell, type, position) {
+    if (!cell)
+      return;
+    cell.style.position = 'sticky';
+    cell.style.zIndex = '1';
+    cell.style[type] = `${position}px`;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);

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

@@ -37,6 +37,10 @@ export class VegaTableRenderer extends VegaSlimmer {
       this.columnDivider && 'column-divider',
       `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
       this.striped && 'striped',
+      this.columnStructureModel.hasGroupColumn() && 'is-group-table',
+      (this.columnStructureModel.hasLeftPinnedColumn() ||
+        this.columnStructureModel.hasRightPinnedColumn()) &&
+        'is-pinned-table',
     ]);
     return sanitizeVegaComponent(h(Host, { class: hostClasses },
       this.vegaTableScrollContainerRenderer.render(this.renderInternalTable()),
@@ -68,6 +72,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnStructureModel", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);

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

@@ -14,6 +14,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     super(...arguments);
     this.renderTableRowComponent = (rowProps) => {
       const { rowKey, index, record, isVisibleInCurrentPage } = rowProps;
+      const renderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
       return (h("vega-table-row", { class: {
           'v-hidden': !isVisibleInCurrentPage,
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
@@ -22,8 +23,8 @@ export class VegaTableRowRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
-        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, this.columns.map((column) => {
-        return this.vegaTableCellRenderer.render(column, record, index);
+        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, renderInputs.map((renderInput) => {
+        return this.vegaTableCellRenderer.render(renderInput, record, index);
       })));
     };
   }
@@ -32,9 +33,6 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     return editable ? (h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate([
-  MapToComponentField()
-], VegaTableRowRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "rowClickEventEmitter", void 0);
@@ -47,3 +45,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRenderInputController", void 0);