@globalpayments/vega 2.55.1 → 2.57.0

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

@@ -4,27 +4,27 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 /* This file is generated by vega-design 2.0.77 */
-:host(.v-hidden) {
+:host .vega-table-cell.v-hidden {
   display: none;
 }
 
 @media (min-width: 320px) {
-  :host(.S\:v-table-cell) {
+  :host .vega-table-cell.S\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 768px) {
-  :host(.M\:v-table-cell) {
+  :host .vega-table-cell.M\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1024px) {
-  :host(.L\:v-table-cell) {
+  :host .vega-table-cell.L\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1440px) {
-  :host(.XL\:v-table-cell) {
+  :host .vega-table-cell.XL\:v-table-cell {
     display: table-cell;
   }
 }
@@ -34,11 +34,7 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 :host {
-  display: table-cell;
-  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  text-align: left;
-  vertical-align: middle;
+  display: contents;
 }
 
 .vega-table-cell {
@@ -79,8 +75,11 @@
 }
 
 td {
-  display: block;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
   padding: 0px;
+  vertical-align: middle;
 }
 td.v-text-center {
   text-align: center;
@@ -113,4 +112,52 @@ td.v-text-right {
 
 .vega-table-cell-scroll {
   overflow: auto;
+}
+
+:host(.column-divider) .vega-table-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+:host(.row-divider) .vega-table-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+:host(.striped) .vega-table-cell {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+}
+
+:host(.clickable.hovered:not(.checked)) .vega-table-cell {
+  cursor: pointer;
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+}
+
+:host(.checked) .vega-table-cell {
+  background-color: rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1));
+}
+
+:host(.expanded) .vega-table-cell {
+  border-top-width: 1px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-input-field, 171, 198, 216, 1));
+}
+
+:host .vega-table-cell.right-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 2px;
+  border-right-style: solid;
+}
+:host .vega-table-cell.left-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-left-width: 2px;
+  border-left-style: solid;
+}
+:host .vega-table-cell.hide-right-border {
+  border-right-width: 0px;
 }

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 import { generateResponsiveClass, generateTextAlignClass } from '../utils';
-import { arrayToClassString } from '../../../utils/ui';
+import { arrayToClassString, findParent } from '../../../utils/ui';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableCellStateController } from './slimmers/controllers/vega-table-cell-state-controller';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
@@ -15,6 +15,10 @@ import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaTableRowStateController } from './slimmers/controllers/vega-table-row-state-controller';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnBodyCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
 /**
  * @vegaVersion 1.44.0
  */
@@ -22,6 +26,7 @@ export class VegaTableCell {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTableCellStateController = new VegaTableCellStateController();
+    this.vegaTableRowStateController = new VegaTableRowStateController();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -38,18 +43,47 @@ export class VegaTableCell {
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
-    const columnClasses = [columnAlignClass, 'vega-table-cell'];
+    const columnClasses = [responsiveClass, columnAlignClass, 'vega-table-cell'];
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       columnClasses.push('break-word');
     }
+    const table = findParent(this.host, 'vega-table');
+    const renderInput = table &&
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnBodyCellRenderInputRIC), this.host);
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned) {
+      columnClasses.push('left-divider');
+    }
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned) {
+      columnClasses.push('right-divider');
+    }
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd) {
+      columnClasses.push('hide-right-border');
+    }
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
         `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
-        responsiveClass,
-      ]), style: { width: this.width } },
-      h("td", { class: arrayToClassString(columnClasses), part: "cell" },
+        this.rowDivider && 'row-divider',
+        this.columnDivider && 'column-divider',
+        this.clickable && 'clickable',
+        this.checked && 'checked',
+        this.striped && 'striped',
+        this.expanded && 'expanded',
+      ]) },
+      h("td", { class: arrayToClassString(columnClasses), part: "cell", 
+        /* 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);
   }
+  onMouseEnter() {
+    const row = this.host.parentElement;
+    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.add('hovered'));
+  }
+  onMouseLeave() {
+    const row = this.host.parentElement;
+    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.remove('hovered'));
+  }
   static get is() { return "vega-table-cell"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -147,7 +181,13 @@ export class VegaTableCell {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "density": {}
+    "density": {},
+    "rowDivider": {},
+    "columnDivider": {},
+    "clickable": {},
+    "checked": {},
+    "striped": {},
+    "expanded": {}
   }; }
   static get elementRef() { return "host"; }
 }
@@ -157,6 +197,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaTableRowStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);

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

@@ -16,10 +16,14 @@ export class VegaTableExpandRowRenderer extends VegaSlimmer {
       }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
       h("td", null),
       h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
-        h("slot", null)),
+        h("div", { class: "expanded-row-slot-inner" },
+          h("slot", null))),
       h("td", null)));
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);

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

@@ -52,4 +52,15 @@
 }
 .vega-table-expanded-row.expanded.checked {
   background-color: rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1));
+}
+
+:host tr.is-pinned-row td:first-of-type {
+  position: sticky;
+  z-index: 1;
+  left: 0px;
+}
+:host tr.is-pinned-row td.vega-table-expanded-row-slot-container div {
+  position: sticky;
+  z-index: 1;
+  left: 8px;
 }

package/dist/collection/components/vega-table/vega-table-head-cell/slimmers/controllers/vega-table-head-cell-state-controller.js

@@ -19,6 +19,18 @@ export class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (columnDivider) => {
+            const parent = this.host.parentElement;
+            if (parent) {
+              const lastCell = parent.querySelector('vega-table-head-cell:last-of-type');
+              this.columnDivider = columnDivider && lastCell !== this.host;
+            }
+          },
+        },
       ],
     });
   }
@@ -26,3 +38,6 @@ export class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadCellStateController.prototype, "columnDivider", void 0);

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

@@ -4,27 +4,27 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 /* This file is generated by vega-design 2.0.77 */
-:host(.v-hidden) {
+:host .vega-table-cell.v-hidden {
   display: none;
 }
 
 @media (min-width: 320px) {
-  :host(.S\:v-table-cell) {
+  :host .vega-table-cell.S\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 768px) {
-  :host(.M\:v-table-cell) {
+  :host .vega-table-cell.M\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1024px) {
-  :host(.L\:v-table-cell) {
+  :host .vega-table-cell.L\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1440px) {
-  :host(.XL\:v-table-cell) {
+  :host .vega-table-cell.XL\:v-table-cell {
     display: table-cell;
   }
 }
@@ -34,11 +34,7 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 :host {
-  display: table-cell;
-  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  text-align: left;
-  vertical-align: middle;
+  display: contents;
 }
 
 :host(.sortable) {
@@ -54,7 +50,10 @@
 }
 
 th {
-  display: block;
+  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
+  vertical-align: middle;
   padding: 0px;
   padding: 12px;
   font-family: "Inter", sans-serif;
@@ -130,4 +129,36 @@ th.break-word {
 
 :host(.density-relaxed) .vega-table-cell {
   padding: 16px;
+}
+
+:host(.column-divider) .vega-table-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+:host .vega-table-cell.is-group-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-right-style: solid;
+  border-bottom-style: solid;
+}
+:host .vega-table-cell.hide-right-border {
+  border-right-width: 0px;
+}
+:host .vega-table-cell.bottom-border {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+:host .vega-table-cell.right-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 2px;
+  border-right-style: solid;
+}
+:host .vega-table-cell.left-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-left-width: 2px;
+  border-left-style: solid;
 }

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Prop, Element, Event, State } from '@stencil/core';
-import { arrayToClassString } from '../../../utils/ui';
+import { arrayToClassString, findParent } from '../../../utils/ui';
 import { generateResponsiveClass } from '../utils';
 import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../../utils/component';
@@ -26,6 +26,9 @@ import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-contr
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { SortIconRenderer } from './slimmers/renderers/sort-icon-renderer';
 import { VegaTableHeadCellSortConfigController } from './slimmers/controllers/vega-table-head-cell-sort-config-controller';
+import RemoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnHeadCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.44.0
  */
@@ -71,16 +74,23 @@ export class VegaTableHeadCell {
         onClick: (e) => this.handleSort(e),
       }
       : null;
-    const cellClassNames = ['vega-table-cell'];
-    if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
-      cellClassNames.push('break-word');
-    }
+    const table = findParent(this.host, 'vega-table');
+    const renderInput = table &&
+      RemoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnHeadCellRenderInputRIC), this.host);
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
-        sortable: !!this.sorter,
-        [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+        'sortable': !!this.sorter,
+        'column-divider': this.columnDivider,
       }, style: { width: this.width } },
-      h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig),
+      h("th", Object.assign({ class: {
+          'vega-table-cell': true,
+          'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
+          'is-group-cell': renderInput === null || renderInput === void 0 ? void 0 : renderInput.headHasGroupColumn,
+          'hide-right-border': (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isViewEnd) || (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd),
+          'right-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned,
+          'left-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned,
+          [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+        } }, sortableConfig, { colSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.rowSpan }),
         h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
           h("span", { class: "vega-table-column-label" },
             h("slot", null)),
@@ -232,11 +242,37 @@ export class VegaTableHeadCell {
           }],
         "text": "Specifies the sorting configuration for the table header cell."
       }
+    },
+    "pinned": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTablePinnedType",
+        "resolved": "\"left\" | \"right\"",
+        "references": {
+          "VegaTablePinnedType": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "__VERSION__"
+          }],
+        "text": "Specifies the pinned type of the head cell."
+      },
+      "attribute": "pinned",
+      "reflect": false
     }
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "density": {}
+    "density": {},
+    "columnDivider": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",

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

@@ -14,14 +14,17 @@ import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-e
 import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { findParent } from '../../../../../utils/ui';
-import { VegaInternalTableRowSelectAll } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalColumnHeadRowRenderInputRIC, VegaInternalTableRowSelectAll, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 export class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderHeaderSelectionCell = () => {
+    this.renderHeaderSelectionCell = (renderInput) => {
       if (this.selectionType !== 'multiple')
         return;
-      return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
+      return (h("th", { rowSpan: renderInput.startRowSpan, class: {
+          'vega-table-selection-column': true,
+          'hidden': renderInput.isStartHidden,
+        } }, !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) => {
@@ -39,8 +42,11 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
         }
       }
     };
-    this.renderHeaderExpandableCell = () => {
-      return this.expandable && h("th", { class: "vega-table-expand-action-column" });
+    this.renderHeaderExpandableCell = (renderInput) => {
+      return (this.expandable && (h("th", { rowSpan: renderInput.endRowSpan, class: {
+          'vega-table-expand-action-column': true,
+          'hidden': renderInput.isEndHidden,
+        } })));
     };
     this.handleClick = (e) => {
       e.stopPropagation();
@@ -73,12 +79,49 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
   }
   render() {
     var _a, _b;
-    return (h("tr", null,
-      h("th", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
-      this.renderHeaderSelectionCell(),
+    const renderInput = this.getRowRenderInput();
+    return (h("tr", { class: {
+        'is-group-row': renderInput.headHasGroupColumn,
+        'is-pinned-row': renderInput.headHasPinnedColumn,
+      } },
+      h("th", { style: {
+          width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0],
+        }, rowSpan: renderInput.startRowSpan, class: {
+          hidden: renderInput.isStartHidden,
+        } }),
+      this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
-      this.renderHeaderExpandableCell(),
-      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } })));
+      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,
+        } })));
+  }
+  getRowRenderInput() {
+    const renderInput = {};
+    const table = findParent(this.host, 'vega-table');
+    const renderInputs = table &&
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnHeadRowRenderInputRIC), this.host);
+    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([

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

@@ -71,4 +71,41 @@ th:last-of-type {
 .vega-table-selection-column {
   width: 40px;
   min-width: 40px;
+}
+
+:host tr.is-group-row th {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+:host tr.is-group-row th.hidden {
+  display: none;
+}
+:host tr.is-group-row th.vega-table-selection-column {
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+:host tr.is-group-row th:first-of-type {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+:host tr.is-group-row th:last-of-type {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+:host tr.is-pinned-row th {
+  position: sticky;
+  z-index: 1;
+}
+:host tr.is-pinned-row th:first-of-type {
+  left: 0px;
+}
+:host tr.is-pinned-row th.vega-table-selection-column {
+  left: 8px;
+}
+:host tr.is-pinned-row th.vega-table-expand-action-column {
+  right: 8px;
+}
+:host tr.is-pinned-row th:last-of-type {
+  right: 0px;
 }

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

@@ -25,21 +25,18 @@ td:last-of-type {
   border-bottom-right-radius: 12px;
 }
 
-:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td,
-:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) ::slotted(vega-table-cell) {
+:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
 }
 
-.checked td,
-.checked ::slotted(vega-table-cell) {
+.checked td {
   background-color: rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1));
 }
 
 :not(.checked).clickable:hover {
   cursor: pointer;
 }
-:not(.checked).clickable:hover td,
-:not(.checked).clickable:hover ::slotted(vega-table-cell) {
+:not(.checked).clickable:hover td {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }
 
@@ -64,8 +61,7 @@ td:last-of-type {
   transform: rotate(180deg);
 }
 
-:host tr.expand-row td,
-:host tr.expand-row ::slotted(vega-table-cell) {
+:host tr.expand-row td {
   border-top-width: 1px;
   border-left-width: 0px;
   border-right-width: 0px;
@@ -89,8 +85,7 @@ tr.expand-row-space {
   padding-top: 8px;
 }
 
-:host(.row-divider:not(:last-of-type)) td,
-:host(.row-divider:not(:last-of-type)) ::slotted(vega-table-cell) {
+:host(.row-divider:not(:last-of-type)) td {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -100,12 +95,6 @@ tr.expand-row-space {
   border-radius: 0px;
 }
 
-:host(.column-divider) ::slotted(vega-table-cell:not(:last-of-type)) {
-  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
-  border-right-width: 1px;
-  border-right-style: solid;
-}
-
 :host(.density-default) td:first-of-type {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;