@heartlandone/vega 2.97.0 → 2.99.0

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

@@ -3,43 +3,43 @@ import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapTo
 import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
 import { g as getValueByPath } from './object-0c277f57.js';
+import { e as BreakpointKeys } from './ui-93922c59.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { m as TABLE_EXPAND_ROW, n as TABLE_ROW_SELECTION, o as TABLE_ROW_SELECTION_ALL, p as TABLE_ROW_CLICK, S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-1c86e974.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as findParent, a as arrayToClassString, m as extractNumberFromString } from './ui-d73f756a.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { U as VegaInternalTableRowExpand, W as VegaInternalTableRowSelect, X as VegaInternalTableRowSelectAll, Y as VegaInternalVegaTableRenderInputChange, Z as VegaInternalColumnHeadRowRenderInputRIC, _ as VegaInternalColumnHeadCellRenderInputRIC, $ as VegaInternalColumnBodyCellRenderInputRIC, a0 as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-827eb1ce.js';
+import { U as VegaInternalTableRowExpand, W as VegaInternalTableRowSelect, X as VegaInternalTableRowSelectAll, Y as VegaInternalVegaTableRenderInputChange, Z as VegaInternalColumnHeadRowRenderInputRIC, _ as VegaInternalColumnHeadCellRenderInputRIC, $ as VegaInternalColumnBodyCellRenderInputRIC, a0 as VegaInternalTableHeadTemplateStructureChange, a1 as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-86fce049.js';
 import { a as VegaClick, d as VegaChange, _ as VegaPageSizeChange, e as VegaExpand, a2 as VegaSelectChange, a3 as VegaSelectAllChange, a4 as VegaRowClick, a5 as VegaRowExpand, a6 as VegaRowDragDrop, a7 as VegaRowSelect, a8 as VegaRowSelectAll } from './vega-event-id-f55f6977.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-f19b601c.js';
-import { i as isNonNullable, s as isBreakpointsTokenType, ap as isVegaTableColumnGroupingModelType } from './type-guard-f2624334.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-dec87e46.js';
+import { i as isNonNullable, s as isBreakpointsTokenType, ap as isVegaTableColumnGroupingModelType } from './type-guard-6fc96870.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
 import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
-import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
+import { T as TagNameMutationFilter, a as TagNameAndAttributeMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-0f72ce74.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-23b7d0e8.js';
 import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
 import { I as ImmutableMap } from './immutable-map-4fe22b11.js';
-import { T as TranslationSlimmer } from './translation-slimmer-ee0f0e76.js';
+import { T as TranslationSlimmer } from './translation-slimmer-ef970ffc.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-64532d94.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-722f6b92.js';
 import { F as FeatureFlag } from './feature-flag-controller-3fd04ea9.js';
 import { B as Breakpoints } from './breakpoints-d9faf11c.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
-import './ui-93922c59.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
 import './array-7888f339.js';
 import './typography-19c3b9be.js';
-import './internal-translation-controller-fac22598.js';
+import './internal-translation-controller-b33430c6.js';
 import './try-get-document-bef0f526.js';
 import './internal-vega-event-manager-2ecc9186.js';
 import './vega-env-manager-8f8dc473.js';
@@ -406,7 +406,7 @@ class ColumnRenderInputModel {
   }
 }
 
-var __decorate$V = (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;
@@ -533,19 +533,19 @@ class VegaTableCellRenderer extends VegaSlimmer {
     return ColumnRenderInputModel.withMergedBoundaries(baseInput, spannedLeaves);
   }
 }
-__decorate$V([
+__decorate$X([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$V([
+__decorate$X([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$V([
+__decorate$X([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
-__decorate$V([
+__decorate$X([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
-__decorate$V([
+__decorate$X([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableBodyColSpanController", void 0);
 
@@ -586,16 +586,16 @@ function normalizeSpan(rawSpan) {
  * Walk rightward from the starting leaf to find the widest legal span.
  *
  * Stops (and returns a clamp reason) when the span would either run past the end of the
- * row or cross a pinned ↔ unpinned column boundary (which would break sticky positioning).
- * Breakpoint-hidden columns are intentionally **not** a stop condition — the span mirrors
- * across them (matching header group colSpan).
+ * row, cross a pinned ↔ unpinned column boundary, or encounter a breakpoint-hidden column.
+ * Breakpoint-hidden columns are a shrink trigger (the span stops before them).
  *
  * @param {number} declared - The declared span requested by the column.
  * @param {number} leafIndex - Index of the starting leaf in the flattened render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {MaxSpan} The widest legal span plus the clamp reason (null when unconstrained).
  */
-function computeMaxSpan(declared, leafIndex, allLeaves) {
+function computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint) {
   var _a, _b;
   const startPinned = (_a = allLeaves[leafIndex]) === null || _a === void 0 ? void 0 : _a.pinned;
   let span = 1;
@@ -607,6 +607,13 @@ function computeMaxSpan(declared, leafIndex, allLeaves) {
         clampReason: `extends past the end of the row (${allLeaves.length} columns total)`,
       };
     }
+    // Reject if the next column is hidden at the current breakpoint.
+    if (isHiddenAtBreakpoint[leafIndex + offset]) {
+      return {
+        span,
+        clampReason: null, // Breakpoint-hidden stop is not a config-error warning — it is legitimate responsive hiding.
+      };
+    }
     // Reject if the next column is in a different pinned group.
     if (nextLeaf.pinned !== startPinned) {
       return {
@@ -636,11 +643,10 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
 /**
  * Resolve the effective body-cell colspan for a single source-data row cell.
  *
- * Clamps the declared span so it never runs past the end of the row nor crosses a
- * pinned ↔ unpinned column boundary. Structural clamps (end-of-row / pinned boundary) emit a
- * warning once per column key (tracked via the caller-supplied {@link warnedKeys} set).
- * Breakpoint-hidden columns are **not** clamped — the span mirrors across a `display: none`
- * column (matching header group colSpan) so the body grid stays column-aligned with the header.
+ * Clamps the declared span so it never runs past the end of the row, crosses a
+ * pinned ↔ unpinned column boundary, or encounters a breakpoint-hidden column (shrink before it).
+ * Structural clamps (end-of-row / pinned boundary) emit a warning once per column key
+ * (tracked via the caller-supplied {@link warnedKeys} set). Breakpoint-hidden stops are silent.
  *
  * @param {VegaTableColumnConfig} column - The column configuration for the spanning cell.
  * @param {VegaTableDataSourceItem} record - The row data record.
@@ -648,14 +654,15 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
  * @param {number} leafIndex - Index of this column in the flattened leaf render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
  * @param {Set<string>} warnedKeys - Per-instance set tracking column keys that have already received a clamping warning.
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {BodyColSpanResult} Resolved spanning metadata for the cell.
  */
-function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys) {
+function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys, isHiddenAtBreakpoint) {
   var _a, _b, _c;
   const declared = getDeclaredSpan(column, record, rowIndex);
   if (!declared || declared <= 1)
     return NO_SPAN;
-  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves);
+  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint);
   const effectiveSpan = Math.min(declared, span);
   if (clampReason && effectiveSpan < declared) {
     const colKey = (_c = (_b = (_a = column.key) !== null && _a !== void 0 ? _a : column.prop) !== null && _b !== void 0 ? _b : column.label) !== null && _c !== void 0 ? _c : '';
@@ -669,7 +676,7 @@ function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warn
   };
 }
 
-var __decorate$U = (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;
@@ -685,6 +692,10 @@ var __decorate$U = (undefined && undefined.__decorate) || function (decorators,
  *
  * The structural shape (a {@link VegaSlimmer} controller reading component fields) mirrors the
  * main-branch `VegaTableExpandRowController` paradigm.
+ *
+ * Breakpoint-aware: maps the current breakpoint from the parent vega-table and computes
+ * which columns are hidden at that breakpoint so the colspan resolver can shrink before
+ * breakpoint-hidden columns (instead of mirroring across them).
  */
 class VegaTableBodyColSpanController extends VegaSlimmer {
   constructor() {
@@ -712,6 +723,8 @@ class VegaTableBodyColSpanController extends VegaSlimmer {
       this.warnedColSpanKeys.clear();
       this.lastWarnedColumnsRef = this.columns;
     }
+    // Compute per-leaf hidden state based on current breakpoint.
+    const isHiddenAtBreakpoint = leaves.map((leaf) => this.isColumnHiddenAtBreakpoint(leaf));
     const results = new Array(leaves.length).fill(null);
     let skipCount = 0;
     leaves.forEach((leaf, leafIndex) => {
@@ -722,7 +735,7 @@ class VegaTableBodyColSpanController extends VegaSlimmer {
       }
       const column = this.findColumn(leaf);
       const result = column
-        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys)
+        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys, isHiddenAtBreakpoint)
         : { htmlColspan: 1, skipCount: 0 };
       results[leafIndex] = result;
       skipCount = result.skipCount;
@@ -740,12 +753,35 @@ class VegaTableBodyColSpanController extends VegaSlimmer {
       column.prop === renderInput.key ||
       column.label === renderInput.key);
   }
+  /**
+   * Determine whether a leaf is hidden at the current breakpoint.
+   *
+   * A leaf is hidden when the column's breakpoint threshold is greater than the current breakpoint.
+   * Breakpoint order: 'default' < 'S' < 'M' < 'L' < 'XL'.
+   * Example: if currentBreakpoint is 'S' and column.breakpoint is 'M', the column is hidden (S < M).
+   *
+   * @param {ColumnRenderInputModel} leaf - The leaf render input to check.
+   * @returns {boolean} True if the leaf is hidden at the current breakpoint.
+   */
+  isColumnHiddenAtBreakpoint(leaf) {
+    const column = this.findColumn(leaf);
+    if (!column || !column.breakpoint) {
+      return false; // No breakpoint = never hidden.
+    }
+    const currentBreakpointIndex = BreakpointKeys.indexOf(this.currentBreakpoint);
+    const columnBreakpointIndex = BreakpointKeys.indexOf(column.breakpoint);
+    // Column is hidden when current breakpoint is smaller than the column's breakpoint threshold.
+    return currentBreakpointIndex < columnBreakpointIndex;
+  }
 }
-__decorate$U([
+__decorate$W([
   MapToComponentField()
 ], VegaTableBodyColSpanController.prototype, "columns", void 0);
+__decorate$W([
+  MapToComponentField()
+], VegaTableBodyColSpanController.prototype, "currentBreakpoint", void 0);
 
-var __decorate$T = (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;
@@ -1009,62 +1045,62 @@ class VegaTableExpandRowController extends VegaSlimmer {
   }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowController.prototype, "expandableRows", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "currentData", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowController.prototype, "componentWillLoad", null);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
-__decorate$T([
+__decorate$V([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableExpandRowController.prototype, "watchCurrentData", null);
 
-var __decorate$S = (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;
@@ -1403,68 +1439,68 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
       this.host === findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$S([
+__decorate$U([
   MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
 
-var __decorate$R = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1604,41 +1640,41 @@ class VegaTableDataSourceController extends VegaSlimmer {
     }
   }
 }
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-var __decorate$Q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1681,41 +1717,41 @@ class VegaTableBodyRenderer extends VegaSlimmer {
     return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableExpandRowController", void 0);
 
-var __decorate$P = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1778,32 +1814,32 @@ class VegaTableHeaderRenderer extends VegaSlimmer {
     return this.showHeader && h("vega-table-head", null, this.renderHeaderRows());
   }
 }
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$O = (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);
   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;
@@ -1869,19 +1905,19 @@ class VegaTablePaginationRenderer extends VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
@@ -1908,7 +1944,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, chil
     onScroll: handleVerticalScroll }, children));
 };
 
-var __decorate$N = (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);
   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;
@@ -1941,20 +1977,20 @@ class VegaTableScrollContainerRenderer extends VegaSlimmer {
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "host", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$M = (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;
@@ -2000,68 +2036,68 @@ class VegaTableRenderer extends VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnStructureModel", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "showEditError", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "translationSlimmer", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "editingRows", void 0);
 
-var __decorate$L = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2125,23 +2161,23 @@ class VegaTablePaginationController extends VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$L([
+__decorate$N([
   MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$L([
+__decorate$N([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$L([
+__decorate$N([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$L([
+__decorate$N([
   MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$L([
+__decorate$N([
   MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$K = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
   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;
@@ -2370,55 +2406,55 @@ class VegaTableEditableController extends VegaSlimmer {
   }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "columns", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$K([
+__decorate$M([
   MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
@@ -2464,7 +2500,7 @@ class VegaTableSorter {
   }
 }
 
-var __decorate$J = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$L = (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;
@@ -2548,26 +2584,26 @@ class VegaTableSortController extends VegaSlimmer {
     });
   }
 }
-__decorate$J([
+__decorate$L([
   MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField()
 ], VegaTableSortController.prototype, "sortConfig", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);
 
-var __decorate$I = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$K = (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;
@@ -2602,26 +2638,26 @@ class VegaTableColGroupRenderer extends VegaSlimmer {
       h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "rowDraggable", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
 
-var __decorate$H = (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;
@@ -2806,68 +2842,68 @@ class VegaTableChildrenController extends VegaSlimmer {
     }
   }
 }
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowDivider", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$H([
+__decorate$J([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$H([
+__decorate$J([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableChildrenController.prototype, "watchCurrentData", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
-__decorate$H([
+__decorate$J([
   MapToComponentMethod('watchRowDivider')
 ], VegaTableChildrenController.prototype, "watchRowDivider", null);
 
-var __decorate$G = (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;
@@ -2907,29 +2943,29 @@ 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$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableBodyColSpanController", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowDivider", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$F = (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;
@@ -2985,25 +3021,25 @@ class VegaTableRenderModeController extends VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$F([
+__decorate$H([
   InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
@@ -3272,7 +3308,7 @@ class ColumnStructureModel {
 ColumnStructureModel.ROOT_LEVEL = -1;
 ColumnStructureModel.ROOT_KEY = '#root-model#';
 
-var __decorate$E = (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;
@@ -3280,7 +3316,7 @@ var __decorate$E = (undefined && undefined.__decorate) || function (decorators,
 };
 /**
  * Controller responsible for building and keeping the ColumnStructureModel in sync
- * with the component's `columns` and `groupColumns` properties.
+ * with data source and template-derived column configuration.
  *
  * This slimmer maps relevant component fields and lifecycle/watch hooks to
  * automatically rebuild the column structure when inputs change.
@@ -3308,36 +3344,46 @@ class VegaTableColumnStructureModelController extends VegaSlimmer {
     this.setColumnStructureModel();
   }
   /**
-   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
-   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   * Rebuilds the ColumnStructureModel when template-derived grouping changes.
+   */
+  watchTemplateGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current inputs.
+   * Template-derived grouping takes precedence over the public `groupColumns` input.
    */
   setColumnStructureModel() {
-    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
+    var _a;
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, (_a = this.templateGroupColumns) !== null && _a !== void 0 ? _a : this.groupColumns);
   }
 }
-__decorate$E([
-  MapToComponentField()
-], VegaTableColumnStructureModelController.prototype, "host", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "columns", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
-__decorate$E([
+__decorate$G([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "templateGroupColumns", void 0);
+__decorate$G([
   MapToComponentField({ writable: true })
 ], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
-__decorate$E([
+__decorate$G([
   MapToComponentMethod('watchColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
-__decorate$E([
+__decorate$G([
   MapToComponentMethod('watchGroupColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
+__decorate$G([
+  MapToComponentMethod('watchTemplateGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchTemplateGroupColumns", null);
 
-var __decorate$D = (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;
@@ -3439,6 +3485,17 @@ class VegaTableRenderInputController extends VegaSlimmer {
   addHeadCellRenderInputMap(headCell, renderInput) {
     this.headCellRenderInputMap.set(headCell, renderInput);
   }
+  /**
+   * Clear all head row and head cell render-input mappings.
+   *
+   * Used by template-mode lifecycle to invalidate stale grouped-header metadata
+   * before re-registering current mappings. In data-source mode the header renderer
+   * re-registers via ref callbacks each render, so stale entries are overwritten naturally.
+   */
+  clearHeadRenderInputMaps() {
+    this.headRowRenderInputMap.clear();
+    this.headCellRenderInputMap.clear();
+  }
   /**
    * Store body cell render input mapping for pinned cells (used to update sticky positions).
    *
@@ -3500,32 +3557,29 @@ class VegaTableRenderInputController extends VegaSlimmer {
     this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
   }
 }
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "host", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
-__decorate$D([
-  MapToComponentField()
-], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderInputController.prototype, "componentWillLoad", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('componentDidRender')
 ], VegaTableRenderInputController.prototype, "componentDidRender", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('watchColumnStructureModel')
 ], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);
 
-var __decorate$C = (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;
@@ -3556,6 +3610,9 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicRightDividerCells = new Set();
     this.dynamicLeftDividerCells = new Set();
     this.dynamicHideRightBorderCells = new Set();
+    // Authored template cells whose shadow <td> colspan was shrunk for breakpoint-hidden columns,
+    // tracked so the authored colspan can be restored when pinning is removed at runtime (VD-9768).
+    this.templateColspanSyncedCells = new Set();
     this.clearPinnedPositionsTaskQueue = new SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
@@ -3597,8 +3654,10 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
-    // if not have head row, it means no pinned, so no need to update
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    // if not have head row, it means no pinned, so no need to update.
+    // In template mode the authored rows live in light DOM (slotted), so resolve the row
+    // container root accordingly instead of always querying the table's shadow root.
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     // to avoid window resize before table rendered.
     // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
@@ -3629,6 +3688,18 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
         lastVisibleRightPinnedHeadCell = shadowCell;
       }
     });
+    // Track last visible left-pinned body cells per row for boundary class propagation.
+    // Declared before the template positioning pass so authored cells feed the same maps the
+    // shared dynamic-boundary logic below consumes (one update flow for both render modes).
+    const lastVisibleLeftPinnedBodyCells = new Map();
+    const firstVisibleRightPinnedBodyCells = new Map();
+    const lastVisibleRightPinnedBodyCells = new Map();
+    // Template mode has no JSX ref callbacks to populate the body-cell render-input map, and
+    // its rows live in light DOM. Position the authored body/foot leaf cells directly by zipping
+    // them with the leaf render inputs (respecting colSpan), reusing the shared positioning primitive.
+    if (this.isTemplateRenderMode) {
+      this.updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+    }
     // Remove stale entries (disconnected cells) left over from prior renders (e.g. after drag reorder).
     pinnedColumnBodyCellRenderInputMap.forEach((_, bodyCell) => {
       /* istanbul ignore next -- defensive cleanup for disconnected cells; jsdom always keeps cells connected */
@@ -3636,10 +3707,6 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
         pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
       }
     });
-    // Track last visible left-pinned body cells per row for boundary class propagation.
-    const lastVisibleLeftPinnedBodyCells = new Map();
-    const firstVisibleRightPinnedBodyCells = new Map();
-    const lastVisibleRightPinnedBodyCells = new Map();
     // Collect body cells whose shadow DOM is not yet ready (newly created cells).
     const unreadyCells = [];
     pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
@@ -3745,8 +3812,164 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
     return unreadyCells;
   }
+  /**
+   * Resolve the DOM root that holds the table rows.
+   *
+   * In data-source mode rows are rendered into the table's shadow root; in template mode the
+   * authored rows are slotted, so they live in the host's light DOM.
+   *
+   * @returns {ShadowRoot | HTMLElement} The container to query rows from.
+   */
+  getRowContainerRoot() {
+    return this.isTemplateRenderMode ? this.host : this.host.shadowRoot;
+  }
+  /**
+   * Position authored template body and foot leaf cells by zipping them with the leaf render
+   * inputs in authored order, advancing by each cell's colSpan. Also applies the pinned-boundary
+   * divider classes (mirroring the body cell's render()), since authored body/foot cells have no
+   * render-input of their own in template mode.
+   *
+   * @param {number} prevShadowThWidth - Aggregate width of leading fixed columns (table left padding).
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} nextShadowThWidth - Aggregate width of trailing fixed columns (table right padding).
+   */
+  updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    // Off-screen / jsdom renders report every width as 0; skip colspan sync there so we don't
+    // collapse every span to 1 (mirrors the data-source syncColspanForHiddenColumns guard).
+    const allLeafWidthsHidden = leafWidths.every((w) => w === 0);
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-row, vega-table-foot-row')
+      .forEach((row) => {
+      let leafIndex = 0;
+      Array.from(row.children).forEach((cell) => {
+        if (cell.tagName !== 'VEGA-TABLE-CELL' && cell.tagName !== 'VEGA-TABLE-FOOT-CELL')
+          return;
+        const leafCell = cell;
+        const renderInput = leafRenderInputs[leafIndex];
+        // Unlike data-source mode (resolveBodyColSpan), template mode positions the authored
+        // <td> as-is and intentionally does NOT clamp col-span at a pinned boundary: the
+        // consumer owns this literal DOM, so a col-span crossing pinned <-> unpinned is an
+        // invalid authoring choice (a cell cannot be both frozen and scrolling), not a case
+        // the component rewrites.
+        const colSpan = this.resolveCellColSpan(leafCell, renderInput);
+        if (renderInput) {
+          this.updateCellPinnedPosition(renderInput, leafCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+          this.applyTemplateLeafDividerClass(leafCell, leafRenderInputs.slice(leafIndex, leafIndex + colSpan));
+          this.syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden);
+          this.trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+        }
+        leafIndex += colSpan;
+      });
+    });
+  }
+  /**
+   * Record an authored template leaf cell's shadow cell as the last visible left-pinned / first &
+   * last visible right-pinned cell of its row, so the shared dynamic-boundary logic can shift the
+   * boundary divider onto it when the static boundary column is breakpoint-hidden.
+   *
+   * @param {HTMLElement} row - The authored body or foot row (used as the per-row grouping key).
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleLeftPinnedBodyCells - Per-row last visible left-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} firstVisibleRightPinnedBodyCells - Per-row first visible right-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleRightPinnedBodyCells - Per-row last visible right-pinned shadow cell.
+   */
+  trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    var _a;
+    const shadowCell = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell || shadowCell.getBoundingClientRect().width <= 0)
+      return;
+    if (renderInput.pinned === 'left') {
+      lastVisibleLeftPinnedBodyCells.set(row, shadowCell);
+    }
+    if (renderInput.pinned === 'right') {
+      if (!firstVisibleRightPinnedBodyCells.has(row)) {
+        firstVisibleRightPinnedBodyCells.set(row, shadowCell);
+      }
+      lastVisibleRightPinnedBodyCells.set(row, shadowCell);
+    }
+  }
+  /**
+   * Reduce an authored template pinned cell's shadow <td> colspan to the number of *visible*
+   * columns it spans. Breakpoint-hidden columns report width 0 but Chrome still counts them in the
+   * table grid, so without this a pinned span drifts out of column-alignment with the header
+   * (VD-9540). Only applies to pinned cells; skipped off-screen / in jsdom where every width is 0.
+   *
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {number} colSpan - The cell's originally declared colspan.
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {boolean} allLeafWidthsHidden - True when every leaf width is 0 (off-screen / jsdom).
+   */
+  syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden) {
+    var _a;
+    if (colSpan <= 1 || allLeafWidthsHidden)
+      return;
+    if (!['left', 'right'].includes(renderInput.pinned))
+      return;
+    const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowTd)
+      return;
+    const visibleColspan = this.countVisibleColspan(leafWidths, renderInput.columnIndex, colSpan);
+    shadowTd.setAttribute('colspan', String(visibleColspan));
+    if (visibleColspan !== colSpan) {
+      this.templateColspanSyncedCells.add(leafCell);
+    }
+    else {
+      this.templateColspanSyncedCells.delete(leafCell);
+    }
+  }
+  /**
+   * Restore the authored colspan on every template cell whose shadow <td> was shrunk by
+   * {@link syncTemplateLeafColspan}. Runs on cleanup so removing `pinned` at runtime does not leave
+   * a body/foot cell stuck at the breakpoint-shrunk colspan once positioning no longer runs (VD-9768).
+   */
+  restoreTemplateLeafColspan() {
+    this.templateColspanSyncedCells.forEach((leafCell) => {
+      var _a, _b;
+      const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      if (!shadowTd)
+        return;
+      const authoredColSpan = (_b = leafCell.colSpan) !== null && _b !== void 0 ? _b : 1;
+      if (authoredColSpan > 1) {
+        shadowTd.setAttribute('colspan', String(authoredColSpan));
+      }
+      else {
+        shadowTd.removeAttribute('colspan');
+      }
+    });
+    this.templateColspanSyncedCells.clear();
+  }
+  /**
+   * Apply the pinned-boundary divider classes to an authored template body/foot cell's shadow
+   * cell, merging boundary flags across the leaves the cell spans. Tracked in the dynamic sets so
+   * the next positioning pass clears and re-evaluates them (matching the data-source cleanup path).
+   *
+   * @param {HTMLVegaTableCellElement} cell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel[]} spannedLeaves - Leaf render inputs the cell spans.
+   */
+  applyTemplateLeafDividerClass(cell, spannedLeaves) {
+    var _a;
+    const shadowCell = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell)
+      return;
+    const spans = (predicate) => spannedLeaves.some((leaf) => !!leaf && predicate(leaf));
+    if (spans((leaf) => leaf.isLeftEndPinned)) {
+      shadowCell.classList.add('right-divider');
+      this.dynamicRightDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isRightStartPinned)) {
+      shadowCell.classList.add('left-divider');
+      this.dynamicLeftDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isNoPinnedEnd || leaf.isViewEnd)) {
+      shadowCell.classList.add('hide-right-border');
+      this.dynamicHideRightBorderCells.add(shadowCell);
+    }
+  }
   getRowShadowThWidths() {
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     const rowShadow = row.shadowRoot;
     const firstTh = rowShadow.querySelector('th:first-of-type');
     const draggableTh = rowShadow.querySelector('.vega-table-draggable-column');
@@ -3800,13 +4023,32 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
       /* istanbul ignore next -- shadowTd is always present in jsdom */
       if (!shadowTd)
         return;
-      // Count how many columns in the span are visible (width > 0) — hidden breakpoint
-      // columns have leafWidth === 0 because their <th> has display:none.
-      const spanned = leafWidths.slice(renderInput.columnIndex, renderInput.columnIndex + originalColspan);
-      const effectiveColspan = Math.max(1, spanned.filter((w) => w > 0).length);
-      shadowTd.setAttribute('colspan', String(effectiveColspan));
+      shadowTd.setAttribute('colspan', String(this.countVisibleColspan(leafWidths, renderInput.columnIndex, originalColspan)));
     });
   }
+  /**
+   * Count how many columns in a span are actually visible (leaf width > 0). Breakpoint-hidden
+   * columns report width 0 because their <th> is display:none; Chrome ignores that on the table
+   * grid, so a spanning cell's shadow <td> colspan must be reduced to the visible count to stay
+   * column-aligned (VD-9540). Shared by data-source and template positioning paths.
+   *
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} startIndex - columnIndex of the first leaf the spanning cell covers.
+   * @param {number} declaredColspan - The cell's originally declared colspan.
+   * @returns {number} The number of visible columns in the span (>= 1).
+   */
+  countVisibleColspan(leafWidths, startIndex, declaredColspan) {
+    const spanned = leafWidths.slice(startIndex, startIndex + declaredColspan);
+    return Math.max(1, spanned.filter((w) => w > 0).length);
+  }
+  resolveCellColSpan(cell, renderInput) {
+    var _a;
+    // Group-column render inputs carry an explicit colSpan; flat/leaf and authored template
+    // cells fall back to the col-span prop on the cell. The authored value is honored verbatim
+    // (no pinned-boundary clamping) — see updateTemplateLeafCellPinnedPosition.
+    const colSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan) !== null && _a !== void 0 ? _a : null;
+    return isNonNullable(colSpan) ? colSpan : cell.colSpan || 1;
+  }
   updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
     if (['left', 'right'].includes(renderInput.pinned)) {
       const shadowCell = headCell.shadowRoot.querySelector('th, td');
@@ -3823,9 +4065,7 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
         // colspan (e.g. colSpan:2 spanning the last two right-pinned columns), we read the
         // actual span from the host component prop so the right-edge offset is calculated
         // over the full spanned width rather than just one column (VD-9565).
-        const colSpan = isNonNullable(renderInput.colSpan)
-          ? renderInput.colSpan
-          : headCell.colSpan || 1;
+        const colSpan = this.resolveCellColSpan(headCell, renderInput);
         const position = nextShadowThWidth +
           leafWidths
             .slice(renderInput.columnIndex + colSpan)
@@ -3842,8 +4082,8 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     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')
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row, vega-table-foot-row')
       .forEach((row) => {
       const rowShadow = row.shadowRoot;
       if (hasLeftPinnedColumn) {
@@ -3892,6 +4132,7 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
+    this.restoreTemplateLeafColspan();
     this.previouslyStyledCells.clear();
   }
   updatePinnedPosition(cell, type, position) {
@@ -3903,32 +4144,35 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
     this.previouslyStyledCells.add(cell);
   }
 }
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
-__decorate$C([
+__decorate$E([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
-__decorate$C([
+__decorate$E([
   InjectVegaSlimmer()
 ], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('componentDidLoad')
 ], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('componentDidRender')
 ], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('watchColumnStructureModel')
 ], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);
 
-var __decorate$B = (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;
@@ -4425,17 +4669,17 @@ class DraggableElementSlimmer extends VegaSlimmer {
   }
 }
 DraggableElementSlimmer.DRAG_THRESHOLD = 4;
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('connectedCallback')
 ], DraggableElementSlimmer.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('disconnectedCallback')
 ], DraggableElementSlimmer.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('componentDidLoad')
 ], DraggableElementSlimmer.prototype, "componentDidLoad", null);
 
-var __decorate$A = (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;
@@ -4525,46 +4769,479 @@ class VegaTableRowDraggableController extends VegaSlimmer {
     }
   }
 }
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "host", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
-__decorate$A([
+__decorate$C([
   InjectVegaSlimmer()
 ], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowDraggableController.prototype, "connectedCallback", null);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('watchRowDraggable')
 ], VegaTableRowDraggableController.prototype, "watchRowDraggable", null);
 
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Derives column configuration from the authored `<vega-table-head>` markup.
+ *
+ * Currently produces grouped-column configuration; header-declared column concerns
+ * (e.g. pinning) are intended to live here as well.
+ */
+class VegaTableHeadTemplateStructureController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.templateHeadObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['group-key', 'parent-group-key', 'pinned', 'col-span'],
+      },
+      mutationFilter: TagNameAndAttributeMutationFilter('VEGA-TABLE-HEAD', 'VEGA-TABLE-HEAD-ROW', 'VEGA-TABLE-HEAD-CELL'),
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => this.handleTemplateHeadStructureChange(),
+    });
+    // Head node the explicit observer is currently bound to, so it can be rebound when replaced.
+    this.observedTemplateHead = null;
+    this.lastTemplateHeadStructureSnapshot = null;
+  }
+  /**
+   * Refresh template grouping before the mutation observer resumes after reconnecting.
+   */
+  connectedCallback() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+    this.registerTemplateHeadStructureObserver();
+  }
+  /**
+   * Used by {@link templateHeadObserver} to stop observing while the table is disconnected.
+   */
+  disconnectedCallback() {
+    this.unRegisterTemplateHeadStructureObserver();
+  }
+  /**
+   * Initialize template grouping before the column structure is built.
+   */
+  componentWillLoad() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+  }
+  /**
+   * Used by {@link templateHeadObserver}.
+   */
+  componentDidLoad() {
+    this.registerTemplateHeadMaps();
+    // Runtime changes are notified by the render-input watcher; initial load has no
+    // following componentDidRender, so it needs one synchronous notification here.
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalVegaTableRenderInputChange), {});
+  }
+  /**
+   * Rebuild template grouping when render mode changes.
+   */
+  watchTemplateRenderMode() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+  }
+  /**
+   * Update the internal template grouping configuration.
+   */
+  setTemplateGroupColumns() {
+    this.templateGroupColumns = this.getTemplateGroupColumns();
+  }
+  /**
+   * Recompute template grouping and row/cell render-input mappings after template head changes.
+   *
+   * Map registration is done here directly instead of via watchColumnStructureModel because
+   * this controller is registered before the render-input controller. If map registration
+   * were deferred to the columnStructureModel watcher, render inputs would still be stale
+   * (render-input controller's watcher hasn't fired yet due to slimmer registration order).
+   */
+  handleTemplateHeadStructureChange() {
+    const nextSnapshot = this.getTemplateHeadStructureSnapshot();
+    if (this.isSameTemplateHeadStructure(nextSnapshot, this.lastTemplateHeadStructureSnapshot))
+      return;
+    this.lastTemplateHeadStructureSnapshot = nextSnapshot;
+    this.setTemplateGroupColumns();
+    this.registerTemplateHeadStructureObserver();
+    this.registerTemplateHeadMaps();
+  }
+  /**
+   * Collect a normalized snapshot for template-head hierarchy keys.
+   *
+   * This lets us ignore duplicated observer notifications that represent the same logical
+   * structure (e.g. reflected-attribute path and explicit watcher path firing for one update).
+   *
+   * @returns {Nullable<TemplateHeadStructureCell[]>} Snapshot of current template head structure.
+   */
+  getTemplateHeadStructureSnapshot() {
+    if (!this.isTemplateRenderMode)
+      return null;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return null;
+    const rows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    return rows.flatMap((row, rowIndex) => {
+      const cells = Array.from(row.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL');
+      return cells.map((cell, cellIndex) => ({
+        rowIndex,
+        cellIndex,
+        key: this.getCellProperty(cell, 'groupKey', 'group-key'),
+        parentKey: this.getCellProperty(cell, 'parentGroupKey', 'parent-group-key'),
+        pinned: this.getCellProperty(cell, 'pinned', 'pinned'),
+      }));
+    });
+  }
+  /**
+   * Compare two structure snapshots by authored order and key values.
+   *
+   * @param {Nullable<TemplateHeadStructureCell[]>} nextSnapshot - Latest snapshot.
+   * @param {Nullable<TemplateHeadStructureCell[]>} prevSnapshot - Previous snapshot.
+   * @returns {boolean} True when snapshots represent the same logical structure.
+   */
+  isSameTemplateHeadStructure(nextSnapshot, prevSnapshot) {
+    if (nextSnapshot === prevSnapshot)
+      return true;
+    if (!nextSnapshot || !prevSnapshot)
+      return false;
+    if (nextSnapshot.length !== prevSnapshot.length)
+      return false;
+    return nextSnapshot.every((nextCell, index) => {
+      const prevCell = prevSnapshot[index];
+      return (nextCell.rowIndex === prevCell.rowIndex &&
+        nextCell.cellIndex === prevCell.cellIndex &&
+        nextCell.key === prevCell.key &&
+        nextCell.parentKey === prevCell.parentKey &&
+        nextCell.pinned === prevCell.pinned);
+    });
+  }
+  /**
+   * Register explicit head-cell structure-change observer for property-assignment updates.
+   */
+  registerTemplateHeadStructureObserver() {
+    const templateHead = this.getTemplateHead();
+    if (!templateHead || templateHead === this.observedTemplateHead)
+      return;
+    // Rebind when the authored head node was replaced so property-update notifications from the
+    // new head's subject are still observed.
+    this.unRegisterTemplateHeadStructureObserver();
+    if (!this.templateHeadStructureObserver) {
+      this.templateHeadStructureObserver = new Observer((input) => {
+        return Boolean(input && input.host);
+      }, () => this.handleTemplateHeadStructureChange());
+    }
+    ChangeManager.register(domNodeSubjectFactory.getSubject(templateHead, VegaInternalTableHeadTemplateStructureChange), this.templateHeadStructureObserver);
+    this.observedTemplateHead = templateHead;
+  }
+  /**
+   * Unregister explicit head-cell structure-change observer.
+   */
+  unRegisterTemplateHeadStructureObserver() {
+    const templateHead = this.observedTemplateHead;
+    if (!templateHead || !this.templateHeadStructureObserver)
+      return;
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(templateHead, VegaInternalTableHeadTemplateStructureChange), this.templateHeadStructureObserver);
+    this.observedTemplateHead = null;
+  }
+  /**
+   * Find authored template head element under table host.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableHeadElement} HTMLVegaTableHeadElement
+   * @returns {Nullable<HTMLVegaTableHeadElement>} Template head element if present.
+   */
+  getTemplateHead() {
+    return Array.from(this.host.children).find((child) => child.tagName === 'VEGA-TABLE-HEAD');
+  }
+  /**
+   * Register template head rows/cells with render-input maps using authored position.
+   *
+   * This mirrors data-source mode, where header renderer registers maps during JSX ref callbacks.
+   * Runtime changes are notified after the column model rebuilds, keeping maps ready without a
+   * second notification for the same template mutation.
+   */
+  registerTemplateHeadMaps() {
+    if (!this.isTemplateRenderMode)
+      return;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return;
+    // Clear all head mappings before rebuilding to prevent stale entries
+    // from persisting when template transitions from valid to invalid/unresolved.
+    this.vegaTableRenderInputController.clearHeadRenderInputMaps();
+    const renderInputs = this.vegaTableRenderInputController.getHeadRenderInputs() || [];
+    const renderInputByKey = new Map(renderInputs
+      .flatMap((model) => model.iterator())
+      .map((model) => [model.key, model]));
+    const templateRows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    // Leaf render inputs in authored order, used to map headers without group keys by position.
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs() || [];
+    templateRows.forEach((templateRow) => {
+      const templateCells = Array.from(templateRow.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL');
+      // A header without group keys carries no grouping identity, so pinning is resolved by position:
+      // the authored cell index maps directly onto the leaf render input at the same index.
+      const rowHasKey = templateCells.some((templateCell) => Boolean(this.getCellProperty(templateCell, 'groupKey', 'group-key')));
+      const rowRenderInputs = templateCells.map((templateCell, cellIndex) => {
+        if (!rowHasKey)
+          return leafRenderInputs[cellIndex] || null;
+        const key = this.getCellProperty(templateCell, 'groupKey', 'group-key');
+        return renderInputByKey.get(key) || null;
+      });
+      // Register only when every authored cell has a matching render input.
+      // Partial mappings can corrupt row-level edge/span calculations.
+      if (rowRenderInputs.some((renderInput) => !renderInput))
+        return;
+      const resolvedRowRenderInputs = rowRenderInputs;
+      this.vegaTableRenderInputController.addHeadRowRenderInputMap(templateRow, resolvedRowRenderInputs);
+      templateCells.forEach((templateCell, cellIndex) => {
+        this.vegaTableRenderInputController.addHeadCellRenderInputMap(templateCell, resolvedRowRenderInputs[cellIndex]);
+      });
+    });
+  }
+  /**
+   * Convert a hand-authored template head into the public grouped-column model.
+   *
+   * Grouping needs authored keys: every cell must have a unique `groupKey`, and cells below the
+   * first row must declare `parentGroupKey` pointing to a cell in the immediately preceding row.
+   * Pinning, in contrast, is purely positional, so a header without group keys that only declares edge
+   * `pinned` is handled by {@link getFlatPinnedColumns} instead of being treated as unkeyed.
+   * Group labels are derived from cell text and default to an empty string because template
+   * markup remains responsible for the visible content.
+   *
+   * @returns {Nullable<VegaTableGroupColumnConfig[]>} Derived grouping configuration; null for a
+   * header without group keys with no edge pinning, or an empty array for malformed structured markup.
+   */
+  getTemplateGroupColumns() {
+    if (!this.isTemplateRenderMode)
+      return null;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return null;
+    const nodes = this.collectTemplateNodes(templateHead);
+    if (nodes.length === 0)
+      return null;
+    if (nodes.every((node) => !node.key))
+      return this.getFlatPinnedColumns(nodes);
+    if (nodes.some((node) => !node.key))
+      return [];
+    const nodesByKey = new Map(nodes.map((node) => [node.key, node]));
+    if (nodesByKey.size !== nodes.length)
+      return [];
+    if (!this.linkTemplateNodes(nodes, nodesByKey))
+      return [];
+    const topLevelNodes = nodes.filter((node) => node.rowIndex === 0);
+    this.dropNonEdgePinned(topLevelNodes);
+    return topLevelNodes.map((node) => this.toGroupColumnConfig(node));
+  }
+  /**
+   * Derive flat, position-keyed leaf columns for a header without group keys whose only column concern is
+   * edge pinning. Grouping requires authored keys, but pinning is positional, so a single-row
+   * header that declares `pinned` without any `group-key` still yields pinned leaf columns.
+   *
+   * Returns null when the header spans multiple rows (grouping cannot be inferred without keys) or
+   * declares no honorable edge pin, preserving the legacy behavior where a plain header without group keys
+   * derives no column model and simply renders its authored cells.
+   *
+   * @param {TemplateColumnNode[]} nodes - Template nodes in authored order (all row 0 when valid).
+   * @returns {Nullable<VegaTableGroupColumnConfig[]>} Position-keyed leaf configs, or null.
+   */
+  getFlatPinnedColumns(nodes) {
+    if (nodes.some((node) => node.rowIndex !== 0))
+      return null;
+    this.dropNonEdgePinned(nodes);
+    if (nodes.every((node) => !node.pinned))
+      return null;
+    // The authored index is the identity here; these keys are never used for head-cell lookup
+    // (registerTemplateHeadMaps maps headers without group keys by position, matching the positional body zip).
+    return nodes.map((node, index) => {
+      node.key = String(index);
+      return this.toGroupColumnConfig(node);
+    });
+  }
+  /**
+   * Drop `pinned` from top-level cells that are not at the physical edge.
+   *
+   * Data-source mode reorders columns to `[left, none, right]` via `orderChildrenByPinned`, so any
+   * pinned column ends up at an edge. Template mode renders authored cells in place and never
+   * reorders them, and sticky pinning only works when the pinned column already sits at the edge.
+   * So we honor `pinned` only for a contiguous leading run (left) and trailing run (right) of the
+   * authored top-level cells; a pinned cell anywhere in between would freeze mid-table and let the
+   * columns authored before it scroll underneath, so its pin is ignored.
+   *
+   * @param {TemplateColumnNode[]} topLevelNodes - Row-0 nodes in authored (physical) order.
+   */
+  dropNonEdgePinned(topLevelNodes) {
+    // End of the leading run of left-pinned cells (exclusive).
+    let leadingLeftEnd = 0;
+    while (leadingLeftEnd < topLevelNodes.length && topLevelNodes[leadingLeftEnd].pinned === 'left') {
+      leadingLeftEnd++;
+    }
+    // Start of the trailing run of right-pinned cells (exclusive lower bound).
+    let trailingRightStart = topLevelNodes.length - 1;
+    while (trailingRightStart >= 0 && topLevelNodes[trailingRightStart].pinned === 'right') {
+      trailingRightStart--;
+    }
+    topLevelNodes.forEach((node, index) => {
+      const isEdgeLeft = node.pinned === 'left' && index < leadingLeftEnd;
+      const isEdgeRight = node.pinned === 'right' && index > trailingRightStart;
+      if (!isEdgeLeft && !isEdgeRight)
+        node.pinned = undefined;
+    });
+  }
+  /**
+   * Flatten the authored template head rows into row-major template nodes.
+   *
+   * @param {HTMLElement} templateHead - Authored `<vega-table-head>` element.
+   * @returns {TemplateColumnNode[]} Template nodes in authored order.
+   */
+  collectTemplateNodes(templateHead) {
+    const rows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    return rows.flatMap((row, rowIndex) => Array.from(row.children)
+      .filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL')
+      .map((cell, cellIndex) => ({
+      cell,
+      key: this.getCellProperty(cell, 'groupKey', 'group-key'),
+      rowIndex,
+      cellIndex,
+      children: [],
+      pinned: this.getCellProperty(cell, 'pinned', 'pinned'),
+    })));
+  }
+  /**
+   * Validate parent references and link each node to its parent in place.
+   *
+   * Children must reference a cell in the immediately preceding row, be grouped by parent, and
+   * list parents left-to-right; first-row cells must not declare a parent.
+   *
+   * @param {TemplateColumnNode[]} nodes - Template nodes in authored order.
+   * @param {Map<string, TemplateColumnNode>} nodesByKey - Node lookup by group key.
+   * @returns {boolean} True when the hierarchy is well-formed.
+   */
+  linkTemplateNodes(nodes, nodesByKey) {
+    var _a;
+    const lastParentIndexByRow = new Map();
+    for (const node of nodes) {
+      const parentKey = this.getCellProperty(node.cell, 'parentGroupKey', 'parent-group-key');
+      if (node.rowIndex === 0) {
+        if (parentKey)
+          return false;
+        continue;
+      }
+      const parent = nodesByKey.get(parentKey);
+      if (!parent || parent.rowIndex !== node.rowIndex - 1)
+        return false;
+      // Children must be listed grouped by parent and parents left-to-right, so a parent's
+      // cell index can never move backwards within a row. This single check rejects both
+      // non-contiguous children and out-of-order parent groups.
+      if (parent.cellIndex < ((_a = lastParentIndexByRow.get(node.rowIndex)) !== null && _a !== void 0 ? _a : -1))
+        return false;
+      lastParentIndexByRow.set(node.rowIndex, parent.cellIndex);
+      parent.children.push(node);
+    }
+    return true;
+  }
+  /**
+   * Convert a template node tree into a grouped-column configuration.
+   *
+   * @param {TemplateColumnNode} node - Template node to convert.
+   * @returns {VegaTableGroupColumnConfig} Group or leaf configuration.
+   */
+  toGroupColumnConfig(node) {
+    // A childless top-level node carries its pinning through the group-model `pinned` field
+    // (which applies to top-level nodes), so `VegaTableColumnGroupingLeafModel` stays a plain
+    // `{ key }` reference and does not need a variant-only pinned property.
+    if (node.children.length === 0) {
+      return node.pinned
+        ? { key: node.key, label: (node.cell.textContent || '').trim(), pinned: node.pinned }
+        : { key: node.key };
+    }
+    return Object.assign(Object.assign({ key: node.key, label: (node.cell.textContent || '').trim() }, (node.pinned ? { pinned: node.pinned } : {})), { children: node.children.map((child) => this.toGroupColumnConfig(child)) });
+  }
+  /**
+   * Read a reflected template-cell property with an attribute fallback.
+   *
+   * The `pinned` variant returns only valid pinning values; invalid values return undefined.
+   *
+   * @param {HTMLElement} cell - Template head cell.
+   * @param {'groupKey' | 'parentGroupKey' | 'pinned'} property - Component property name.
+   * @param {'group-key' | 'parent-group-key' | 'pinned'} attribute - Reflected attribute name.
+   * @returns {string | undefined} Normalized property value.
+   */
+  getCellProperty(cell, property, attribute) {
+    const value = (cell[property] || cell.getAttribute(attribute) || '').trim();
+    if (property === 'pinned') {
+      return value === 'left' || value === 'right' ? value : undefined;
+    }
+    return value;
+  }
+}
+__decorate$B([
+  MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "host", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "isTemplateRenderMode", void 0);
+__decorate$B([
+  MapToComponentField({ writable: true })
+], VegaTableHeadTemplateStructureController.prototype, "templateGroupColumns", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "vegaTableRenderInputController", void 0);
+__decorate$B([
+  InjectVegaSlimmer()
+], VegaTableHeadTemplateStructureController.prototype, "templateHeadObserver", void 0);
+__decorate$B([
+  MapToComponentMethod('connectedCallback')
+], VegaTableHeadTemplateStructureController.prototype, "connectedCallback", null);
+__decorate$B([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadTemplateStructureController.prototype, "disconnectedCallback", null);
+__decorate$B([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableHeadTemplateStructureController.prototype, "componentWillLoad", null);
+__decorate$B([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableHeadTemplateStructureController.prototype, "componentDidLoad", null);
+__decorate$B([
+  MapToComponentMethod('watchTemplateRenderMode')
+], VegaTableHeadTemplateStructureController.prototype, "watchTemplateRenderMode", 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,.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header){box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}.vega-table-scrollable-container.scrolled vega-table-foot.fixed-footer::after,.vega-table-scrollable-container.scrolled ::slotted(vega-table-foot.fixed-footer)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}vega-form{display:contents}table:not(.show-edit-error) *::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;visibility:collapse}@media (min-width: 320px){col.S\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column;visibility:visible}}: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}.draggable-col{min-width:16px;width:16px}";
 
-var __decorate$z = (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);
@@ -4596,6 +5273,7 @@ const VegaTable = class {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableHeadTemplateStructureController = new VegaTableHeadTemplateStructureController();
     this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
     this.vegaTableRenderInputController = new VegaTableRenderInputController();
     this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
@@ -4670,6 +5348,7 @@ const VegaTable = class {
       this.editingRows = newSet;
     });
     this.isSelectedAll = false;
+    this.templateGroupColumns = null;
     this.expandableRows = [];
     this.hasExpandableRow = false;
     /**
@@ -4807,6 +5486,8 @@ const VegaTable = class {
   }
   watchTemplateRenderMode() {
   }
+  watchTemplateGroupColumns() {
+  }
   watchColumnStructureModel() {
   }
   watchExpandableRows() {
@@ -5049,6 +5730,7 @@ const VegaTable = class {
     "currentPage": ["watchCurrentPage"],
     "isSelectedAll": ["watchSelectedAll"],
     "isTemplateRenderMode": ["watchTemplateRenderMode"],
+    "templateGroupColumns": ["watchTemplateGroupColumns"],
     "columnStructureModel": ["watchColumnStructureModel"],
     "expandableRows": ["watchExpandableRows"],
     "hasExpandableRow": ["watchHasExpandableRow"],
@@ -5068,149 +5750,152 @@ const VegaTable = class {
     "scrollConfig": ["watchScrollConfig"]
   }; }
 };
-__decorate$z([
+__decorate$A([
   InjectVegaGlobalSlimmer()
 ], VegaTable.prototype, "globalSlimmers", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "translationSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
-__decorate$z([
+__decorate$A([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableHeadTemplateStructureController", void 0);
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderInputController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePinnedRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyColSpanController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableDataSourceController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableEditableController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableSortController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowDraggableController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableExpandRowController", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "expandableRowsNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "hasExpandableRowNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "eventsPrevent", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "changeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectChangeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDragDropEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "densityNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDraggableNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
 VegaTable.style = vegaTableCss;
 
 const vegaTableBodyCss = ":host{display:contents}";
 
-var __decorate$y = (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);
@@ -5232,13 +5917,13 @@ const VegaTableBody = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$y([
+__decorate$z([
   InjectVegaGlobalSlimmer()
 ], VegaTableBody.prototype, "globalSlimmers", void 0);
-__decorate$y([
+__decorate$z([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
-__decorate$y([
+__decorate$z([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableBody.style = vegaTableBodyCss;
@@ -5288,7 +5973,7 @@ const generateColSpan = (columnLength, withMultipleSelection, withRowDraggable)
   return columnLength + (withMultipleSelection ? 2 : 1) + (withRowDraggable ? 1 : 0);
 };
 
-var __decorate$x = (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;
@@ -5327,20 +6012,20 @@ class VegaTableCellStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$x([
+__decorate$y([
   MapToComponentField()
 ], VegaTableCellStateController.prototype, "host", void 0);
-__decorate$x([
+__decorate$y([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
-__decorate$x([
+__decorate$y([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "columnDivider", void 0);
-__decorate$x([
+__decorate$y([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "clickable", void 0);
 
-var __decorate$w = (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;
@@ -5375,20 +6060,20 @@ class VegaTableRowStateSubscriber extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$w([
+__decorate$x([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "checked", void 0);
-__decorate$w([
+__decorate$x([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "expanded", void 0);
-__decorate$w([
+__decorate$x([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "striped", void 0);
-__decorate$w([
+__decorate$x([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "rowDivider", void 0);
 
-var __decorate$v = (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;
@@ -5462,25 +6147,25 @@ class VegaTableChildRenderInputConsumerSlimmer extends VegaSlimmer {
     ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.table, VegaInternalVegaTableRenderInputChange), this.observer);
   }
 }
-__decorate$v([
+__decorate$w([
   MapToComponentField()
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "host", void 0);
-__decorate$v([
+__decorate$w([
   MapToComponentField({ writable: true })
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "renderInput", void 0);
-__decorate$v([
+__decorate$w([
   MapToComponentMethod('componentWillRender')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "componentWillRenderInput", null);
-__decorate$v([
+__decorate$w([
   MapToComponentMethod('connectedCallback')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "connectRenderInputObserver", null);
-__decorate$v([
+__decorate$w([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "disconnectRenderInputObserver", null);
 
 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$u = (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);
@@ -5609,27 +6294,27 @@ const VegaTableCell = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$u([
+__decorate$v([
   InjectVegaGlobalSlimmer()
 ], VegaTableCell.prototype, "globalSlimmers", void 0);
-__decorate$u([
+__decorate$v([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
-__decorate$u([
+__decorate$v([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableRowStateSubscriber", void 0);
-__decorate$u([
+__decorate$v([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$u([
+__decorate$v([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$u([
+__decorate$v([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 VegaTableCell.style = vegaTableCellCss;
 
-var __decorate$t = (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;
@@ -5650,26 +6335,26 @@ class VegaTableExpandRowRenderer extends VegaSlimmer {
       h("td", null)));
   }
 }
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "host", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "expanded", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "checked", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "striped", void 0);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -5712,19 +6397,19 @@ class VegaTableExpandRowExpandController extends VegaSlimmer {
     }
   }
 }
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "host", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "rowKey", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowExpandController.prototype, "expanded", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "connectedCallback", null);
-__decorate$s([
+__decorate$t([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "disconnectedCallback", null);
 
@@ -5748,7 +6433,7 @@ function isAcceptableTableObserver(input) {
   return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === findParent(this.host, 'vega-table');
 }
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -5776,23 +6461,23 @@ class VegaTableExpandRowSelectionController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
   }
 }
-__decorate$r([
+__decorate$s([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowSelectionController.prototype, "checked", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "host", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "rowKey", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "connectedCallback", null);
-__decorate$r([
+__decorate$s([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "disconnectedCallback", null);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -5829,20 +6514,20 @@ class VegaTableExpandRowStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "host", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withRowDraggable", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
 
-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);
   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;
@@ -5922,34 +6607,34 @@ class VegaTableExpandRowColSpanController extends VegaSlimmer {
     }, 0);
   }
 }
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "host", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowColSpanController.prototype, "colSpan", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withRowDraggable", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
-__decorate$p([
+__decorate$q([
   MapToComponentMethod('watchCurrentBreakpoint')
 ], VegaTableExpandRowColSpanController.prototype, "watchCurrentBreakpoint", null);
-__decorate$p([
+__decorate$q([
   MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
-__decorate$p([
+__decorate$q([
   MapToComponentMethod('watchWithRowDraggable')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithRowDraggable", null);
 
 const vegaTableExpandRowCss = ":host{display:contents}:host .vega-table-expanded-row.striped: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$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);
@@ -6002,33 +6687,33 @@ const VegaTableExpandRow = class {
     "withRowDraggable": ["watchWithRowDraggable"]
   }; }
 };
-__decorate$o([
+__decorate$p([
   InjectVegaGlobalSlimmer()
 ], VegaTableExpandRow.prototype, "globalSlimmers", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowRenderer", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowExpandController", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowSelectionController", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowStateController", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowColSpanController", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$o([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableExpandRow.style = vegaTableExpandRowCss;
 
-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;
@@ -6080,22 +6765,22 @@ class VegaTableFootStateController extends SubStateObserverSlimmer {
     this.tableFootRef = ref;
   }
 }
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaTableFootStateController.prototype, "host", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField({ writable: true })
 ], VegaTableFootStateController.prototype, "fixed", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField({ writable: true })
 ], VegaTableFootStateController.prototype, "rowDivider", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableFootStateController.prototype, "handleDisconnectedCallback", null);
 
-const vegaTableFootCss = ":host{display:table-footer-group;position:sticky;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host tfoot{display:contents}:host(.fixed-footer){bottom:0px}:host(.row-divider)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-hidden){display:none}";
+const vegaTableFootCss = ":host{display:table-footer-group;position:sticky;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host tfoot{display:contents}:host(.fixed-footer){bottom:0px}:host(.row-divider)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;z-index:2;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-hidden){display:none}";
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
@@ -6129,21 +6814,21 @@ const VegaTableFoot = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$m([
+__decorate$n([
   InjectVegaGlobalSlimmer()
 ], VegaTableFoot.prototype, "globalSlimmers", void 0);
-__decorate$m([
+__decorate$n([
   InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "vegaTableFootStateController", void 0);
-__decorate$m([
+__decorate$n([
   InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$m([
+__decorate$n([
   InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "childChangeEventPrevent", void 0);
 VegaTableFoot.style = vegaTableFootCss;
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
   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;
@@ -6178,14 +6863,14 @@ class VegaTableFootCellStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$l([
+__decorate$m([
   MapToComponentField({ writable: true })
 ], VegaTableFootCellStateController.prototype, "density", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField({ writable: true })
 ], VegaTableFootCellStateController.prototype, "columnDivider", void 0);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (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;
@@ -6198,28 +6883,31 @@ class VegaTableFootCellRenderer extends VegaSlimmer {
         'vega-table-cell': true,
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null },
+      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null, style: { width: this.width } },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
   }
 }
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "host", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "breakpoint", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "textAlign", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "colSpan", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "width", void 0);
 
-const vegaTableFootCellCss = ":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}td{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: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){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}td.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}: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}";
+const vegaTableFootCellCss = ":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}td{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:12px;box-sizing:border-box;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){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}td.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}: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.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$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (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);
@@ -6244,28 +6932,28 @@ const VegaTableFootCell = class {
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
   }
   get host() { return getElement(this); }
 };
-__decorate$j([
+__decorate$k([
   InjectVegaGlobalSlimmer()
 ], VegaTableFootCell.prototype, "globalSlimmers", void 0);
-__decorate$j([
+__decorate$k([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaTableFootCellStateController", void 0);
-__decorate$j([
+__decorate$k([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaTableFootCellRenderer", void 0);
-__decorate$j([
+__decorate$k([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$j([
+__decorate$k([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableFootCell.style = vegaTableFootCellCss;
 
-var __decorate$i = (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;
@@ -6296,23 +6984,23 @@ class VegaTableFootRowRenderer extends VegaSlimmer {
       h("td", { style: { width: this.paddingX[1] } })));
   }
 }
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "host", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "paddingX", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "draggable", void 0);
 
-var __decorate$h = (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;
@@ -6373,31 +7061,31 @@ class VegaTableFootRowStateController extends SubStateObserverSlimmer {
     };
   }
 }
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaTableFootRowStateController.prototype, "host", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "selectionType", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "paddingX", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "columnDivider", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "density", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "hasExpandableRow", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "draggable", void 0);
 
 const vegaTableFootRowCss = ":host{display:contents}td{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;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(.density-default) td:first-of-type,:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type,:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}: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}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
 
-var __decorate$g = (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);
@@ -6430,24 +7118,24 @@ const VegaTableFootRow = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$g([
+__decorate$h([
   InjectVegaGlobalSlimmer()
 ], VegaTableFootRow.prototype, "globalSlimmers", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaTableFootRowStateController", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaTableFootRowRenderer", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "pageResizeObserverSlimmer", void 0);
 VegaTableFootRow.style = vegaTableFootRowCss;
 
-var __decorate$f = (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;
@@ -6475,16 +7163,16 @@ class VegaTableHeadStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaTableHeadStateController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], VegaTableHeadStateController.prototype, "fixed", void 0);
 
 const vegaTableHeadCss = ":host{display:table-header-group;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host thead{display:contents}:host(.fixed-header){position:sticky;top:0px}";
 
-var __decorate$e = (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);
@@ -6530,21 +7218,21 @@ const VegaTableHead = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$e([
+__decorate$f([
   InjectVegaGlobalSlimmer()
 ], VegaTableHead.prototype, "globalSlimmers", void 0);
-__decorate$e([
+__decorate$f([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaTableHeadStateController", void 0);
-__decorate$e([
+__decorate$f([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$e([
+__decorate$f([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "headCellEventPrevent", void 0);
 VegaTableHead.style = vegaTableHeadCss;
 
-var __decorate$d = (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;
@@ -6579,10 +7267,10 @@ class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "columnDivider", void 0);
 
@@ -6598,7 +7286,7 @@ const circleArrowUp = {
   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="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/></svg>`,
 };
 
-var __decorate$c = (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;
@@ -6627,14 +7315,14 @@ SortIconRenderer.SORT_ICON_MAP = {
     color: 'text-secondary',
   },
 };
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], SortIconRenderer.prototype, "sorter", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], SortIconRenderer.prototype, "sortOrder", void 0);
 
-var __decorate$b = (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;
@@ -6703,23 +7391,47 @@ class VegaTableHeadCellSortConfigController extends VegaSlimmer {
     return Array.from(this.hostTable.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaTableHeadCellSortConfigController.prototype, "host", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellSortConfigController.prototype, "sortOrder", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaTableHeadCellSortConfigController.prototype, "sortConfig", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableHeadCellSortConfigController.prototype, "disconnectedCallback", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableHeadCellSortConfigController.prototype, "componentWillLoad", null);
 
-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$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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for head-cell template structure notifications.
+ */
+class VegaTableHeadCellTemplateStructureController extends VegaSlimmer {
+  /**
+   * Notify table template-structure observers when template group keys are updated.
+   */
+  notifyTemplateHeadStructureChange() {
+    const parent = findParent(this.host, 'vega-table-head');
+    if (!parent)
+      return;
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(parent, VegaInternalTableHeadTemplateStructureChange), { host: this.host });
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaTableHeadCellTemplateStructureController.prototype, "host", void 0);
+
+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;box-sizing:border-box;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;
@@ -6743,6 +7455,7 @@ const VegaTableHeadCell = class {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.sortIconRenderer = new SortIconRenderer();
     this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
+    this.vegaTableHeadCellTemplateStructureController = new VegaTableHeadCellTemplateStructureController();
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnHeadCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     this.handleSort = (e) => {
@@ -6768,6 +7481,15 @@ const VegaTableHeadCell = class {
       return orderSequence[(orderSequence.indexOf(sortOrder) + 1) % orderSequence.length];
     };
   }
+  watchPinned() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchParentGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
     const sortableConfig = this.sorter
@@ -6782,7 +7504,7 @@ const VegaTableHeadCell = class {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'sortable': !!this.sorter,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width } }, h("th", Object.assign({ class: {
+      } }, h("th", Object.assign({ class: {
         'vega-table-cell': true,
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         'is-group-cell': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.headHasGroupColumn,
@@ -6790,9 +7512,14 @@ const VegaTableHeadCell = class {
         'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
         'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan }), 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: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan, style: { width: this.width } }), 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); }
+  static get watchers() { return {
+    "pinned": ["watchPinned"],
+    "groupKey": ["watchGroupKey"],
+    "parentGroupKey": ["watchParentGroupKey"]
+  }; }
 };
 (() => {
   VegaInternalIconManager.register({
@@ -6824,6 +7551,9 @@ __decorate$a([
 __decorate$a([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellTemplateStructureController", void 0);
 __decorate$a([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);