@globalpayments/vega 2.56.0 → 2.57.0

package/dist/esm/vega-table_8.entry.js

@@ -1,34 +1,34 @@
 import { h, f as forceUpdate, F as Fragment, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-d0a47531.js';
 import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
 import { g as getValueByPath } from './object-261e7344.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { n as TABLE_EXPAND_ROW, o as TABLE_ROW_SELECTION, p as TABLE_ROW_SELECTION_ALL, q as TABLE_ROW_CLICK, S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-ca83d6b6.js';
 import { O as Observer } from './observer-3959f9dd.js';
-import { f as findParent, a as arrayToClassString } from './ui-7d177fb0.js';
+import { f as findParent, a as arrayToClassString, k as extractNumberFromString } from './ui-7d177fb0.js';
 import { d as domNodeSubjectFactory, a as VegaClick, f as VegaChange, L as VegaPageSizeChange, V as VegaExpand, Q as VegaSelectChange, R as VegaSelectAllChange, S as VegaRowClick, T as VegaRowExpand, U as VegaRowSelect, W as VegaRowSelectAll } from './dom-node-subject-factory-6374611f.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { C as VegaInternalTableRowExpand, D as VegaInternalTableRowSelect, E as VegaInternalTableRowSelectAll, F as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-178b2743.js';
+import { C as VegaInternalTableRowExpand, D as VegaInternalTableRowSelect, E as VegaInternalTableRowSelectAll, F as VegaInternalColumnHeadRowRenderInputRIC, G as VegaInternalColumnHeadCellRenderInputRIC, H as VegaInternalColumnBodyCellRenderInputRIC, I as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-f0ea2bab.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-c345ca2e.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-464498b6.js';
-import { i as isNonNullable, s as isBreakpointsTokenType } from './type-guard-158f6d7a.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-60731164.js';
+import { i as isNonNullable, s as isBreakpointsTokenType, Q as isVegaTableColumnGroupingModelType } from './type-guard-84b1f192.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-0bf7fbf3.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-b6c8051c.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2b975cbf.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-1c4d1e78.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-b59a578e.js';
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-b5cb9b81.js';
 import { I as ImmutableMap } from './immutable-map-612922a2.js';
-import { T as TranslationSlimmer } from './translation-slimmer-e6b130bf.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-93eeb87d.js';
-import { F as FeatureFlag } from './feature-flag-controller-0fbe8fb0.js';
+import { T as TranslationSlimmer } from './translation-slimmer-f28e4708.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-1e9af9ec.js';
+import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
 import { B as Breakpoints } from './breakpoints-d9faf11c.js';
-import { I as InternalVegaZIndexManager } from './vega-skeleton-loader-controller-9d1ffa6c.js';
+import { I as InternalVegaZIndexManager } from './vega-skeleton-loader-controller-3f6faa17.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-58cf8aa6.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-7eac52c8.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import './number-4398f2e1.js';
@@ -36,11 +36,11 @@ import './ui-8424715a.js';
 import './pixel-f32c07ce.js';
 import './array-7888f339.js';
 import './vega-env-manager-8f8dc473.js';
-import './icon-manager-638dd4d4.js';
-import './wait-for-vega-handler-e0a928cd.js';
-import './translation-71e0711d.js';
-import './content-state-cf27d19b.js';
-import './code-block-1cdb0599.js';
+import './icon-manager-2ee1c619.js';
+import './wait-for-vega-handler-c2c07ac3.js';
+import './translation-a6eacb5f.js';
+import './content-state-953906e8.js';
+import './code-block-73869a3c.js';
 import './dark-mode-style-controller-ea798fc8.js';
 import './_commonjsHelpers-9943807e.js';
 import './regex-dfe11abf.js';
@@ -48,7 +48,7 @@ import './typography-396de03f.js';
 import './dynamic-slimmer-90b8af32.js';
 import './try-get-document-bef0f526.js';
 import './internal-vega-event-manager-d80c53c5.js';
-import './index-44c794b4.js';
+import './index-e9da316f.js';
 
 /**
  * Immutable Set cannot be changed once created
@@ -157,7 +157,7 @@ const VegaTableEditableFieldTypes = [
   'time-picker',
 ];
 
-var __decorate$F = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$J = (undefined && undefined.__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;
@@ -240,23 +240,41 @@ 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$F([
+__decorate$J([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$F([
+__decorate$J([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "columns", void 0);
+__decorate$J([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$F([
+__decorate$J([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
+__decorate$J([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$I = (undefined && undefined.__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;
@@ -451,47 +469,47 @@ class VegaTableExpandRowController extends VegaSlimmer {
   }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$E([
+__decorate$I([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$E([
+__decorate$I([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
 
-var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$H = (undefined && undefined.__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;
@@ -830,68 +848,68 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
       this.host === findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$D([
+__decorate$H([
   MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
 
-var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$G = (undefined && undefined.__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;
@@ -1031,41 +1049,41 @@ class VegaTableDataSourceController extends VegaSlimmer {
     }
   }
 }
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$C([
+__decorate$G([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$C([
+__decorate$G([
   MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$C([
+__decorate$G([
   MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$F = (undefined && undefined.__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;
@@ -1098,39 +1116,44 @@ 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));
   }
 }
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$B([
+__decorate$F([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$E = (undefined && undefined.__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;
@@ -1139,49 +1162,86 @@ var __decorate$A = (undefined && undefined.__decorate) || function (decorators,
 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$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$A([
+__decorate$E([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$E([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$D = (undefined && undefined.__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;
@@ -1247,19 +1307,19 @@ class VegaTablePaginationRenderer extends VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$z([
+__decorate$D([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$z([
+__decorate$D([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$z([
+__decorate$D([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$z([
+__decorate$D([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$z([
+__decorate$D([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
@@ -1286,7 +1346,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, chil
     onScroll: handleVerticalScroll }, children));
 };
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$C = (undefined && undefined.__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;
@@ -1319,20 +1379,20 @@ class VegaTableScrollContainerRenderer extends VegaSlimmer {
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$y([
+__decorate$C([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$y([
+__decorate$C([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "host", void 0);
-__decorate$y([
+__decorate$C([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$y([
+__decorate$C([
   MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$B = (undefined && undefined.__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;
@@ -1366,6 +1426,10 @@ 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()),
@@ -1373,62 +1437,65 @@ class VegaTableRenderer extends VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$x([
+__decorate$B([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnStructureModel", void 0);
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "translationSlimmer", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$x([
+__decorate$B([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "editingRows", void 0);
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__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;
@@ -1492,23 +1559,23 @@ class VegaTablePaginationController extends VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$w([
+__decorate$A([
   MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$w([
+__decorate$A([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$w([
+__decorate$A([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$w([
+__decorate$A([
   MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$w([
+__decorate$A([
   MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__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;
@@ -1737,55 +1804,55 @@ class VegaTableEditableController extends VegaSlimmer {
   }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$v([
+__decorate$z([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$v([
+__decorate$z([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$v([
+__decorate$z([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "columns", void 0);
-__decorate$v([
+__decorate$z([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$v([
+__decorate$z([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$v([
+__decorate$z([
   MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
@@ -1831,7 +1898,7 @@ class VegaTableSorter {
   }
 }
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__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;
@@ -1901,26 +1968,26 @@ class VegaTableSortController extends VegaSlimmer {
     });
   }
 }
-__decorate$u([
+__decorate$y([
   MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$u([
+__decorate$y([
   MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$u([
+__decorate$y([
   MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$u([
+__decorate$y([
   MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$u([
+__decorate$y([
   MapToComponentField()
 ], VegaTableSortController.prototype, "sortConfig", void 0);
-__decorate$u([
+__decorate$y([
   MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__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;
@@ -1939,28 +2006,38 @@ 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] } })));
   }
 }
-__decorate$t([
+__decorate$x([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$t([
+__decorate$x([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
+__decorate$x([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$t([
+__decorate$x([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
-__decorate$t([
+__decorate$x([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__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;
@@ -2115,59 +2192,59 @@ class VegaTableChildrenController extends VegaSlimmer {
     }
   }
 }
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$s([
+__decorate$w([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$s([
+__decorate$w([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$s([
+__decorate$w([
   MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__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;
@@ -2178,6 +2255,7 @@ class VegaTableRowRenderer$1 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, 
@@ -2186,8 +2264,8 @@ class VegaTableRowRenderer$1 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);
       })));
     };
   }
@@ -2196,23 +2274,23 @@ class VegaTableRowRenderer$1 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$r([
-  MapToComponentField()
-], VegaTableRowRenderer$1.prototype, "columns", void 0);
-__decorate$r([
+__decorate$v([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$r([
+__decorate$v([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$r([
+__decorate$v([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$r([
+__decorate$v([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__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;
@@ -2262,64 +2340,922 @@ class VegaTableRenderModeController extends VegaSlimmer {
   componentWillLoad() {
     this.isTemplateRenderMode = this.checkIsTemplateRenderMode(this.host);
   }
-  /**
-   * Used by {@link currentDataObserver}
-   */
-  componentDidLoad() {
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  componentDidLoad() {
+  }
+}
+__decorate$u([
+  MapToComponentField()
+], VegaTableRenderModeController.prototype, "host", void 0);
+__decorate$u([
+  MapToComponentField({ writable: true })
+], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
+__decorate$u([
+  InjectVegaSlimmer()
+], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
+__decorate$u([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderModeController.prototype, "connectedCallback", null);
+__decorate$u([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
+__decorate$u([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderModeController.prototype, "componentWillLoad", null);
+__decorate$u([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRenderModeController.prototype, "componentDidLoad", null);
+
+const VegaTableRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length > 0,
+  },
+];
+
+/**
+ * Represents the hierarchical structure of table columns (including group columns).
+ *
+ * Responsibilities:
+ * - Build the tree from flat or grouped column configs (.from / .fromGroupColumns)
+ * - Provide traversal helpers (iterator / dfs) with caching
+ * - Provide utility checks (isLeaf, hasGroupColumn, hasPinnedColumn)
+ * - Produce leaf column configs for rendering (generateColumnConfigByLeaves)
+ * - Order root children by pinned type for rendering (orderChildrenByPinned)
+ */
+class ColumnStructureModel {
+  /**
+   * Constructor for ColumnStructureModel.
+   *
+   * @param {string} key - Unique key for the column.
+   * @param {number} level - Row level of this column (root uses ROOT_LEVEL).
+   * @param {ColumnStructureModel} [parent] - Optional parent node.
+   * @param {string} [label] - Optional display label for the column.
+   * @param {VegaTablePinnedType} [pinned] - Optional pinned metadata ('left'|'right'|null).
+   */
+  constructor(key, level, parent, label, pinned) {
+    this.key = key;
+    this.level = level;
+    this.parent = parent;
+    this.label = label;
+    this.pinned = pinned;
+    this.leaves = [];
+    this.orderedChildren = [];
+    this.iteratorCacheMap = new Map();
+  }
+  /**
+   * Creates the root ColumnStructureModel from column configs.
+   *
+   * @param {VegaTableColumnConfig[]} columnsConfig - Array of column configs.
+   * @param {Nullable<VegaTableGroupColumnConfig[]>} groupColumnConfig - Optional grouping configuration.
+   * @returns {ColumnStructureModel} Root column structure model.
+   */
+  static from(columnsConfig, groupColumnConfig) {
+    const rootModel = new ColumnStructureModel(this.ROOT_KEY, ColumnStructureModel.ROOT_LEVEL);
+    if (groupColumnConfig) {
+      rootModel.children = this.fromGroupColumns(rootModel, groupColumnConfig);
+      return rootModel;
+    }
+    else if (columnsConfig) {
+      rootModel.children = columnsConfig.map((column) => new ColumnStructureModel(column.key || column.prop || column.label, 0, rootModel, null, column.pinned));
+      return rootModel;
+    }
+    else {
+      rootModel.children = [];
+      return rootModel;
+    }
+  }
+  /**
+   * Recursively creates ColumnStructureModel children from group column configs.
+   *
+   * @param {ColumnStructureModel} parent - Parent node for the created children.
+   * @param {VegaTableGroupColumnConfig[]} groupColumns - Array of group column configs.
+   * @param {number} level - Current row level.
+   * @returns {ColumnStructureModel[]} Array of child column structure models.
+   */
+  static fromGroupColumns(parent, groupColumns, level = 0) {
+    if (groupColumns && groupColumns.length > 0) {
+      return groupColumns.map((groupColumn) => {
+        if (isVegaTableColumnGroupingModelType(groupColumn)) {
+          const current = new ColumnStructureModel(groupColumn.key, level, parent, groupColumn.label, groupColumn.pinned);
+          current.children = this.fromGroupColumns(current, groupColumn.children, level + 1);
+          return current;
+        }
+        else {
+          return new ColumnStructureModel(groupColumn.key, level, parent);
+        }
+      });
+    }
+    return [];
+  }
+  /**
+   * Generates an array of VegaTableColumnConfig for all leaf columns.
+   *
+   * @param {VegaTableColumnConfig[]} columns - Array of all column configs.
+   * @returns {VegaTableColumnConfig[]} Array of configs for leaf columns.
+   */
+  generateColumnConfigByLeaves(columns) {
+    return this.getLeaves().map((leaf) => columns.find((column) => column.key === leaf.key || column.prop === leaf.key || column.label === leaf.key));
+  }
+  /**
+   * Compute the maximum depth (highest level value) under this node.
+   * This is useful to determine the number of header rows required for rendering.
+   *
+   * @returns {number} Maximum level found in the subtree (or 0 when empty).
+   */
+  getMaxDepth() {
+    const models = this.dfsIterator();
+    if (models.length === 0) {
+      return 0;
+    }
+    return Math.max(...models.map((model) => model.level)) + 1;
+  }
+  /**
+   * Checks if this subtree contains any group (non-leaf) columns.
+   *
+   * @returns {boolean} True if any descendant is a group column.
+   */
+  hasGroupColumn() {
+    return !!this.children.find((model) => !model.isLeaf());
+  }
+  /**
+   * Checks if this subtree contains any left pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasLeftPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'left');
+  }
+  /**
+   * Checks if this subtree contains any right pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasRightPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'right');
+  }
+  /**
+   * Checks if this node is a leaf (no children).
+   *
+   * @returns {boolean} True when this node has no children.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+  /**
+   * Return an array of nodes for this subtree using the specified traversal mode.
+   *
+   * Currently only depth-first search ('dfs') is supported. The returned array is
+   * cached per-mode to avoid repeated traversal costs.
+   *
+   * @param {IteratorMode} mode - Traversal mode to use. Defaults to 'dfs'.
+   * @returns {ColumnStructureModel[]} Array of ColumnStructureModel nodes in traversal order.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    return [];
+  }
+  /**
+   * Gets all leaf nodes in the subtree, with caching.
+   *
+   * Subsequent calls return the cached array until the underlying model is rebuilt.
+   *
+   * @returns {ColumnStructureModel[]} Array of leaf column models.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.dfsIterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * For root nodes, returns children ordered by pinned type (left, none, right).
+   * For non-root nodes, returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of child column models.
+   */
+  getOrderedChildren() {
+    if (!this.isRoot())
+      return this.children;
+    return this.orderedChildren;
+  }
+  /**
+   * Orders root children by pinned type (left, none, right) and caches the result.
+   *
+   * For non-root nodes this method returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of ordered child column models.
+   */
+  orderChildrenByPinned() {
+    if (!this.isRoot())
+      return this.children;
+    if (this.orderedChildren.length > 0) {
+      return this.orderedChildren;
+    }
+    const leftPinned = [];
+    const noPinned = [];
+    const rightPinned = [];
+    this.children.forEach((child) => {
+      if (child.pinned === 'left') {
+        leftPinned.push(child);
+      }
+      else if (child.pinned === 'right') {
+        rightPinned.push(child);
+      }
+      else {
+        noPinned.push(child);
+      }
+    });
+    const children = [...leftPinned, ...noPinned, ...rightPinned];
+    this.orderedChildren = children;
+    return children;
+  }
+  /**
+   * Checks if this node is the root node.
+   *
+   * @returns {boolean} True if root node, false otherwise.
+   */
+  isRoot() {
+    return this.level === ColumnStructureModel.ROOT_LEVEL;
+  }
+  /**
+   * Performs a depth-first traversal of the column structure.
+   *
+   * The traversal respects root-child pinned ordering (left/no/right) for the root node.
+   * Results are cached per-node to avoid repeated recursion costs.
+   *
+   * @returns {ColumnStructureModel[]} Array of all nodes in DFS order.
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    const children = this.orderChildrenByPinned();
+    if (!this.isRoot()) {
+      localResult.push(this);
+    }
+    if (children && children.length > 0) {
+      children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+}
+ColumnStructureModel.ROOT_LEVEL = -1;
+ColumnStructureModel.ROOT_KEY = '#root-model#';
+
+var __decorate$t = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+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$t([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "host", void 0);
+__decorate$t([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "columns", void 0);
+__decorate$t([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
+__decorate$t([
+  MapToComponentField({ writable: true })
+], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
+__decorate$t([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
+__decorate$t([
+  MapToComponentMethod('watchColumns')
+], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
+__decorate$t([
+  MapToComponentMethod('watchGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
+
+/**
+ * ColumnRenderInputModel
+ *
+ * Render-time representation of a column or group node used by header/body renderers.
+ * Built from a ColumnStructureModel tree, it carries computed layout metadata required
+ * for rendering and pinned/sticky calculations (colSpan, rowSpan, pinned boundaries, etc).
+ *
+ * Instances form a forest (root-level nodes in an array) that mirrors the structure model
+ * but contains additional render-specific properties and parent/child links for renderers.
+ */
+class ColumnRenderInputModel {
+  /**
+   * Create a new render input node.
+   *
+   * @param {string} key - Unique key (matches ColumnStructureModel.key).
+   * @param {string} label - Optional display label (from structure model).
+   * @param {VegaTablePinnedType} pinned - Pinned type for this node ('left' | 'right' | null).
+   * @param {Nullable<number>} colSpan - Number of visual columns spanned by this node's subtree.
+   * @param {Nullable<number>} rowSpan - Number of header rows this node should span.
+   * @param {boolean} isViewStart - True when this node is the start of a visible view range.
+   * @param {boolean} isViewEnd - True when this node is the end of a visible view range.
+   * @param {boolean} isLeftEndPinned - True when node is last left-pinned sibling.
+   * @param {boolean} isRightStartPinned - True when node is first right-pinned sibling.
+   * @param {boolean} isNoPinnedEnd - True when node is last non-pinned sibling.
+   * @param {boolean} headHasGroupColumn - Header contains group columns (affects rowSpan).
+   * @param {boolean} headHasPinnedColumn - Header contains pinned columns.
+   * @param {number} headMaxDepth - Maximum header depth (number of header rows).
+   * @param {number} level - Level/index of this node within header rows (0-based).
+   * @param {number} columnIndex - Sequential leaf index (used for ordering).
+   * @param {Nullable<ColumnRenderInputModel>} parent - Parent render input node (null for root-level).
+   * @param {ColumnRenderInputModel[]} children - Child render input nodes.
+   */
+  constructor(key, label, pinned, colSpan, rowSpan, isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, headHasGroupColumn, headHasPinnedColumn, headMaxDepth, level, columnIndex, parent, children = []) {
+    this.key = key;
+    this.label = label;
+    this.pinned = pinned;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.isViewStart = isViewStart;
+    this.isViewEnd = isViewEnd;
+    this.isLeftEndPinned = isLeftEndPinned;
+    this.isRightStartPinned = isRightStartPinned;
+    this.isNoPinnedEnd = isNoPinnedEnd;
+    this.headHasGroupColumn = headHasGroupColumn;
+    this.headHasPinnedColumn = headHasPinnedColumn;
+    this.headMaxDepth = headMaxDepth;
+    this.level = level;
+    this.columnIndex = columnIndex;
+    this.parent = parent;
+    this.children = children;
+    this.iteratorCacheMap = new Map();
+    this.leaves = [];
+  }
+  /**
+   * Build a forest of ColumnRenderInputModel nodes from a ColumnStructureModel root.
+   *
+   * @param {ColumnStructureModel} rootModel - Root ColumnStructureModel that supplies tree and level data.
+   * @returns {ColumnRenderInputModel[]} Array of root-level ColumnRenderInputModel nodes (the render forest).
+   */
+  static from(rootModel) {
+    const renderInputs = [];
+    const parentStack = [];
+    const maxLevel = rootModel.getMaxDepth();
+    const hasGroupColumn = rootModel.hasGroupColumn();
+    const hasPinnedColumn = rootModel.hasLeftPinnedColumn() || rootModel.hasRightPinnedColumn();
+    let columnIndex = 0;
+    // Iterate structure model (DFS by default) and construct render nodes.
+    rootModel.iterator().forEach((model) => {
+      const parent = model.level > 0 ? parentStack[model.level - 1] : null;
+      const isParentStart = hasGroupColumn && this.isParentStart(model);
+      const isParentEnd = hasGroupColumn && this.isParentEnd(model);
+      const renderInput = new ColumnRenderInputModel(model.key, model.label, parent ? parent.pinned : model.pinned, hasGroupColumn ? this.getColSpan(model) : null, hasGroupColumn ? (model.isLeaf() ? maxLevel - model.level : 1) : null, parent ? parent.isViewStart && isParentStart : isParentStart, parent ? parent.isViewEnd && isParentEnd : isParentEnd, parent
+        ? parent.isLeftEndPinned && isParentEnd
+        : hasPinnedColumn && this.isLeftEndPinned(model), parent
+        ? parent.isRightStartPinned && isParentStart
+        : hasPinnedColumn && this.isRightStartPinned(model), parent ? parent.isNoPinnedEnd && isParentEnd : hasPinnedColumn && this.isNoPinnedEnd(model), hasGroupColumn, hasPinnedColumn, maxLevel, model.level, columnIndex, parent);
+      // Attach to parent if present, otherwise add to root-level array.
+      parent ? parent.children.push(renderInput) : renderInputs.push(renderInput);
+      // Maintain parent stack keyed by level to allow next nodes to find their parent.
+      parentStack[model.level] = renderInput;
+      parentStack.length = model.level + 1;
+      // Increment leaf index when encountering a leaf structure node.
+      if (model.isLeaf())
+        columnIndex++;
+    });
+    return renderInputs;
+  }
+  /**
+   * True when the provided structure model is the last left-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for left-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last left-pinned sibling.
+   */
+  static isLeftEndPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'left');
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided structure model is the first right-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for right-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first right-pinned sibling.
+   */
+  static isRightStartPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'right');
+    return siblings[0] === model;
+  }
+  /**
+   * True when the provided structure model is the last non-pinned sibling in its parent's children.
+   * Useful to handle the 'no-pinned-end' condition.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last non-pinned sibling.
+   */
+  static isNoPinnedEnd(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => !child.pinned);
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided model is the first child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first child.
+   */
+  static isParentStart(model) {
+    return model.parent.getOrderedChildren()[0] === model;
+  }
+  /**
+   * True when the provided model is the last child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last child.
+   */
+  static isParentEnd(model) {
+    const parentChildren = model.parent.getOrderedChildren();
+    return parentChildren[parentChildren.length - 1] === model;
+  }
+  /**
+   * Compute a node's colSpan by iterating its subtree and counting the maximum number
+   * of nodes present at any single level (visual column span).
+   *
+   * @param {ColumnStructureModel} mode - ColumnStructureModel node to examine.
+   * @returns {number} Number of visual columns spanned by the node.
+   */
+  static getColSpan(mode) {
+    const children = mode.iterator();
+    const rowMap = {};
+    children.forEach((node) => {
+      rowMap[node.level] = (rowMap[node.level] || 0) + 1;
+    });
+    return Math.max(...Object.values(rowMap));
+  }
+  /**
+   * Return cached leaf render nodes for this subtree.
+   * Caches the result on first call and returns cached array on subsequent calls.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of leaf render input nodes.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.iterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * Generic iterator that supports traversal modes ('dfs' currently implemented).
+   *
+   * @param {IteratorMode} [mode='dfs'] - Iterator mode ('dfs' | 'bfs').
+   * @returns {ColumnRenderInputModel[]} Traversal-ordered array of nodes.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    // Future: implement BFS mode here.
+    return [];
+  }
+  /**
+   * Depth-first pre-order traversal of this node and its descendants.
+   * Caches the result for the 'dfs' mode to avoid repeated recursion.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of nodes in DFS order (includes this node).
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    localResult.push(this);
+    if (this.children && this.children.length > 0) {
+      this.children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+  /**
+   * True when this render node has no children (visual leaf).
+   *
+   * @returns {boolean} True when node is a leaf.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+}
+
+var __decorate$s = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+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$s([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "host", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate$s([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderInputController.prototype, "connectedCallback", null);
+__decorate$s([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
+__decorate$s([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderInputController.prototype, "componentWillLoad", null);
+__decorate$s([
+  MapToComponentMethod('watchColumnStructureModel')
+], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);
+
+var __decorate$r = (undefined && undefined.__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;
+};
+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() {
+  }
+  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$q([
+__decorate$r([
   MapToComponentField()
-], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$q([
-  MapToComponentField({ writable: true })
-], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$q([
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate$r([
   InjectVegaSlimmer()
-], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$q([
-  MapToComponentMethod('connectedCallback')
-], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$q([
-  MapToComponentMethod('disconnectedCallback')
-], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$q([
-  MapToComponentMethod('componentWillLoad')
-], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$q([
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$r([
   MapToComponentMethod('componentDidLoad')
-], VegaTableRenderModeController.prototype, "componentDidLoad", null);
-
-const VegaTableRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'IS_USING_TEMPLATE',
-    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
-    /**
-     * The function checks if the length `dataSource` property of the `host` element is equal to '0'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.dataSource.length === 0,
-  },
-  {
-    payloadKey: 'IS_USING_DATA_SOURCE',
-    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
-    /**
-     * The function checks if the length `dataSource` property of the `host` element is not equal to '0'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.dataSource.length > 0,
-  },
-];
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate$r([
+  MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
 
-const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header{box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}";
+const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header{box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}:host(.is-group-table) .vega-table-scrollable-container{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-width:1px;border-style:solid}:host(.is-group-table.density-relaxed) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-default) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-compact) .vega-table-scrollable-container{border-radius:4px}:host(.is-pinned-table) table{min-width:max-content}";
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__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);
@@ -2349,6 +3285,9 @@ const VegaTable = class {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
+    this.vegaTableRenderInputController = new VegaTableRenderInputController();
+    this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
     this.vegaTableRenderer = new VegaTableRenderer();
     this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
     this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
@@ -2533,8 +3472,12 @@ const VegaTable = class {
   }
   watchTemplateRenderMode() {
   }
+  watchColumnStructureModel() {
+  }
   watchColumns() {
   }
+  watchGroupColumns() {
+  }
   watchDataSource() {
   }
   watchRowSelection() {
@@ -2765,7 +3708,9 @@ const VegaTable = class {
     "currentPage": ["watchCurrentPage"],
     "isSelectedAll": ["watchSelectedAll"],
     "isTemplateRenderMode": ["watchTemplateRenderMode"],
+    "columnStructureModel": ["watchColumnStructureModel"],
     "columns": ["watchColumns"],
+    "groupColumns": ["watchGroupColumns"],
     "dataSource": ["watchDataSource"],
     "rowSelection": ["watchRowSelection"],
     "rowExpandable": ["watchRowExpandable"],
@@ -2779,125 +3724,134 @@ const VegaTable = class {
     "scrollConfig": ["watchScrollConfig"]
   }; }
 };
-__decorate$p([
+__decorate$q([
   InjectVegaGlobalSlimmer()
 ], VegaTable.prototype, "globalSlimmers", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "translationSlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
-__decorate$p([
+__decorate$q([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);
+__decorate$q([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderInputController", void 0);
+__decorate$q([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePinnedRenderer", void 0);
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableExpandRowController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableDataSourceController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableEditableController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableSortController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "eventsPrevent", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "changeEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectChangeEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "densityNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
 VegaTable.style = vegaTableCss;
 
 const vegaTableBodyCss = ":host{display:contents}";
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__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);
@@ -2919,13 +3873,13 @@ const VegaTableBody = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$o([
+__decorate$p([
   InjectVegaGlobalSlimmer()
 ], VegaTableBody.prototype, "globalSlimmers", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableBody.style = vegaTableBodyCss;
@@ -2974,7 +3928,7 @@ const generateColSpan = (columnLength, withMultipleSelection) => {
   return columnLength + (withMultipleSelection ? 2 : 1);
 };
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__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;
@@ -2993,15 +3947,103 @@ class VegaTableCellStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'rowDivider',
+          parentStateName: 'rowDivider',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (rowDivider) => {
+            const row = this.host.parentElement;
+            const body = row.parentElement;
+            if (row && body) {
+              const lastRow = body.querySelector('vega-table-row:last-of-type');
+              this.rowDivider = rowDivider && lastRow !== row;
+            }
+          },
+        },
+        {
+          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-cell:last-of-type');
+              this.columnDivider = columnDivider && lastCell !== this.host;
+            }
+          },
+        },
+        {
+          subStateName: 'clickable',
+          parentStateName: 'rowClickable',
+        },
       ],
     });
   }
 }
-__decorate$n([
+__decorate$o([
+  MapToComponentField()
+], VegaTableCellStateController.prototype, "host", void 0);
+__decorate$o([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
+__decorate$o([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "rowDivider", void 0);
+__decorate$o([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "columnDivider", void 0);
+__decorate$o([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "clickable", void 0);
+
+var __decorate$n = (undefined && undefined.__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;
+};
+/**
+ * Controller for the table row states
+ */
+class VegaTableRowStateController$1 extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table-row',
+      subStates: [
+        {
+          subStateName: 'checked',
+          parentStateName: 'checked',
+        },
+        {
+          subStateName: 'expanded',
+          parentStateName: 'expanded',
+        },
+      ],
+    });
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaTableCell.componentWillLoad}
+   */
+  componentWillRender() {
+    const row = this.host.parentElement;
+    this.striped = row && row.dataset.striped === 'striped';
+  }
+}
+__decorate$n([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController$1.prototype, "checked", void 0);
+__decorate$n([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController$1.prototype, "striped", void 0);
+__decorate$n([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController$1.prototype, "expanded", void 0);
+__decorate$n([
+  MapToComponentMethod('componentWillRender')
+], VegaTableRowStateController$1.prototype, "componentWillRender", null);
 
-const vegaTableCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}: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}.vega-table-cell{padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-table-cell.break-word{word-break:break-word}td{display:block;padding:0px}td.v-text-center{text-align:center}td.v-text-left{text-align:left}td.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}.vega-table-cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vega-table-cell-scroll{overflow:auto}";
+const vegaTableCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}.vega-table-cell{padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-table-cell.break-word{word-break:break-word}td{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}td.v-text-left{text-align:left}td.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}.vega-table-cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.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}";
 
 var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3018,6 +4060,7 @@ const VegaTableCell = class {
     registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaTableCellStateController = new VegaTableCellStateController();
+    this.vegaTableRowStateController = new VegaTableRowStateController$1();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -3034,14 +4077,43 @@ const VegaTableCell = class {
     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" }, h("div", { class: overflowClass }, h("slot", null)))), this.host);
+        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'));
   }
   get host() { return getElement(this); }
 };
@@ -3051,6 +4123,9 @@ __decorate$m([
 __decorate$m([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
+__decorate$m([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaTableRowStateController", void 0);
 __decorate$m([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
@@ -3074,10 +4149,14 @@ 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$l([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "host", void 0);
 __decorate$l([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
@@ -3341,7 +4420,7 @@ __decorate$h([
   MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
 
-const vegaTableExpandRowCss = ":host{display:contents}:host([data-striped=striped]) .vega-table-expanded-row:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.vega-table-expanded-row.expanded.checked{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}";
+const vegaTableExpandRowCss = ":host{display:contents}:host([data-striped=striped]) .vega-table-expanded-row:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.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}";
 
 var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3530,6 +4609,18 @@ 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;
+            }
+          },
+        },
       ],
     });
   }
@@ -3537,6 +4628,9 @@ class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
 __decorate$d([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
+__decorate$d([
+  MapToComponentField({ writable: true })
+], VegaTableHeadCellStateController.prototype, "columnDivider", void 0);
 
 const arrowUpArrowDown = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M489 377c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55V56c0-13.3-10.7-24-24-24s-24 10.7-24 24V398.1l-55-55c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l96 96c9.4 9.4 24.6 9.4 33.9 0l96-96zM137 39c-9.4-9.4-24.6-9.4-33.9 0L7 135c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55V456c0 13.3 10.7 24 24 24s24-10.7 24-24V113.9l55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L137 39z"/></svg>`,
@@ -3671,7 +4765,7 @@ __decorate$b([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableHeadCellSortConfigController.prototype, "componentWillLoad", null);
 
-const vegaTableHeadCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}: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}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{display:block;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}";
+const vegaTableHeadCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{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;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}: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}";
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3728,15 +4822,22 @@ const VegaTableHeadCell = class {
         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,
+        'sortable': !!this.sorter,
+        'column-divider': this.columnDivider,
+      }, style: { width: this.width } }, 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,
-      }, style: { width: this.width } }, h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig), h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) }, h("span", { class: "vega-table-column-label" }, h("slot", null)), this.sortIconRenderer.render()))), this.host);
+      } }, 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)), this.sortIconRenderer.render()))), this.host);
   }
   get host() { return getElement(this); }
 };
@@ -3781,10 +4882,13 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
 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) => {
@@ -3802,8 +4906,11 @@ 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();
@@ -3833,12 +4940,49 @@ 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$9([
@@ -4029,7 +5173,7 @@ __decorate$7([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);
 
-const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-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}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-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}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.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}";
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4590,7 +5734,7 @@ __decorate$1([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);
 
-const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;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){background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td,.checked ::slotted(vega-table-cell){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){background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td,:host tr.expand-row ::slotted(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 tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td,:host(.row-divider:not(:last-of-type)) ::slotted(vega-table-cell){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{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}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}: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{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{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 tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}: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}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4620,10 +5764,16 @@ const VegaTableRow = class {
     this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.checkedNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'checked', 'watchChecked');
+    this.expandedNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'expanded', 'watchExpanded');
     this.currentBreakpoint = getCurrentBreakpoint();
   }
   watchSelectionType() {
   }
+  watchChecked() {
+  }
+  watchExpanded() {
+  }
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
@@ -4634,7 +5784,9 @@ const VegaTableRow = class {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "selectionType": ["watchSelectionType"]
+    "selectionType": ["watchSelectionType"],
+    "checked": ["watchChecked"],
+    "expanded": ["watchExpanded"]
   }; }
 };
 __decorate([
@@ -4670,6 +5822,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "checkedNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "expandedNotifySlimmer", void 0);
 VegaTableRow.style = vegaTableRowCss;
 
 export { VegaTable as vega_table, VegaTableBody as vega_table_body, VegaTableCell as vega_table_cell, VegaTableExpandRow as vega_table_expand_row, VegaTableHead as vega_table_head, VegaTableHeadCell as vega_table_head_cell, VegaTableHeadRow as vega_table_head_row, VegaTableRow as vega_table_row };