@globalpayments/vega 2.100.0 → 2.101.0

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

@@ -53,23 +53,36 @@ export class VegaTableCell {
     }
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const leftOffsetPx = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _a !== void 0 ? _a : 0;
+    const rightOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _b !== void 0 ? _b : 0;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
-    const columnClasses = [responsiveClass, columnAlignClass, 'vega-table-cell'];
+    const columnClasses = [
+      responsiveClass,
+      columnAlignClass,
+      'vega-table-cell',
+      pinned === 'left' && 'pinned-left',
+      pinned === 'right' && 'pinned-right',
+    ];
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       columnClasses.push('break-word');
     }
-    if ((_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.isRightStartPinned) {
+    if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isRightStartPinned) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isVisibleRightStartPinned)) {
       columnClasses.push('left-divider');
     }
-    if ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isLeftEndPinned) {
+    if (((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isLeftEndPinned) || ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isVisibleLeftEndPinned)) {
       columnClasses.push('right-divider');
     }
-    if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd)) {
+    if (((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isNoPinnedEnd) ||
+      ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isViewEnd) ||
+      ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isVisibleRightEndPinned)) {
       columnClasses.push('hide-right-border');
     }
+    const effectiveColSpan = (_l = (_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.visibleColSpan) !== null && _l !== void 0 ? _l : this.colSpan;
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
         `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
         this.rowDivider && 'row-divider',
@@ -78,12 +91,16 @@ export class VegaTableCell {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]), "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, 
+      ]), "aria-colspan": (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? String(effectiveColSpan) : null },
+      h("td", { class: arrayToClassString(columnClasses), part: "cell", colSpan: (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? effectiveColSpan : 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 } }, this.overflow === 'ellipsis' && this.ellipsisShowTooltip ? (h("vega-tooltip", { text: this.ellipsisTooltipText, trigger: this.ellipsisTooltipTrigger, maxWidth: 300, style: { display: 'block', width: '100%', minWidth: '0' } },
+        onMouseLeave: this.onMouseLeave.bind(this), style: {
+          'width': this.width,
+          '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+          '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+        } }, 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;
           } },

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

@@ -9,22 +9,27 @@ import { h } from '@stencil/core';
 import { VegaTableExpandRowController } from '../../../slimmers/controllers/vega-table-expand-row-controller';
 export class VegaTableExpandRowRenderer extends VegaSlimmer {
   render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return (h("tr", { class: {
         'vega-table-expanded-row': true,
         'expanded': this.expanded,
         'checked': this.checked,
         'striped': this.striped,
       }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
-      h("td", null),
+      h("td", { class: { 'pinned-left': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.hasLeftPinnedColumn } }),
       h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
-        h("div", { class: "expanded-row-slot-inner" },
+        h("div", { class: {
+            'expanded-row-slot-inner': true,
+            'pinned-left': ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.hasLeftPinnedColumn) ||
+              ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.hasRightPinnedColumn),
+          }, style: {
+            '--pinned-offset-left': `${(_e = (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.leftPaddingPx) !== null && _e !== void 0 ? _e : 0}px`,
+            '--expand-row-content-width': `calc(var(--vega-table-content-width, 0px) - ${(_g = (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.leftPaddingPx) !== null && _g !== void 0 ? _g : 0}px - ${(_j = (_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.rightPaddingPx) !== null && _j !== void 0 ? _j : 0}px - 2px)`,
+          } },
           h("slot", null))),
-      h("td", null)));
+      h("td", { class: { 'pinned-right': (_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.hasRightPinnedColumn } })));
   }
 }
-__decorate([
-  MapToComponentField()
-], VegaTableExpandRowRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
@@ -40,3 +45,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "renderInput", void 0);

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.css

@@ -7,6 +7,26 @@
   display: contents;
 }
 
+td.pinned-left,
+td.pinned-right,
+.expanded-row-slot-inner.pinned-left {
+  position: sticky;
+  z-index: 1;
+}
+
+td.pinned-left {
+  left: 0;
+}
+
+td.pinned-right {
+  right: 0;
+}
+
+.expanded-row-slot-inner.pinned-left {
+  left: var(--pinned-offset-left, 0);
+  width: var(--expand-row-content-width);
+}
+
 :host .vega-table-expanded-row.striped:not(.checked) td {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
 }

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.js

@@ -15,6 +15,8 @@ import { getCurrentBreakpoint } from '../../../utils/breakpoints';
 import { VegaTableExpandRowColSpanController } from './slimmers/controllers/vega-table-expand-row-col-span-controller';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
+import { VegaInternalColumnExpandCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.44.0
  */
@@ -27,6 +29,7 @@ export class VegaTableExpandRow {
     this.vegaTableExpandRowStateController = new VegaTableExpandRowStateController();
     this.vegaTableExpandRowColSpanController = new VegaTableExpandRowColSpanController();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnExpandCellRenderInputRIC);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
@@ -108,6 +111,7 @@ export class VegaTableExpandRow {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
+    "renderInput": {},
     "withMultipleSelection": {},
     "withRowDraggable": {},
     "expanded": {},
@@ -147,6 +151,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -11,12 +11,28 @@ import { generateResponsiveClass } from '../../../utils';
 import { arrayToClassString } from '../../../../../utils/ui';
 export class VegaTableFootCellRenderer extends VegaSlimmer {
   render() {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const effectiveColSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.visibleColSpan) !== null && _a !== void 0 ? _a : this.colSpan;
+    const leftOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _b !== void 0 ? _b : 0;
+    const rightOffsetPx = (_c = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _c !== void 0 ? _c : 0;
     return (h("td", { class: {
         'vega-table-cell': true,
+        'pinned-left': pinned === 'left',
+        'pinned-right': pinned === 'right',
+        'right-divider': ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned) || ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isVisibleLeftEndPinned),
+        'left-divider': ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isRightStartPinned) || ((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isVisibleRightStartPinned),
+        'hide-right-border': ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isNoPinnedEnd) ||
+          ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isViewEnd) ||
+          ((_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.isVisibleRightEndPinned),
         '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, style: { width: this.width } },
+      }, colSpan: (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? effectiveColSpan : null, style: {
+        'width': this.width,
+        '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+        '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+      } },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
@@ -37,3 +53,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "width", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "renderInput", void 0);

package/dist/collection/components/vega-table/vega-table-foot-cell/vega-table-foot-cell.css

@@ -116,6 +116,16 @@ td.break-word {
   border-right-style: solid;
 }
 
+:host .vega-table-cell.pinned-left {
+  position: sticky;
+  z-index: 1;
+  left: var(--pinned-offset-left, 0);
+}
+:host .vega-table-cell.pinned-right {
+  position: sticky;
+  z-index: 1;
+  right: var(--pinned-offset-right, 0);
+}
 :host .vega-table-cell.right-divider {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-right-width: 2px;

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

@@ -13,6 +13,8 @@ import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTableFootCellRenderer } from './slimmers/renderers/vega-table-foot-cell-renderer';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
+import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
+import { VegaInternalColumnFootCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 2.68.1
  */
@@ -23,14 +25,19 @@ export class VegaTableFootCell {
     this.vegaTableFootCellRenderer = new VegaTableFootCellRenderer();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnFootCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
   }
   render() {
     var _a;
+    let effectiveColSpan = this.colSpan;
+    if (((_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.visibleColSpan) != null) {
+      effectiveColSpan = this.renderInput.visibleColSpan;
+    }
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, "aria-colspan": (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? String(effectiveColSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
   }
   static get is() { return "vega-table-foot-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -129,6 +136,7 @@ export class VegaTableFootCell {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
+    "renderInput": {},
     "density": {},
     "columnDivider": {}
   }; }
@@ -149,3 +157,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableFootCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);

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

@@ -10,25 +10,38 @@ export class VegaTableFootRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderFooterSelectionCell = () => {
-      if (this.selectionType !== 'multiple')
+      const renderInput = this.renderInput;
+      if (!(renderInput === null || renderInput === void 0 ? void 0 : renderInput.showSelectionCell))
         return;
-      return h("td", { class: "vega-table-selection-column" });
+      return (h("td", { class: {
+          'vega-table-selection-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } }));
     };
     this.renderFooterExpandableCell = () => {
-      return this.hasExpandableRow && h("td", { class: "vega-table-expand-action-column" });
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showExpandActionCell) && (h("td", { class: {
+          'vega-table-expand-action-column': true,
+          'pinned-right': renderInput.hasRightPinnedColumn,
+        } })));
     };
     this.renderFooterDraggableCell = () => {
-      return this.draggable && h("td", { class: "vega-table-draggable-column" });
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showDraggableCell) && (h("td", { class: {
+          'vega-table-draggable-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } })));
     };
   }
   render() {
+    var _a, _b;
     return (h("tr", null,
-      h("td", { style: { width: this.paddingX[0] } }),
+      h("td", { class: { 'pinned-left': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.hasLeftPinnedColumn }, style: { width: this.paddingX[0] } }),
       this.renderFooterDraggableCell(),
       this.renderFooterSelectionCell(),
       h("slot", null),
       this.renderFooterExpandableCell(),
-      h("td", { style: { width: this.paddingX[1] } })));
+      h("td", { class: { 'pinned-right': (_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.hasRightPinnedColumn }, style: { width: this.paddingX[1] } })));
   }
 }
 __decorate([
@@ -39,10 +52,4 @@ __decorate([
 ], VegaTableFootRowRenderer.prototype, "paddingX", void 0);
 __decorate([
   MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "draggable", void 0);
+], VegaTableFootRowRenderer.prototype, "renderInput", void 0);

package/dist/collection/components/vega-table/vega-table-foot-row/vega-table-foot-row.css

@@ -21,6 +21,32 @@ td:last-of-type {
   border-bottom-right-radius: 12px;
 }
 
+td.pinned-left,
+td.pinned-right {
+  position: sticky;
+  z-index: 1;
+}
+
+td.pinned-left:first-of-type {
+  left: 0;
+}
+
+td.vega-table-draggable-column.pinned-left {
+  left: var(--row-left-padding, 0px);
+}
+
+td.vega-table-selection-column.pinned-left {
+  left: calc(var(--row-left-padding, 0px) + var(--row-draggable-width, 0px));
+}
+
+td.vega-table-expand-action-column.pinned-right {
+  right: var(--row-right-padding, 0px);
+}
+
+td.pinned-right:last-of-type {
+  right: 0;
+}
+
 :host(.density-default) td:first-of-type,
 :host(.density-relaxed) td:first-of-type {
   border-top-left-radius: 12px;

package/dist/collection/components/vega-table/vega-table-foot-row/vega-table-foot-row.js

@@ -13,6 +13,8 @@ import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-fo
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
+import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
+import { VegaInternalRowRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 2.68.1
  */
@@ -23,6 +25,7 @@ export class VegaTableFootRow {
     this.vegaTableFootRowRenderer = new VegaTableFootRowRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalRowRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates whether the table has a expandable row.
@@ -30,10 +33,15 @@ export class VegaTableFootRow {
     this.hasExpandableRow = false;
   }
   render() {
+    var _a, _b, _c, _d, _e;
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
         'column-divider': this.columnDivider,
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      }, style: {
+        '--row-left-padding': `${(_b = (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.leftPaddingPx) !== null && _b !== void 0 ? _b : 0}px`,
+        '--row-right-padding': `${(_d = (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.rightPaddingPx) !== null && _d !== void 0 ? _d : 0}px`,
+        '--row-draggable-width': ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.showDraggableCell) ? '16px' : '0px',
       } }, this.vegaTableFootRowRenderer.render()), this.host);
   }
   static get is() { return "vega-table-foot-row"; }
@@ -46,6 +54,7 @@ export class VegaTableFootRow {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
+    "renderInput": {},
     "hasExpandableRow": {},
     "selectionType": {},
     "paddingX": {},
@@ -70,3 +79,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableFootRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);

package/dist/collection/components/vega-table/vega-table-head-cell/vega-table-head-cell.css

@@ -138,6 +138,16 @@ th.break-word {
   border-right-style: solid;
 }
 
+:host .vega-table-cell.pinned-left {
+  position: sticky;
+  z-index: 1;
+  left: var(--pinned-offset-left, 0);
+}
+:host .vega-table-cell.pinned-right {
+  position: sticky;
+  z-index: 1;
+  right: var(--pinned-offset-right, 0);
+}
 :host .vega-table-cell.is-group-cell {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-right-width: 1px;

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

@@ -77,7 +77,11 @@ export class VegaTableHeadCell {
     this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const leftOffsetPx = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _a !== void 0 ? _a : 0;
+    const rightOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _b !== void 0 ? _b : 0;
     const sortableConfig = this.sorter
       ? {
         role: 'button',
@@ -93,13 +97,22 @@ export class VegaTableHeadCell {
       } },
       h("th", Object.assign({ class: {
           'vega-table-cell': true,
+          'pinned-left': pinned === 'left',
+          'pinned-right': pinned === 'right',
           'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
-          'is-group-cell': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.headHasGroupColumn,
-          'hide-right-border': ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isViewEnd) || ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd),
-          'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
-          'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
+          'is-group-cell': (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.headHasGroupColumn,
+          'hide-right-border': ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd) ||
+            ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isNoPinnedEnd) ||
+            ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isVisibleRightEndPinned),
+          'right-divider': ((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isLeftEndPinned) || ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isVisibleLeftEndPinned),
+          'left-divider': ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isRightStartPinned) ||
+            ((_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.isVisibleRightStartPinned),
           [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-        } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan, style: { width: this.width } }),
+        } }, sortableConfig, { colSpan: (_l = this.renderInput) === null || _l === void 0 ? void 0 : _l.colSpan, rowSpan: (_m = this.renderInput) === null || _m === void 0 ? void 0 : _m.rowSpan, style: {
+          'width': this.width,
+          '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+          '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+        } }),
         h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
           h("span", { class: "vega-table-column-label" },
             h("slot", null)),

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

@@ -19,17 +19,18 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderHeaderSelectionCell = (renderInput) => {
-      if (this.selectionType !== 'multiple')
+      if (!renderInput)
         return;
-      return (h("th", { rowSpan: renderInput.startRowSpan, class: {
+      return (renderInput.showSelectionCell && (h("th", { rowSpan: renderInput.startRowSpan, class: {
           'vega-table-selection-column': true,
           'hidden': renderInput.isStartHidden,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
         } }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
         h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
-          } })))));
+          } }))))));
     };
     this.handleSelectAll = (input) => {
       if (input.eventName === 'vegaChange') {
@@ -43,15 +44,21 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
       }
     };
     this.renderHeaderDraggableCell = (renderInput) => {
-      return (this.draggable && (h("th", { rowSpan: renderInput.startRowSpan, class: {
+      if (!renderInput)
+        return;
+      return (renderInput.showDraggableCell && (h("th", { rowSpan: renderInput.startRowSpan, class: {
           'vega-table-draggable-column': true,
           'hidden': renderInput.isStartHidden,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
         } })));
     };
     this.renderHeaderExpandableCell = (renderInput) => {
-      return (this.hasExpandableRow && (h("th", { rowSpan: renderInput.endRowSpan, class: {
+      if (!renderInput)
+        return;
+      return (renderInput.showExpandActionCell && (h("th", { rowSpan: renderInput.endRowSpan, class: {
           'vega-table-expand-action-column': true,
           'hidden': renderInput.isEndHidden,
+          'pinned-right': renderInput.hasRightPinnedColumn,
         } })));
     };
     this.handleClick = (e) => {
@@ -85,49 +92,26 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
   }
   render() {
     var _a, _b;
-    const renderInput = this.getRowRenderInput();
+    const renderInput = this.renderInput;
     return (h("tr", { class: {
-        'is-group-row': renderInput.headHasGroupColumn,
-        'is-pinned-row': renderInput.headHasPinnedColumn,
+        'is-group-row': !!(renderInput === null || renderInput === void 0 ? void 0 : renderInput.startRowSpan),
+        'is-pinned-row': (renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasLeftPinnedColumn) || (renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasRightPinnedColumn),
       } },
       h("th", { style: {
           width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0],
-        }, rowSpan: renderInput.startRowSpan, class: {
-          hidden: renderInput.isStartHidden,
+        }, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.startRowSpan, class: {
+          'hidden': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isStartHidden,
+          'pinned-left': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasLeftPinnedColumn,
         } }),
       this.renderHeaderDraggableCell(renderInput),
       this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
       this.renderHeaderExpandableCell(renderInput),
-      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] }, rowSpan: renderInput.endRowSpan, class: {
-          hidden: renderInput.isEndHidden,
+      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] }, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.endRowSpan, class: {
+          'hidden': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isEndHidden,
+          'pinned-right': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasRightPinnedColumn,
         } })));
   }
-  getRowRenderInput() {
-    const renderInput = {};
-    const renderInputs = this.renderInput;
-    const startRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[0];
-    const endRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[renderInputs.length - 1];
-    if (startRenderInput) {
-      renderInput.headHasGroupColumn = startRenderInput.headHasGroupColumn;
-      renderInput.headHasPinnedColumn = startRenderInput.headHasPinnedColumn;
-      if (renderInput.headHasGroupColumn) {
-        renderInput.startRowSpan =
-          this.selectionType === 'multiple' && startRenderInput.level === 0
-            ? startRenderInput.headMaxDepth
-            : startRenderInput.rowSpan;
-        renderInput.isStartHidden =
-          startRenderInput.headHasGroupColumn &&
-            ((this.selectionType === 'multiple' && startRenderInput.level > 0) ||
-              !startRenderInput.isViewStart);
-      }
-    }
-    if (endRenderInput && endRenderInput.headHasGroupColumn) {
-      renderInput.endRowSpan = endRenderInput.rowSpan;
-      renderInput.isEndHidden = startRenderInput.headHasGroupColumn && !endRenderInput.isViewEnd;
-    }
-    return renderInput;
-  }
 }
 __decorate([
   MapToComponentField()
@@ -135,9 +119,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "paddingX", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "selectionType", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "hideSelectAll", void 0);
@@ -147,12 +128,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "draggable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);

package/dist/collection/components/vega-table/vega-table-head-row/vega-table-head-row.css

@@ -93,19 +93,28 @@ th:last-of-type {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-:host tr.is-pinned-row th {
+:host tr.is-pinned-row th.pinned-left,
+:host tr.is-pinned-row th.pinned-right {
   position: sticky;
   z-index: 1;
 }
-:host tr.is-pinned-row th:first-of-type {
+:host tr.is-pinned-row th.pinned-left.pinned-left:first-of-type,
+:host tr.is-pinned-row th.pinned-right.pinned-left:first-of-type {
   left: 0px;
 }
-:host tr.is-pinned-row th.vega-table-selection-column {
-  left: 8px;
+:host tr.is-pinned-row th.pinned-left.vega-table-draggable-column.pinned-left,
+:host tr.is-pinned-row th.pinned-right.vega-table-draggable-column.pinned-left {
+  left: var(--row-left-padding, 8px);
 }
-:host tr.is-pinned-row th.vega-table-expand-action-column {
-  right: 8px;
+:host tr.is-pinned-row th.pinned-left.vega-table-selection-column.pinned-left,
+:host tr.is-pinned-row th.pinned-right.vega-table-selection-column.pinned-left {
+  left: calc(var(--row-left-padding, 8px) + var(--row-draggable-width, 0px));
 }
-:host tr.is-pinned-row th:last-of-type {
+:host tr.is-pinned-row th.pinned-left.vega-table-expand-action-column.pinned-right,
+:host tr.is-pinned-row th.pinned-right.vega-table-expand-action-column.pinned-right {
+  right: var(--row-right-padding, 8px);
+}
+:host tr.is-pinned-row th.pinned-left.pinned-right:last-of-type,
+:host tr.is-pinned-row th.pinned-right.pinned-right:last-of-type {
   right: 0px;
 }