@globalpayments/vega 2.99.0 → 2.101.0

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

@@ -7,31 +7,31 @@ 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 { f as findParent, a as arrayToClassString, m as extractNumberFromString } from './ui-80e610f4.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-bb7e68a0.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 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-dec87e46.js';
-import { i as isNonNullable, s as isBreakpointsTokenType, ap as isVegaTableColumnGroupingModelType } from './type-guard-6fc96870.js';
+import { T as VegaInternalTableRowExpand, U as VegaInternalTableRowSelect, W as VegaInternalTableRowSelectAll, X as VegaInternalVegaTableRenderInputChange, Y as VegaInternalColumnHeadRowRenderInputRIC, Z as VegaInternalColumnHeadCellRenderInputRIC, _ as VegaInternalColumnBodyCellRenderInputRIC, $ as VegaInternalRowRenderInputRIC, a0 as VegaInternalColumnExpandCellRenderInputRIC, a1 as VegaInternalColumnFootCellRenderInputRIC, a2 as VegaInternalTableHeadTemplateStructureChange, a3 as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-02093067.js';
+import { a as VegaClick, d as VegaChange, $ as VegaPageSizeChange, e as VegaExpand, a3 as VegaSelectChange, a4 as VegaSelectAllChange, a5 as VegaRowClick, a6 as VegaRowExpand, a7 as VegaRowDragDrop, a8 as VegaRowSelect, a9 as VegaRowSelectAll } from './vega-event-id-59cd9297.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-07843ec3.js';
+import { i as isNonNullable, s as isBreakpointsTokenType, ap as isVegaTableColumnGroupingModelType } from './type-guard-26d83e7e.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, 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-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 { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-ba72f30b.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-0ebcbf47.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-12ee1593.js';
 import { I as ImmutableMap } from './immutable-map-4fe22b11.js';
-import { T as TranslationSlimmer } from './translation-slimmer-ef970ffc.js';
+import { T as TranslationSlimmer } from './translation-slimmer-77022f2e.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-722f6b92.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-bee1c7fa.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 { c as createEnterKeyHandlerToTriggerClick } from './accessibility-c899a968.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';
@@ -39,9 +39,9 @@ import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
 import './array-7888f339.js';
 import './typography-19c3b9be.js';
-import './internal-translation-controller-b33430c6.js';
+import './internal-translation-controller-fff376d2.js';
 import './try-get-document-bef0f526.js';
-import './internal-vega-event-manager-2ecc9186.js';
+import './internal-vega-event-manager-0c381f3b.js';
 import './vega-env-manager-8f8dc473.js';
 import './index-9c9865c0.js';
 import './icon-manager-4ef3f6dd.js';
@@ -207,6 +207,23 @@ class ColumnRenderInputModel {
     this.columnIndex = columnIndex;
     this.parent = parent;
     this.children = children;
+    /**
+     * Prefix-sum pixel offset for `sticky left` positioning. Mutated by
+     * {@link VegaTableRenderInputController.recomputePinnedOffsets} on resize / column
+     * structure change. Consumed by the cell's own `render()` to emit `style.left`
+     * declaratively instead of receiving external shadow-DOM style mutation.
+     * Null when the column is not left-pinned or offsets have not yet been computed.
+     */
+    this.leftOffsetPx = null;
+    /**
+     * Prefix-sum pixel offset for `sticky right` positioning. Mirrors
+     * {@link leftOffsetPx} but for right-pinned columns.
+     */
+    this.rightOffsetPx = null;
+    this.isVisibleLeftEndPinned = false;
+    this.isVisibleRightStartPinned = false;
+    this.isVisibleRightEndPinned = false;
+    this.visibleColSpan = null;
     this.iteratorCacheMap = new Map();
     this.leaves = [];
   }
@@ -267,14 +284,14 @@ class ColumnRenderInputModel {
       isNoPinnedEnd = isNoPinnedEnd || leaf.isNoPinnedEnd;
       isViewEnd = isViewEnd || leaf.isViewEnd;
     }
-    // Return the base unchanged when no flags were gained (common fast-path).
-    if (isLeftEndPinned === base.isLeftEndPinned &&
-      isRightStartPinned === base.isRightStartPinned &&
-      isNoPinnedEnd === base.isNoPinnedEnd &&
-      isViewEnd === base.isViewEnd) {
-      return base;
-    }
-    return new ColumnRenderInputModel(base.key, base.label, base.pinned, base.colSpan, base.rowSpan, base.isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, base.headHasGroupColumn, base.headHasPinnedColumn, base.headMaxDepth, base.level, base.columnIndex, base.parent, base.children);
+    const renderInput = new ColumnRenderInputModel(base.key, base.label, base.pinned, base.colSpan, base.rowSpan, base.isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, base.headHasGroupColumn, base.headHasPinnedColumn, base.headMaxDepth, base.level, base.columnIndex, base.parent, base.children);
+    renderInput.leftOffsetPx = base.leftOffsetPx;
+    renderInput.rightOffsetPx = base.rightOffsetPx;
+    renderInput.isVisibleLeftEndPinned = base.isVisibleLeftEndPinned;
+    renderInput.isVisibleRightStartPinned = base.isVisibleRightStartPinned;
+    renderInput.isVisibleRightEndPinned = base.isVisibleRightEndPinned;
+    renderInput.visibleColSpan = base.visibleColSpan;
+    return renderInput;
   }
   /**
    * True when the provided structure model is the last left-pinned sibling in its parent's children.
@@ -1699,7 +1716,9 @@ class VegaTableBodyRenderer extends VegaSlimmer {
           }, editable),
           this.vegaTableExpandRowController.isExpandableRow(record) && (h("vega-table-expand-row", { class: {
               'v-hidden': !isVisibleInCurrentPage,
-            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index % 2 === 1 },
+            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index % 2 === 1, ref: (ref) => {
+              this.vegaTableRenderInputController.addRowRenderInputMap(ref, 'expand');
+            } },
             h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
       })));
     };
@@ -1750,6 +1769,9 @@ __decorate$S([
 __decorate$S([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableExpandRowController", void 0);
+__decorate$S([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableRenderInputController", void 0);
 
 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;
@@ -1772,6 +1794,7 @@ class VegaTableHeaderRenderer extends VegaSlimmer {
         var _a;
         return (h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll, ref: (ref) => {
             this.vegaTableRenderInputController.addHeadRowRenderInputMap(ref, cells);
+            this.vegaTableRenderInputController.addRowRenderInputMap(ref, 'head');
           } }, cells.map((renderInput) => {
           if (renderInput.label) {
             return this.renderGroupCell(renderInput);
@@ -2932,6 +2955,7 @@ class VegaTableRowRenderer$1 extends VegaSlimmer {
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
+          this.vegaTableRenderInputController.addRowRenderInputMap(ref, 'body');
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
@@ -3383,6 +3407,47 @@ __decorate$G([
   MapToComponentMethod('watchTemplateGroupColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchTemplateGroupColumns", null);
 
+/** Render-time structural state shared by table row variants. */
+class RowRenderInputModel {
+  constructor(kind, hasLeftPinnedColumn, hasRightPinnedColumn, showSelectionCell, showDraggableCell, showExpandActionCell, hasExpandedRowSlot, leftPaddingPx, rightPaddingPx, startRowSpan = null, endRowSpan = null, isStartHidden = false, isEndHidden = false) {
+    this.kind = kind;
+    this.hasLeftPinnedColumn = hasLeftPinnedColumn;
+    this.hasRightPinnedColumn = hasRightPinnedColumn;
+    this.showSelectionCell = showSelectionCell;
+    this.showDraggableCell = showDraggableCell;
+    this.showExpandActionCell = showExpandActionCell;
+    this.hasExpandedRowSlot = hasExpandedRowSlot;
+    this.leftPaddingPx = leftPaddingPx;
+    this.rightPaddingPx = rightPaddingPx;
+    this.startRowSpan = startRowSpan;
+    this.endRowSpan = endRowSpan;
+    this.isStartHidden = isStartHidden;
+    this.isEndHidden = isEndHidden;
+  }
+  /**
+   * Create row render input from table and column structure state.
+   *
+   * @param {ColumnStructureModel} structure - Current column structure.
+   * @param {TableRowStructure} table - Current row-related table state.
+   * @param {RowKind} kind - Row variant being rendered.
+   * @param {ColumnRenderInputModel[]} headRenderInputs - Header columns for row-span metadata.
+   * @returns {RowRenderInputModel} Row-owned render input.
+   */
+  static from(structure, table, kind, headRenderInputs = null) {
+    const startRenderInput = headRenderInputs === null || headRenderInputs === void 0 ? void 0 : headRenderInputs[0];
+    const endRenderInput = headRenderInputs === null || headRenderInputs === void 0 ? void 0 : headRenderInputs[headRenderInputs.length - 1];
+    const isMultipleSelection = !!table.rowSelection && (table.rowSelection.type || 'multiple') === 'multiple';
+    return new RowRenderInputModel(kind, structure.hasLeftPinnedColumn(), structure.hasRightPinnedColumn(), isMultipleSelection, !!table.rowDraggable, kind !== 'expand' && table.hasExpandableRow, kind === 'expand', extractNumberFromString(table.paddingX[0]), extractNumberFromString(table.paddingX[1]), (startRenderInput === null || startRenderInput === void 0 ? void 0 : startRenderInput.headHasGroupColumn)
+      ? isMultipleSelection && startRenderInput.level === 0
+        ? startRenderInput.headMaxDepth
+        : startRenderInput.rowSpan
+      : null, (endRenderInput === null || endRenderInput === void 0 ? void 0 : endRenderInput.headHasGroupColumn) ? endRenderInput.rowSpan : null, !!(startRenderInput === null || startRenderInput === void 0 ? void 0 : startRenderInput.headHasGroupColumn) &&
+      ((isMultipleSelection && startRenderInput.level > 0) || !startRenderInput.isViewStart), !!(startRenderInput === null || startRenderInput === void 0 ? void 0 : startRenderInput.headHasGroupColumn) &&
+      !!(endRenderInput === null || endRenderInput === void 0 ? void 0 : endRenderInput.headHasGroupColumn) &&
+      !endRenderInput.isViewEnd);
+  }
+}
+
 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);
@@ -3401,9 +3466,12 @@ var __decorate$F = (undefined && undefined.__decorate) || function (decorators,
 class VegaTableRenderInputController extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.headRowRenderInputMap = new Map();
-    this.headCellRenderInputMap = new Map();
-    this.pinnedColumnBodyCellRenderInputMap = new Map();
+    this.headRowRenderInputMap = new WeakMap();
+    this.headCellRenderInputMap = new WeakMap();
+    this.bodyCellRenderInputMap = new WeakMap();
+    this.hasPendingCellRenderInputChange = false;
+    this.rowRenderInputMap = new WeakMap();
+    this.footCellRenderInputMap = new Map();
     this.cellRenderInputChangeTaskQueue = new SynchronizeTaskQueue();
   }
   /**
@@ -3429,10 +3497,19 @@ class VegaTableRenderInputController extends VegaSlimmer {
   }
   /**
    * Notify body cells about render input changes after the table has re-rendered.
-   * This ensures ref callbacks have fired and the pinnedColumnBodyCellRenderInputMap is up-to-date.
+   * This ensures ref callbacks have fired and the body-cell render inputs are up-to-date.
    * Called via component lifecycle mapping.
    */
   async componentDidRender() {
+    if (this.isTemplateRenderMode) {
+      this.registerTemplateCellRenderInputs();
+      if (this.hasPendingCellRenderInputChange &&
+        !this.columnStructureModel.hasLeftPinnedColumn() &&
+        !this.columnStructureModel.hasRightPinnedColumn()) {
+        this.notifyRenderInputChange();
+        this.hasPendingCellRenderInputChange = false;
+      }
+    }
     await this.cellRenderInputChangeTaskQueue.runTask();
   }
   /**
@@ -3441,7 +3518,7 @@ class VegaTableRenderInputController extends VegaSlimmer {
    */
   async watchColumnStructureModel() {
     this.setRenderInputModel();
-    this.pinnedColumnBodyCellRenderInputMap.clear();
+    this.bodyCellRenderInputMap = new WeakMap();
     await this.cellRenderInputChangeTaskQueue.enqueue({
       /**
        * Notify body-cell render-input changes after render completes.
@@ -3451,6 +3528,11 @@ class VegaTableRenderInputController extends VegaSlimmer {
       },
     }, false);
   }
+  /** Clear cached row inputs when row-related table state changes. */
+  watchRowStructure() {
+    this.rowRenderInputMap = new WeakMap();
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalVegaTableRenderInputChange), {});
+  }
   /**
    * Return render input models for table body (flattened leaves).
    *
@@ -3474,6 +3556,8 @@ class VegaTableRenderInputController extends VegaSlimmer {
    * @param {ColumnRenderInputModel[]} renderInputs - Associated render input models.
    */
   addHeadRowRenderInputMap(headRow, renderInputs) {
+    if (!headRow)
+      return;
     this.headRowRenderInputMap.set(headRow, renderInputs);
   }
   /**
@@ -3483,6 +3567,8 @@ class VegaTableRenderInputController extends VegaSlimmer {
    * @param {ColumnRenderInputModel} renderInput - Associated render input model.
    */
   addHeadCellRenderInputMap(headCell, renderInput) {
+    if (!headCell)
+      return;
     this.headCellRenderInputMap.set(headCell, renderInput);
   }
   /**
@@ -3493,21 +3579,37 @@ class VegaTableRenderInputController extends VegaSlimmer {
    * re-registers via ref callbacks each render, so stale entries are overwritten naturally.
    */
   clearHeadRenderInputMaps() {
-    this.headRowRenderInputMap.clear();
-    this.headCellRenderInputMap.clear();
+    this.headRowRenderInputMap = new WeakMap();
+    this.headCellRenderInputMap = new WeakMap();
   }
   /**
-   * Store body cell render input mapping for pinned cells (used to update sticky positions).
-   *
-   * Only stores cells that require sticky positioning (left/right or no-pinned-end).
+   * Store body cell render input mapping without retaining disconnected cell hosts.
    *
    * @param {HTMLElement} cell - The body cell element.
    * @param {ColumnRenderInputModel} renderInput - Associated render input model.
    */
   addCellRenderInputMap(cell, renderInput) {
-    if ((cell && ['left', 'right'].includes(renderInput.pinned)) || renderInput.isNoPinnedEnd) {
-      this.pinnedColumnBodyCellRenderInputMap.set(cell, renderInput);
+    if (!cell)
+      return;
+    const current = this.bodyCellRenderInputMap.get(cell);
+    const next = this.hasSameCellStructure(current, renderInput)
+      ? current
+      : renderInput;
+    if (current !== next) {
+      this.hasPendingCellRenderInputChange = true;
     }
+    this.bodyCellRenderInputMap.set(cell, next);
+  }
+  /**
+   * Store row render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} row - Row host element.
+   * @param {RowKind} kind - Row variant.
+   */
+  addRowRenderInputMap(row, kind) {
+    if (!row)
+      return;
+    this.rowRenderInputMap.set(row, this.createRowRenderInputModel(kind, row));
   }
   /**
    * Expose the internal head-cell -> render-input mapping.
@@ -3516,16 +3618,133 @@ class VegaTableRenderInputController extends VegaSlimmer {
    * @returns {Map<HTMLVegaTableHeadCellElement, ColumnRenderInputModel>} Map of head cell elements to render input.
    */
   getHeadCellRenderInputMap() {
-    return this.headCellRenderInputMap;
+    var _a;
+    const renderInputMap = new Map();
+    const root = this.isTemplateRenderMode ? this.host : (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+    root === null || root === void 0 ? void 0 : root.querySelectorAll('vega-table-head-cell').forEach((cell) => {
+      const renderInput = this.headCellRenderInputMap.get(cell);
+      if (renderInput)
+        renderInputMap.set(cell, renderInput);
+    });
+    return renderInputMap;
   }
   /**
-   * Expose the internal map of pinned body cells to their render inputs.
+   * Return a snapshot of currently rendered body cells and their render inputs.
    *
    * @typedef {import('../../../../types/components').HTMLVegaTableCellElement} HTMLVegaTableCellElement
-   * @returns {Map<HTMLVegaTableCellElement, ColumnRenderInputModel>} Map of body cell hosts requiring sticky positioning.
+   * @returns {Map<HTMLVegaTableCellElement, ColumnRenderInputModel>} Current body-cell render inputs.
    */
   getPinnedColumnBodyCellRenderInputMap() {
-    return this.pinnedColumnBodyCellRenderInputMap;
+    var _a;
+    const renderInputMap = new Map();
+    const root = this.isTemplateRenderMode ? this.host : (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+    root === null || root === void 0 ? void 0 : root.querySelectorAll('vega-table-cell').forEach((cell) => {
+      const renderInput = this.bodyCellRenderInputMap.get(cell);
+      if (renderInput)
+        renderInputMap.set(cell, renderInput);
+    });
+    return renderInputMap;
+  }
+  /**
+   * Recompute per-column sticky pinned offsets (`leftOffsetPx` / `rightOffsetPx`) on
+   * every registered head, body, and foot cell render input,
+   * then notify subscribers so pinned cells re-render with the new offsets.
+   *
+   * This is the write-side of the declarative pinned pipeline described in VD-9881:
+   * instead of {@link VegaTablePinnedRenderer} mutating each cell's shadow-DOM
+   * `style.left`/`style.right`, the controller populates the offset on the DTO and
+   * pinned cells consume it from their own `render()` via a JSX `style` prop.
+   *
+   * Idempotent — safe to call multiple times per lifecycle event. Measurement of
+   * `prevShadowThWidth`, `nextShadowThWidth`, and `leafWidths` lives with the pinned
+   * renderer (it needs those values for other passes too — breakpoint-hidden column
+   * detection, template-mode leaf zipping, etc.) and is supplied by the caller.
+   *
+   * @param {number} prevShadowThWidth - Aggregate width of leading row-fixed cells (left padding).
+   * @param {number} nextShadowThWidth - Aggregate width of trailing row-fixed cells (right padding).
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   */
+  recomputePinnedOffsets(prevShadowThWidth, nextShadowThWidth, leafWidths) {
+    var _a, _b, _c;
+    const headCellRenderInputMap = this.getHeadCellRenderInputMap();
+    if (!headCellRenderInputMap.size)
+      return;
+    this.registerTemplateCellRenderInputs();
+    const leafPrefixLeft = new Array(leafWidths.length + 1).fill(0);
+    for (let i = 0; i < leafWidths.length; i++) {
+      leafPrefixLeft[i + 1] = leafPrefixLeft[i] + leafWidths[i];
+    }
+    const allLeafWidthsHidden = leafWidths.every((width) => width === 0);
+    const visibleLeftPinned = this.leavesRenderInputModels.filter((model) => model.pinned === 'left' && (allLeafWidthsHidden || leafWidths[model.columnIndex] > 0));
+    const visibleRightPinned = this.leavesRenderInputModels.filter((model) => model.pinned === 'right' && (allLeafWidthsHidden || leafWidths[model.columnIndex] > 0));
+    const visibleLeftEndIndex = (_a = visibleLeftPinned[visibleLeftPinned.length - 1]) === null || _a === void 0 ? void 0 : _a.columnIndex;
+    const visibleRightStartIndex = (_b = visibleRightPinned[0]) === null || _b === void 0 ? void 0 : _b.columnIndex;
+    const visibleRightEndIndex = (_c = visibleRightPinned[visibleRightPinned.length - 1]) === null || _c === void 0 ? void 0 : _c.columnIndex;
+    let hasRenderInputChange = this.hasPendingCellRenderInputChange;
+    /**
+     * Apply cell-owned visible boundaries and sticky offsets.
+     *
+     * @param {ColumnRenderInputModel} renderInput - Cell render input to update.
+     * @param {HTMLElement} cell - Cell host supplying its effective colspan.
+     * @returns {boolean} Whether the render input changed.
+     */
+    const setOffsets = (renderInput, cell) => {
+      var _a;
+      const colSpan = (_a = renderInput.colSpan) !== null && _a !== void 0 ? _a : (cell.colSpan || 1);
+      /**
+       * Check whether the current cell spans a leaf index.
+       *
+       * @param {number} index - Leaf index to test.
+       * @returns {boolean} Whether the cell includes the index.
+       */
+      const spansIndex = (index) => Number.isInteger(index) &&
+        index >= renderInput.columnIndex &&
+        index < renderInput.columnIndex + colSpan;
+      const isVisibleLeftEndPinned = spansIndex(visibleLeftEndIndex);
+      const isVisibleRightStartPinned = spansIndex(visibleRightStartIndex);
+      const isVisibleRightEndPinned = spansIndex(visibleRightEndIndex);
+      const visibleColSpan = colSpan > 1 && !allLeafWidthsHidden
+        ? Math.max(1, leafWidths
+          .slice(renderInput.columnIndex, renderInput.columnIndex + colSpan)
+          .filter((width) => width > 0).length)
+        : null;
+      let leftOffsetPx = null;
+      let rightOffsetPx = null;
+      if (renderInput.pinned === 'left') {
+        leftOffsetPx = prevShadowThWidth + leafPrefixLeft[renderInput.columnIndex];
+      }
+      else if (renderInput.pinned === 'right') {
+        const endIndex = renderInput.columnIndex + colSpan;
+        rightOffsetPx =
+          nextShadowThWidth + (leafPrefixLeft[leafWidths.length] - leafPrefixLeft[endIndex]);
+      }
+      const changed = renderInput.isVisibleLeftEndPinned !== isVisibleLeftEndPinned ||
+        renderInput.isVisibleRightStartPinned !== isVisibleRightStartPinned ||
+        renderInput.isVisibleRightEndPinned !== isVisibleRightEndPinned ||
+        renderInput.visibleColSpan !== visibleColSpan ||
+        renderInput.leftOffsetPx !== leftOffsetPx ||
+        renderInput.rightOffsetPx !== rightOffsetPx;
+      renderInput.isVisibleLeftEndPinned = isVisibleLeftEndPinned;
+      renderInput.isVisibleRightStartPinned = isVisibleRightStartPinned;
+      renderInput.isVisibleRightEndPinned = isVisibleRightEndPinned;
+      renderInput.visibleColSpan = visibleColSpan;
+      renderInput.leftOffsetPx = leftOffsetPx;
+      renderInput.rightOffsetPx = rightOffsetPx;
+      return changed;
+    };
+    headCellRenderInputMap.forEach((renderInput, cell) => {
+      hasRenderInputChange = setOffsets(renderInput, cell) || hasRenderInputChange;
+    });
+    this.getPinnedColumnBodyCellRenderInputMap().forEach((renderInput, cell) => {
+      hasRenderInputChange = setOffsets(renderInput, cell) || hasRenderInputChange;
+    });
+    this.footCellRenderInputMap.forEach((renderInput, cell) => {
+      hasRenderInputChange = setOffsets(renderInput, cell) || hasRenderInputChange;
+    });
+    this.hasPendingCellRenderInputChange = false;
+    if (hasRenderInputChange) {
+      this.notifyRenderInputChange();
+    }
   }
   /**
    * Register remote invocation callbacks to allow DOM nodes to request render inputs.
@@ -3538,7 +3757,18 @@ class VegaTableRenderInputController extends VegaSlimmer {
       return this.headCellRenderInputMap.get(headCell);
     });
     remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC), (cell) => {
-      return this.pinnedColumnBodyCellRenderInputMap.get(cell);
+      return this.bodyCellRenderInputMap.get(cell);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRowRenderInputRIC), (row) => {
+      var _a;
+      return (_a = this.rowRenderInputMap.get(row)) !== null && _a !== void 0 ? _a : this.createRowRenderInput(row);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnExpandCellRenderInputRIC), (row) => {
+      var _a;
+      return (_a = this.rowRenderInputMap.get(row)) !== null && _a !== void 0 ? _a : this.createRowRenderInput(row);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnFootCellRenderInputRIC), (cell) => {
+      return this.footCellRenderInputMap.get(cell);
     });
   }
   /**
@@ -3548,11 +3778,118 @@ class VegaTableRenderInputController extends VegaSlimmer {
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC));
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC));
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRowRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnExpandCellRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnFootCellRenderInputRIC));
+  }
+  /** Register authored template rows and cells with their render inputs. */
+  registerTemplateCellRenderInputs() {
+    const rows = this.host.querySelectorAll('vega-table-row, vega-table-foot-row');
+    if (!rows.length) {
+      if (this.footCellRenderInputMap.size)
+        this.hasPendingCellRenderInputChange = true;
+      this.footCellRenderInputMap = new Map();
+      return;
+    }
+    const nextFootCellRenderInputMap = new Map();
+    rows.forEach((row) => {
+      this.addRowRenderInputMap(row, row.matches('vega-table-foot-row') ? 'foot' : 'body');
+      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 base = this.leavesRenderInputModels[leafIndex];
+        const colSpan = leafCell.colSpan || 1;
+        if (base) {
+          const candidate = ColumnRenderInputModel.withMergedBoundaries(base, this.leavesRenderInputModels.slice(leafIndex, leafIndex + colSpan));
+          if (cell.tagName === 'VEGA-TABLE-FOOT-CELL') {
+            const footCell = leafCell;
+            const current = this.footCellRenderInputMap.get(footCell);
+            const renderInput = this.hasSameCellStructure(current, candidate)
+              ? current
+              : candidate;
+            if (renderInput !== current)
+              this.hasPendingCellRenderInputChange = true;
+            nextFootCellRenderInputMap.set(footCell, renderInput);
+          }
+          else {
+            const bodyCell = leafCell;
+            const current = this.bodyCellRenderInputMap.get(bodyCell);
+            this.addCellRenderInputMap(bodyCell, this.hasSameCellStructure(current, candidate) ? current : candidate);
+          }
+        }
+        leafIndex += colSpan;
+      });
+    });
+    if (nextFootCellRenderInputMap.size !== this.footCellRenderInputMap.size) {
+      this.hasPendingCellRenderInputChange = true;
+    }
+    this.footCellRenderInputMap = nextFootCellRenderInputMap;
+  }
+  /**
+   * Compare the structural fields that determine a cell render input.
+   *
+   * @param {ColumnRenderInputModel} current - Existing render input.
+   * @param {ColumnRenderInputModel} candidate - Newly computed render input.
+   * @returns {boolean} Whether the structural fields match.
+   */
+  hasSameCellStructure(current, candidate) {
+    return (!!current &&
+      current.key === candidate.key &&
+      current.pinned === candidate.pinned &&
+      current.columnIndex === candidate.columnIndex &&
+      current.isViewStart === candidate.isViewStart &&
+      current.isViewEnd === candidate.isViewEnd &&
+      current.isLeftEndPinned === candidate.isLeftEndPinned &&
+      current.isRightStartPinned === candidate.isRightStartPinned &&
+      current.isNoPinnedEnd === candidate.isNoPinnedEnd);
+  }
+  /** Notify consumers that table render inputs changed. */
+  notifyRenderInputChange() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalVegaTableRenderInputChange), {});
+  }
+  /**
+   * Create and cache render input for a requesting row.
+   *
+   * @param {HTMLElement} row - Requesting row host.
+   * @returns {RowRenderInputModel} Cached row render input.
+   */
+  createRowRenderInput(row) {
+    const kind = row.matches('vega-table-head-row')
+      ? 'head'
+      : row.matches('vega-table-foot-row')
+        ? 'foot'
+        : row.matches('vega-table-expand-row')
+          ? 'expand'
+          : 'body';
+    const renderInput = this.createRowRenderInputModel(kind, row);
+    this.rowRenderInputMap.set(row, renderInput);
+    return renderInput;
+  }
+  /**
+   * Build row render input from current table state.
+   *
+   * @param {RowKind} kind - Row variant.
+   * @param {HTMLElement} row - Row host used for header metadata lookup.
+   * @returns {RowRenderInputModel} Current row render input.
+   */
+  createRowRenderInputModel(kind, row) {
+    const table = {
+      hasExpandableRow: this.hasExpandableRow,
+      paddingX: this.paddingX,
+      rowDraggable: this.rowDraggable,
+      rowExpandable: this.rowExpandable,
+      rowSelection: this.rowSelection,
+    };
+    return RowRenderInputModel.from(this.columnStructureModel, table, kind, kind === 'head' ? this.headRowRenderInputMap.get(row) : null);
   }
   /**
    * Build the ColumnRenderInputModel forest from the current ColumnStructureModel.
    */
   setRenderInputModel() {
+    this.rowRenderInputMap = new WeakMap();
+    this.footCellRenderInputMap.clear();
     this.columnRenderInputModels = ColumnRenderInputModel.from(this.columnStructureModel);
     this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
   }
@@ -3563,6 +3900,24 @@ __decorate$F([
 __decorate$F([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "hasExpandableRow", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "paddingX", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "rowDraggable", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "rowExpandable", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "rowSelection", void 0);
+__decorate$F([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "isTemplateRenderMode", void 0);
 __decorate$F([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);
@@ -3578,6 +3933,13 @@ __decorate$F([
 __decorate$F([
   MapToComponentMethod('watchColumnStructureModel')
 ], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);
+__decorate$F([
+  MapToComponentMethod('watchHasExpandableRow'),
+  MapToComponentMethod('watchPaddingX'),
+  MapToComponentMethod('watchRowDraggable'),
+  MapToComponentMethod('watchRowExpandable'),
+  MapToComponentMethod('watchRowSelection')
+], VegaTableRenderInputController.prototype, "watchRowStructure", null);
 
 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;
@@ -3592,557 +3954,65 @@ class VegaTablePinnedRenderer extends VegaSlimmer {
       // eslint-disable-next-line
       target: () => this.host.shadowRoot.querySelector('table'),
       isDeferred: true,
-      /*
-       * The below method is e2e-test covered in
-       * @see{module:resize-pinned-position-by-edit-row}
-       */
       callback: /* istanbul ignore next */ async () => {
-        await this.host.componentOnReady().then(() => {
-          this.updateTableRowPinnedPosition();
-          this.updateTableCellPinnedPosition();
-        });
+        await this.host.componentOnReady();
+        this.recomputeRenderInputs();
       },
     });
-    this.previouslyStyledCells = new Set();
-    // Each set tracks cells where exactly one dynamic class was added — cleared per class so
-    // that static classes from render() on the same cell are never inadvertently stripped
-    // (e.g. a cell that is both isRightStartPinned and the last-visible body cell).
-    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() {
   }
-  async componentDidRender() {
-    await this.clearPinnedPositionsTaskQueue.runTask();
-    this.updateTableRowPinnedPosition();
-    const unreadyCells = this.updateTableCellPinnedPosition();
-    if (unreadyCells.length > 0) {
-      // In dev builds, Stencil's HMR flag forces loadModule() to always use a
-      // dynamic import(), so a brand-new cell's first render is deferred. We wait
-      // for each unready cell via componentOnReady() — which resolves exactly when
-      // the cell's shadow <td> is first rendered — then apply sticky positioning.
-      // In production (hotModuleReplacement=false) loadModule() is synchronous, so
-      // cells are always ready by componentDidRender and this branch is never reached.
-      await Promise.all(unreadyCells.map((cell) => cell.componentOnReady()));
-      this.updateTableCellPinnedPosition();
-    }
+  componentDidRender() {
+    this.recomputeRenderInputs();
   }
   watchColumnStructureModel() {
-    void this.clearPinnedPositionsTaskQueue.enqueue({
-      run: async () => {
-        this.clearAllPinnedPositions();
-      },
-    }, false);
   }
-  updateTableCellPinnedPosition() {
+  recomputeRenderInputs() {
+    this.host.style.setProperty('--vega-table-content-width', `${this.host.getBoundingClientRect().width}px`);
     if (!this.columnStructureModel.hasLeftPinnedColumn() &&
       !this.columnStructureModel.hasRightPinnedColumn())
-      return [];
-    // Clear stale dynamic boundary classes before re-evaluating breakpoint visibility.
-    // This ensures the classes are removed when the viewport grows back (e.g. column B
-    // becomes visible again) and not only when the column structure changes.
-    // Each set only removes the single class it tracks, preserving any other static
-    // border classes that render() placed on the same cell (VD-9565).
-    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
-    this.dynamicRightDividerCells.clear();
-    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
-    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.
-    // 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.
+      return;
     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 */
-    if (!row)
-      return [];
-    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
-    const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
-    const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
-    const leafWidths = this.getLeafWidths();
-    // Track the last visible left-pinned head cell and first visible right-pinned head cell
-    // to dynamically apply boundary classes when breakpoint-hidden columns shift the boundary.
-    let lastVisibleLeftPinnedHeadCell = null;
-    let firstVisibleRightPinnedHeadCell = null;
-    let lastVisibleRightPinnedHeadCell = null;
-    headCellRenderInputMap.forEach((renderInput, headCell) => {
-      var _a;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowCell = (_a = headCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
-      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
-      if (isVisible && renderInput.pinned === 'left') {
-        lastVisibleLeftPinnedHeadCell = shadowCell;
-      }
-      if (isVisible && renderInput.pinned === 'right' && !firstVisibleRightPinnedHeadCell) {
-        firstVisibleRightPinnedHeadCell = shadowCell;
-      }
-      if (isVisible && renderInput.pinned === 'right') {
-        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 */
-      if (!(bodyCell === null || bodyCell === void 0 ? void 0 : bodyCell.isConnected)) {
-        pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
-      }
-    });
-    // Collect body cells whose shadow DOM is not yet ready (newly created cells).
-    const unreadyCells = [];
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
-      var _a;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowCell = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
-      // Shadow DOM not ready yet — cell was just created (e.g. colspan collapsed after drag).
-      if (['left', 'right'].includes(renderInput.pinned) && !shadowCell) {
-        unreadyCells.push(bodyCell);
-        return;
-      }
-      this.updateCellPinnedPosition(renderInput, bodyCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
-      if (isVisible && renderInput.pinned === 'left') {
-        // Use the parent row as the grouping key for per-row tracking
-        const parentRow = bodyCell.closest('vega-table-row');
-        if (parentRow) {
-          lastVisibleLeftPinnedBodyCells.set(parentRow, shadowCell);
-        }
-      }
-      if (isVisible && renderInput.pinned === 'right') {
-        const parentRow = bodyCell.closest('vega-table-row');
-        if (parentRow && !firstVisibleRightPinnedBodyCells.has(parentRow)) {
-          firstVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
-        }
-        if (parentRow) {
-          lastVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
-        }
-      }
-    });
-    // Apply boundary divider to the last visible left-pinned cell when the static
-    // isLeftEndPinned column is hidden by breakpoint.
-    if (lastVisibleLeftPinnedHeadCell &&
-      !lastVisibleLeftPinnedHeadCell.classList.contains('right-divider')) {
-      // Check if the static boundary column is hidden — if leafWidths shows 0 for the
-      // isLeftEndPinned column, the boundary has shifted.
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isLeftEndPinned);
-      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
-        lastVisibleLeftPinnedHeadCell.classList.add('right-divider');
-        this.dynamicRightDividerCells.add(lastVisibleLeftPinnedHeadCell);
-        lastVisibleLeftPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `right-divider` from their
-          // static render (effectiveRenderInput.isLeftEndPinned). If we add a
-          // statically-classed cell here, the per-class clear on the next resize
-          // would erroneously remove the static class (VD-9540).
-          if (!cell.classList.contains('right-divider')) {
-            cell.classList.add('right-divider');
-            this.dynamicRightDividerCells.add(cell);
-          }
-        });
-      }
-    }
-    if (firstVisibleRightPinnedHeadCell &&
-      !firstVisibleRightPinnedHeadCell.classList.contains('left-divider')) {
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isRightStartPinned);
-      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
-        firstVisibleRightPinnedHeadCell.classList.add('left-divider');
-        this.dynamicLeftDividerCells.add(firstVisibleRightPinnedHeadCell);
-        firstVisibleRightPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `left-divider` from their
-          // static render (effectiveRenderInput.isRightStartPinned). If we add a
-          // statically-classed cell here, the per-class clear on the next resize
-          // would erroneously remove the static class (VD-9540).
-          if (!cell.classList.contains('left-divider')) {
-            cell.classList.add('left-divider');
-            this.dynamicLeftDividerCells.add(cell);
-          }
-        });
-      }
-    }
-    // Apply hide-right-border to the last visible right-pinned cell when the structural
-    // right-most column is hidden by breakpoint. Without this, the new right-most visible
-    // pinned column keeps a right border while the head cell suppresses it (head cells use
-    // isViewEnd), leaving an extra vertical border at the table's right edge (VD-9565).
-    if (lastVisibleRightPinnedHeadCell &&
-      !lastVisibleRightPinnedHeadCell.classList.contains('hide-right-border')) {
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      // The structural right-most column is the last right-pinned leaf. Leaf render
-      // inputs do not carry `isViewEnd` (unlike head render inputs), so identify the
-      // boundary via `pinned` order instead.
-      const rightPinnedLeaves = leafRenderInputs.filter((leaf) => leaf.pinned === 'right');
-      const structuralEndLeaf = rightPinnedLeaves[rightPinnedLeaves.length - 1];
-      if (structuralEndLeaf && leafWidths[structuralEndLeaf.columnIndex] === 0) {
-        lastVisibleRightPinnedHeadCell.classList.add('hide-right-border');
-        this.dynamicHideRightBorderCells.add(lastVisibleRightPinnedHeadCell);
-        lastVisibleRightPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `hide-right-border` from their
-          // static render (isViewEnd/isNoPinnedEnd). Adding a statically-classed cell
-          // here would let the per-class clear erroneously strip the static class on
-          // the next resize (mirrors the VD-9540 divider guard).
-          if (!cell.classList.contains('hide-right-border')) {
-            cell.classList.add('hide-right-border');
-            this.dynamicHideRightBorderCells.add(cell);
-          }
-        });
-      }
-    }
-    // Sync colspan on pinned body cells that span breakpoint-hidden columns.
-    // Chrome does not honour visibility:collapse / display:none on <col> for table layout,
-    // so we directly adjust the shadow <td> colspan attribute to exclude hidden columns (VD-9540).
-    this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
-    return unreadyCells;
+    if (!(row === null || row === void 0 ? void 0 : row.shadowRoot))
+      return;
+    const [leftRowFixedWidth, rightRowFixedWidth] = this.getRowFixedWidths(row);
+    this.vegaTableRenderInputController.recomputePinnedOffsets(leftRowFixedWidth, rightRowFixedWidth, this.getLeafWidths());
   }
-  /**
-   * 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.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');
-    const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
-    const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
-    const lastTh = rowShadow.querySelector('th:last-of-type');
-    if (firstTh) {
-      const prevWidth = firstTh.getBoundingClientRect().width +
-        ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0) +
-        ((draggableTh === null || draggableTh === void 0 ? void 0 : draggableTh.getBoundingClientRect().width) || 0);
-      const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
-      return [prevWidth, nextWidth];
-    }
-    // to avoid window resize before row rendered.
-    // @see{module:resize-pinned-position-by-edit-row}
+  getRowFixedWidths(row) {
+    const firstCell = row.shadowRoot.querySelector('th:first-of-type');
+    const draggableCell = row.shadowRoot.querySelector('.vega-table-draggable-column');
+    const selectionCell = row.shadowRoot.querySelector('.vega-table-selection-column');
+    const expandCell = row.shadowRoot.querySelector('.vega-table-expand-action-column');
+    const lastCell = row.shadowRoot.querySelector('th:last-of-type');
     /* istanbul ignore next */
-    return [0, 0];
+    if (!firstCell)
+      return [0, 0];
+    return [
+      firstCell.getBoundingClientRect().width +
+        ((selectionCell === null || selectionCell === void 0 ? void 0 : selectionCell.getBoundingClientRect().width) || 0) +
+        ((draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) || 0),
+      ((expandCell === null || expandCell === void 0 ? void 0 : expandCell.getBoundingClientRect().width) || 0) + ((lastCell === null || lastCell === void 0 ? void 0 : lastCell.getBoundingClientRect().width) || 0),
+    ];
   }
   getLeafWidths() {
     const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
-    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-    return leafRenderInputs.map((leaf) => {
-      var _a;
+    return this.vegaTableRenderInputController
+      .getLeafRenderInputs()
+      .map((leaf) => {
+      var _a, _b;
       for (const [cell, renderInput] of headCellRenderInputMap.entries()) {
         if (leaf === renderInput) {
-          // to avoid window resize before cell rendered.
-          // @see{module:resize-pinned-position-by-edit-row}
           /* istanbul ignore next */
-          return ((_a = cell.shadowRoot.querySelector('th, td')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-        }
-      }
-    });
-  }
-  syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap) {
-    // NOTE: renderInput.colSpan is null for flat (non-group) tables — it only holds a value for
-    // group-column subtree spans. We read the original colspan from the component prop (bodyCell.colSpan)
-    // which is always the rendered value, unaffected by our shadow-DOM attribute writes.
-    //
-    // Skip when ALL leaf widths are 0 — that means the table is running in jsdom / an off-screen
-    // context where getBoundingClientRect() always returns 0. Adjusting in that state would
-    // incorrectly reduce every colspan to 1 (no visible columns = Math.max(1,0)=1).
-    if (leafWidths.every((w) => w === 0))
-      return;
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
-      var _a;
-      const originalColspan = bodyCell.colSpan || 1;
-      if (originalColspan <= 1)
-        return;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowTd = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td');
-      /* istanbul ignore next -- shadowTd is always present in jsdom */
-      if (!shadowTd)
-        return;
-      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');
-      if (renderInput.pinned === 'left') {
-        const position = prevShadowThWidth +
-          leafWidths
-            .slice(0, renderInput.columnIndex)
-            .reduce((count, colWidth) => count + colWidth, 0);
-        this.updatePinnedPosition(shadowCell, 'left', position);
-      }
-      if (renderInput.pinned === 'right') {
-        // renderInput.colSpan is null for flat (non-group) tables — it only carries a value
-        // for group-column subtree spans (multi-level headers). For body cells with an HTML
-        // 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 = this.resolveCellColSpan(headCell, renderInput);
-        const position = nextShadowThWidth +
-          leafWidths
-            .slice(renderInput.columnIndex + colSpan)
-            .reduce((count, colWidth) => count + colWidth, 0);
-        this.updatePinnedPosition(shadowCell, 'right', position);
-      }
-    }
-  }
-  updateTableRowPinnedPosition() {
-    const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
-    const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
-    const tableWidth = this.host.getBoundingClientRect().width;
-    const leftPadding = extractNumberFromString(this.paddingX[0]);
-    const rightPadding = extractNumberFromString(this.paddingX[1]);
-    // table width - padding(8*2) - border(2);
-    const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
-    this.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) {
-        const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
-        const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
-        const draggableCell = rowShadow.querySelector('.vega-table-draggable-column');
-        this.updatePinnedPosition(firstCell, 'left', 0);
-        this.updatePinnedPosition(draggableCell, 'left', leftPadding);
-        const draggableCellWidth = (draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) || 0;
-        this.updatePinnedPosition(selectionCell, 'left', leftPadding + draggableCellWidth);
-      }
-      if (hasRightPinnedColumn) {
-        const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
-        const lastCell = rowShadow.querySelector('th:last-of-type, td:last-of-type');
-        this.updatePinnedPosition(expandCell, 'right', rightPadding);
-        this.updatePinnedPosition(lastCell, 'right', 0);
-      }
-      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
-        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
-        if (expandCell) {
-          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
-          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
-          // we should set the width to make the expand slot not scroll by table scroll.
-          // ticket: https://gethired.atlassian.net/browse/VD-7015
-          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+          return ((_b = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
         }
       }
+      return 0;
     });
   }
-  clearAllPinnedPositions() {
-    this.previouslyStyledCells.forEach((cell) => {
-      cell.style.position = '';
-      cell.style.zIndex = '';
-      cell.style.left = '';
-      cell.style.right = '';
-      if (cell.classList.contains('expanded-row-slot-inner')) {
-        cell.style.width = '';
-      }
-    });
-    // Remove boundary classes only from cells where they were dynamically added
-    // (breakpoint-shifted boundaries). Static boundary classes from renderInput are
-    // re-applied by the cell's own render cycle.
-    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
-    this.dynamicRightDividerCells.clear();
-    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
-    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) {
-    if (!cell)
-      return;
-    cell.style.position = 'sticky';
-    cell.style.zIndex = '1';
-    cell.style[type] = `${position}px`;
-    this.previouslyStyledCells.add(cell);
-  }
 }
 __decorate$E([
   MapToComponentField()
@@ -4150,9 +4020,6 @@ __decorate$E([
 __decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
-__decorate$E([
-  MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
 __decorate$E([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "isTemplateRenderMode", void 0);
@@ -5026,6 +4893,7 @@ class VegaTableHeadTemplateStructureController extends VegaSlimmer {
         return;
       const resolvedRowRenderInputs = rowRenderInputs;
       this.vegaTableRenderInputController.addHeadRowRenderInputMap(templateRow, resolvedRowRenderInputs);
+      this.vegaTableRenderInputController.addRowRenderInputMap(templateRow, 'head');
       templateCells.forEach((templateCell, cellIndex) => {
         this.vegaTableRenderInputController.addHeadCellRenderInputMap(templateCell, resolvedRowRenderInputs[cellIndex]);
       });
@@ -6137,6 +6005,7 @@ class VegaTableChildRenderInputConsumerSlimmer extends VegaSlimmer {
   registerRenderInputChangeObserver() {
     this.observer = new Observer((_input) => true, () => {
       this.renderInput = this.fetchRenderInput();
+      forceUpdate(this.host);
     });
     ChangeManager.register(domNodeSubjectFactory.getSubject(this.table, VegaInternalVegaTableRenderInputChange), this.observer);
   }
@@ -6163,7 +6032,7 @@ __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}";
+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.pinned-left{position:sticky;z-index:1;left:var(--pinned-offset-left, 0)}:host .vega-table-cell.pinned-right{position:sticky;z-index:1;right:var(--pinned-offset-right, 0)}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;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$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;
@@ -6208,23 +6077,36 @@ const VegaTableCell = class {
     }
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const leftOffsetPx = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _a !== void 0 ? _a : 0;
+    const rightOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _b !== void 0 ? _b : 0;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
-    const columnClasses = [responsiveClass, columnAlignClass, 'vega-table-cell'];
+    const columnClasses = [
+      responsiveClass,
+      columnAlignClass,
+      'vega-table-cell',
+      pinned === 'left' && 'pinned-left',
+      pinned === 'right' && 'pinned-right',
+    ];
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       columnClasses.push('break-word');
     }
-    if ((_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.isRightStartPinned) {
+    if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isRightStartPinned) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isVisibleRightStartPinned)) {
       columnClasses.push('left-divider');
     }
-    if ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isLeftEndPinned) {
+    if (((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isLeftEndPinned) || ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isVisibleLeftEndPinned)) {
       columnClasses.push('right-divider');
     }
-    if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd)) {
+    if (((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isNoPinnedEnd) ||
+      ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isViewEnd) ||
+      ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isVisibleRightEndPinned)) {
       columnClasses.push('hide-right-border');
     }
+    const effectiveColSpan = (_l = (_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.visibleColSpan) !== null && _l !== void 0 ? _l : this.colSpan;
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
         `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
         this.rowDivider && 'row-divider',
@@ -6233,11 +6115,15 @@ const VegaTableCell = class {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]), "aria-colspan": ((_e = this.colSpan) !== null && _e !== void 0 ? _e : 0) > 1 ? String(this.colSpan) : null }, h("td", { class: arrayToClassString(columnClasses), part: "cell", colSpan: ((_f = this.colSpan) !== null && _f !== void 0 ? _f : 0) > 1 ? this.colSpan : null,
+      ]), "aria-colspan": (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? String(effectiveColSpan) : null }, h("td", { class: arrayToClassString(columnClasses), part: "cell", colSpan: (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? effectiveColSpan : null,
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: this.onMouseEnter.bind(this),
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } }, this.overflow === 'ellipsis' && this.ellipsisShowTooltip ? (h("vega-tooltip", { text: this.ellipsisTooltipText, trigger: this.ellipsisTooltipTrigger, maxWidth: 300, style: { display: 'block', width: '100%', minWidth: '0' } }, h("div", { class: overflowClass, ref: (ref) => {
+      onMouseLeave: this.onMouseLeave.bind(this), style: {
+        'width': this.width,
+        '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+        '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+      } }, this.overflow === 'ellipsis' && this.ellipsisShowTooltip ? (h("vega-tooltip", { text: this.ellipsisTooltipText, trigger: this.ellipsisTooltipTrigger, maxWidth: 300, style: { display: 'block', width: '100%', minWidth: '0' } }, h("div", { class: overflowClass, ref: (ref) => {
         this.overflowContentRef = ref;
       } }, h("slot", { ref: (ref) => {
         this.slotRef = ref;
@@ -6322,22 +6208,27 @@ var __decorate$u = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaTableExpandRowRenderer extends VegaSlimmer {
   render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return (h("tr", { class: {
         'vega-table-expanded-row': true,
         'expanded': this.expanded,
         'checked': this.checked,
         'striped': this.striped,
       }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
-      h("td", null),
+      h("td", { class: { 'pinned-left': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.hasLeftPinnedColumn } }),
       h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
-        h("div", { class: "expanded-row-slot-inner" },
+        h("div", { class: {
+            'expanded-row-slot-inner': true,
+            'pinned-left': ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.hasLeftPinnedColumn) ||
+              ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.hasRightPinnedColumn),
+          }, style: {
+            '--pinned-offset-left': `${(_e = (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.leftPaddingPx) !== null && _e !== void 0 ? _e : 0}px`,
+            '--expand-row-content-width': `calc(var(--vega-table-content-width, 0px) - ${(_g = (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.leftPaddingPx) !== null && _g !== void 0 ? _g : 0}px - ${(_j = (_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.rightPaddingPx) !== null && _j !== void 0 ? _j : 0}px - 2px)`,
+          } },
           h("slot", null))),
-      h("td", null)));
+      h("td", { class: { 'pinned-right': (_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.hasRightPinnedColumn } })));
   }
 }
-__decorate$u([
-  MapToComponentField()
-], VegaTableExpandRowRenderer.prototype, "host", void 0);
 __decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
@@ -6353,6 +6244,9 @@ __decorate$u([
 __decorate$u([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "striped", void 0);
+__decorate$u([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "renderInput", void 0);
 
 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;
@@ -6632,7 +6526,7 @@ __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}";
+const vegaTableExpandRowCss = ":host{display:contents}td.pinned-left,td.pinned-right,.expanded-row-slot-inner.pinned-left{position:sticky;z-index:1}td.pinned-left{left:0}td.pinned-right{right:0}.expanded-row-slot-inner.pinned-left{left:var(--pinned-offset-left, 0);width:var(--expand-row-content-width)}:host .vega-table-expanded-row.striped:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}: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$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;
@@ -6654,6 +6548,7 @@ const VegaTableExpandRow = class {
     this.vegaTableExpandRowStateController = new VegaTableExpandRowStateController();
     this.vegaTableExpandRowColSpanController = new VegaTableExpandRowColSpanController();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnExpandCellRenderInputRIC);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
@@ -6708,6 +6603,9 @@ __decorate$p([
 __decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$p([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 __decorate$p([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
@@ -6878,12 +6776,28 @@ var __decorate$l = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaTableFootCellRenderer extends VegaSlimmer {
   render() {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const effectiveColSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.visibleColSpan) !== null && _a !== void 0 ? _a : this.colSpan;
+    const leftOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _b !== void 0 ? _b : 0;
+    const rightOffsetPx = (_c = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _c !== void 0 ? _c : 0;
     return (h("td", { class: {
         'vega-table-cell': true,
+        'pinned-left': pinned === 'left',
+        'pinned-right': pinned === 'right',
+        'right-divider': ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned) || ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isVisibleLeftEndPinned),
+        'left-divider': ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isRightStartPinned) || ((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isVisibleRightStartPinned),
+        'hide-right-border': ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isNoPinnedEnd) ||
+          ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isViewEnd) ||
+          ((_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.isVisibleRightEndPinned),
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null, style: { width: this.width } },
+      }, colSpan: (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? effectiveColSpan : null, style: {
+        'width': this.width,
+        '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+        '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+      } },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
@@ -6904,8 +6818,11 @@ __decorate$l([
 __decorate$l([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "width", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "renderInput", 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;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}";
+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.pinned-left{position:sticky;z-index:1;left:var(--pinned-offset-left, 0)}:host .vega-table-cell.pinned-right{position:sticky;z-index:1;right:var(--pinned-offset-right, 0)}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;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$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;
@@ -6925,14 +6842,19 @@ const VegaTableFootCell = class {
     this.vegaTableFootCellRenderer = new VegaTableFootCellRenderer();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnFootCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
   }
   render() {
     var _a;
+    let effectiveColSpan = this.colSpan;
+    if (((_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.visibleColSpan) != null) {
+      effectiveColSpan = this.renderInput.visibleColSpan;
+    }
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, "aria-colspan": (effectiveColSpan !== null && effectiveColSpan !== void 0 ? effectiveColSpan : 0) > 1 ? String(effectiveColSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
   }
   get host() { return getElement(this); }
 };
@@ -6951,6 +6873,9 @@ __decorate$k([
 __decorate$k([
   InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$k([
+  InjectVegaSlimmer()
+], VegaTableFootCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 VegaTableFootCell.style = vegaTableFootCellCss;
 
 var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -6963,25 +6888,38 @@ class VegaTableFootRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderFooterSelectionCell = () => {
-      if (this.selectionType !== 'multiple')
+      const renderInput = this.renderInput;
+      if (!(renderInput === null || renderInput === void 0 ? void 0 : renderInput.showSelectionCell))
         return;
-      return h("td", { class: "vega-table-selection-column" });
+      return (h("td", { class: {
+          'vega-table-selection-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } }));
     };
     this.renderFooterExpandableCell = () => {
-      return this.hasExpandableRow && h("td", { class: "vega-table-expand-action-column" });
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showExpandActionCell) && (h("td", { class: {
+          'vega-table-expand-action-column': true,
+          'pinned-right': renderInput.hasRightPinnedColumn,
+        } })));
     };
     this.renderFooterDraggableCell = () => {
-      return this.draggable && h("td", { class: "vega-table-draggable-column" });
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showDraggableCell) && (h("td", { class: {
+          'vega-table-draggable-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } })));
     };
   }
   render() {
+    var _a, _b;
     return (h("tr", null,
-      h("td", { style: { width: this.paddingX[0] } }),
+      h("td", { class: { 'pinned-left': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.hasLeftPinnedColumn }, style: { width: this.paddingX[0] } }),
       this.renderFooterDraggableCell(),
       this.renderFooterSelectionCell(),
       h("slot", null),
       this.renderFooterExpandableCell(),
-      h("td", { style: { width: this.paddingX[1] } })));
+      h("td", { class: { 'pinned-right': (_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.hasRightPinnedColumn }, style: { width: this.paddingX[1] } })));
   }
 }
 __decorate$j([
@@ -6992,13 +6930,7 @@ __decorate$j([
 ], VegaTableFootRowRenderer.prototype, "paddingX", void 0);
 __decorate$j([
   MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "draggable", void 0);
+], VegaTableFootRowRenderer.prototype, "renderInput", void 0);
 
 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;
@@ -7083,7 +7015,7 @@ __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}";
+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}td.pinned-left,td.pinned-right{position:sticky;z-index:1}td.pinned-left:first-of-type{left:0}td.vega-table-draggable-column.pinned-left{left:var(--row-left-padding, 0px)}td.vega-table-selection-column.pinned-left{left:calc(var(--row-left-padding, 0px) + var(--row-draggable-width, 0px))}td.vega-table-expand-action-column.pinned-right{right:var(--row-right-padding, 0px)}td.pinned-right:last-of-type{right:0}:host(.density-default) td:first-of-type,:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;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$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;
@@ -7103,6 +7035,7 @@ const VegaTableFootRow = class {
     this.vegaTableFootRowRenderer = new VegaTableFootRowRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalRowRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates whether the table has a expandable row.
@@ -7110,10 +7043,15 @@ const VegaTableFootRow = class {
     this.hasExpandableRow = false;
   }
   render() {
+    var _a, _b, _c, _d, _e;
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
         'column-divider': this.columnDivider,
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      }, style: {
+        '--row-left-padding': `${(_b = (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.leftPaddingPx) !== null && _b !== void 0 ? _b : 0}px`,
+        '--row-right-padding': `${(_d = (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.rightPaddingPx) !== null && _d !== void 0 ? _d : 0}px`,
+        '--row-draggable-width': ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.showDraggableCell) ? '16px' : '0px',
       } }, this.vegaTableFootRowRenderer.render()), this.host);
   }
   get host() { return getElement(this); }
@@ -7133,6 +7071,9 @@ __decorate$h([
 __decorate$h([
   InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$h([
+  InjectVegaSlimmer()
+], VegaTableFootRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 VegaTableFootRow.style = vegaTableFootRowCss;
 
 var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -7431,7 +7372,7 @@ __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}";
+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.pinned-left{position:sticky;z-index:1;left:var(--pinned-offset-left, 0)}:host .vega-table-cell.pinned-right{position:sticky;z-index:1;right:var(--pinned-offset-right, 0)}:host .vega-table-cell.is-group-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;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;
@@ -7491,7 +7432,11 @@ const VegaTableHeadCell = class {
     this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const renderInput = this.renderInput;
+    const pinned = renderInput === null || renderInput === void 0 ? void 0 : renderInput.pinned;
+    const leftOffsetPx = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.leftOffsetPx) !== null && _a !== void 0 ? _a : 0;
+    const rightOffsetPx = (_b = renderInput === null || renderInput === void 0 ? void 0 : renderInput.rightOffsetPx) !== null && _b !== void 0 ? _b : 0;
     const sortableConfig = this.sorter
       ? {
         role: 'button',
@@ -7506,13 +7451,22 @@ const VegaTableHeadCell = class {
         'column-divider': this.columnDivider,
       } }, h("th", Object.assign({ class: {
         'vega-table-cell': true,
+        'pinned-left': pinned === 'left',
+        'pinned-right': pinned === 'right',
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
-        'is-group-cell': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.headHasGroupColumn,
-        'hide-right-border': ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isViewEnd) || ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd),
-        'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
-        'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
+        'is-group-cell': (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.headHasGroupColumn,
+        'hide-right-border': ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd) ||
+          ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isNoPinnedEnd) ||
+          ((_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.isVisibleRightEndPinned),
+        'right-divider': ((_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.isLeftEndPinned) || ((_h = this.renderInput) === null || _h === void 0 ? void 0 : _h.isVisibleLeftEndPinned),
+        'left-divider': ((_j = this.renderInput) === null || _j === void 0 ? void 0 : _j.isRightStartPinned) ||
+          ((_k = this.renderInput) === null || _k === void 0 ? void 0 : _k.isVisibleRightStartPinned),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan, style: { width: this.width } }), 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: (_l = this.renderInput) === null || _l === void 0 ? void 0 : _l.colSpan, rowSpan: (_m = this.renderInput) === null || _m === void 0 ? void 0 : _m.rowSpan, style: {
+        'width': this.width,
+        '--pinned-offset-left': pinned === 'left' ? `${leftOffsetPx}px` : null,
+        '--pinned-offset-right': pinned === 'right' ? `${rightOffsetPx}px` : null,
+      } }), h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) }, h("span", { class: "vega-table-column-label" }, h("slot", null)), this.sortIconRenderer.render()))), this.host);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -7569,17 +7523,18 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderHeaderSelectionCell = (renderInput) => {
-      if (this.selectionType !== 'multiple')
+      if (!renderInput)
         return;
-      return (h("th", { rowSpan: renderInput.startRowSpan, class: {
+      return (renderInput.showSelectionCell && (h("th", { rowSpan: renderInput.startRowSpan, class: {
           'vega-table-selection-column': true,
           'hidden': renderInput.isStartHidden,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
         } }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
         h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
-          } })))));
+          } }))))));
     };
     this.handleSelectAll = (input) => {
       if (input.eventName === 'vegaChange') {
@@ -7593,15 +7548,21 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
       }
     };
     this.renderHeaderDraggableCell = (renderInput) => {
-      return (this.draggable && (h("th", { rowSpan: renderInput.startRowSpan, class: {
+      if (!renderInput)
+        return;
+      return (renderInput.showDraggableCell && (h("th", { rowSpan: renderInput.startRowSpan, class: {
           'vega-table-draggable-column': true,
           'hidden': renderInput.isStartHidden,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
         } })));
     };
     this.renderHeaderExpandableCell = (renderInput) => {
-      return (this.hasExpandableRow && (h("th", { rowSpan: renderInput.endRowSpan, class: {
+      if (!renderInput)
+        return;
+      return (renderInput.showExpandActionCell && (h("th", { rowSpan: renderInput.endRowSpan, class: {
           'vega-table-expand-action-column': true,
           'hidden': renderInput.isEndHidden,
+          'pinned-right': renderInput.hasRightPinnedColumn,
         } })));
     };
     this.handleClick = (e) => {
@@ -7632,49 +7593,26 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
   }
   render() {
     var _a, _b;
-    const renderInput = this.getRowRenderInput();
+    const renderInput = this.renderInput;
     return (h("tr", { class: {
-        'is-group-row': renderInput.headHasGroupColumn,
-        'is-pinned-row': renderInput.headHasPinnedColumn,
+        'is-group-row': !!(renderInput === null || renderInput === void 0 ? void 0 : renderInput.startRowSpan),
+        'is-pinned-row': (renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasLeftPinnedColumn) || (renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasRightPinnedColumn),
       } },
       h("th", { style: {
           width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0],
-        }, rowSpan: renderInput.startRowSpan, class: {
-          hidden: renderInput.isStartHidden,
+        }, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.startRowSpan, class: {
+          'hidden': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isStartHidden,
+          'pinned-left': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasLeftPinnedColumn,
         } }),
       this.renderHeaderDraggableCell(renderInput),
       this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
       this.renderHeaderExpandableCell(renderInput),
-      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] }, rowSpan: renderInput.endRowSpan, class: {
-          hidden: renderInput.isEndHidden,
+      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] }, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.endRowSpan, class: {
+          'hidden': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isEndHidden,
+          'pinned-right': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasRightPinnedColumn,
         } })));
   }
-  getRowRenderInput() {
-    const renderInput = {};
-    const renderInputs = this.renderInput;
-    const startRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[0];
-    const endRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[renderInputs.length - 1];
-    if (startRenderInput) {
-      renderInput.headHasGroupColumn = startRenderInput.headHasGroupColumn;
-      renderInput.headHasPinnedColumn = startRenderInput.headHasPinnedColumn;
-      if (renderInput.headHasGroupColumn) {
-        renderInput.startRowSpan =
-          this.selectionType === 'multiple' && startRenderInput.level === 0
-            ? startRenderInput.headMaxDepth
-            : startRenderInput.rowSpan;
-        renderInput.isStartHidden =
-          startRenderInput.headHasGroupColumn &&
-            ((this.selectionType === 'multiple' && startRenderInput.level > 0) ||
-              !startRenderInput.isViewStart);
-      }
-    }
-    if (endRenderInput && endRenderInput.headHasGroupColumn) {
-      renderInput.endRowSpan = endRenderInput.rowSpan;
-      renderInput.isEndHidden = startRenderInput.headHasGroupColumn && !endRenderInput.isViewEnd;
-    }
-    return renderInput;
-  }
 }
 __decorate$9([
   MapToComponentField()
@@ -7682,9 +7620,6 @@ __decorate$9([
 __decorate$9([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "paddingX", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "selectionType", void 0);
 __decorate$9([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "hideSelectAll", void 0);
@@ -7694,12 +7629,6 @@ __decorate$9([
 __decorate$9([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "draggable", void 0);
 __decorate$9([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);
@@ -7877,7 +7806,7 @@ __decorate$7([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "draggable", void 0);
 
-const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}:host tr.is-group-row th{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host tr.is-group-row th.hidden{display:none}:host tr.is-group-row th.vega-table-selection-column{border-right-width:1px;border-right-style:solid}:host tr.is-group-row th:first-of-type{border-top-left-radius:0px;border-bottom-left-radius:0px}:host tr.is-group-row th:last-of-type{border-top-right-radius:0px;border-bottom-right-radius:0px}:host tr.is-pinned-row th{position:sticky;z-index:1}:host tr.is-pinned-row th:first-of-type{left:0px}:host tr.is-pinned-row th.vega-table-selection-column{left:8px}:host tr.is-pinned-row th.vega-table-expand-action-column{right:8px}:host tr.is-pinned-row th:last-of-type{right:0px}";
+const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}:host tr.is-group-row th{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host tr.is-group-row th.hidden{display:none}:host tr.is-group-row th.vega-table-selection-column{border-right-width:1px;border-right-style:solid}:host tr.is-group-row th:first-of-type{border-top-left-radius:0px;border-bottom-left-radius:0px}:host tr.is-group-row th:last-of-type{border-top-right-radius:0px;border-bottom-right-radius:0px}:host tr.is-pinned-row th.pinned-left,:host tr.is-pinned-row th.pinned-right{position:sticky;z-index:1}:host tr.is-pinned-row th.pinned-left.pinned-left:first-of-type,:host tr.is-pinned-row th.pinned-right.pinned-left:first-of-type{left:0px}:host tr.is-pinned-row th.pinned-left.vega-table-draggable-column.pinned-left,:host tr.is-pinned-row th.pinned-right.vega-table-draggable-column.pinned-left{left:var(--row-left-padding, 8px)}:host tr.is-pinned-row th.pinned-left.vega-table-selection-column.pinned-left,:host tr.is-pinned-row th.pinned-right.vega-table-selection-column.pinned-left{left:calc(var(--row-left-padding, 8px) + var(--row-draggable-width, 0px))}:host tr.is-pinned-row th.pinned-left.vega-table-expand-action-column.pinned-right,:host tr.is-pinned-row th.pinned-right.vega-table-expand-action-column.pinned-right{right:var(--row-right-padding, 8px)}:host tr.is-pinned-row th.pinned-left.pinned-right:last-of-type,:host tr.is-pinned-row th.pinned-right.pinned-right:last-of-type{right:0px}";
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -7899,7 +7828,7 @@ const VegaTableHeadRow = class {
     this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
-    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnHeadRowRenderInputRIC);
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalRowRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates whether the table has an expandable row.
@@ -7907,10 +7836,17 @@ const VegaTableHeadRow = class {
     this.hasExpandableRow = false;
   }
   render() {
+    var _a, _b, _c, _d, _e;
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
         'column-divider': this.columnDivider,
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      }, style: {
+        '--row-left-padding': `${(_b = (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.leftPaddingPx) !== null && _b !== void 0 ? _b : 0}px`,
+        '--row-right-padding': `${(_d = (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.rightPaddingPx) !== null && _d !== void 0 ? _d : 0}px`,
+        '--row-draggable-width': ((_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.showDraggableCell) && !this.renderInput.isStartHidden
+          ? '16px'
+          : '0px',
       } }, this.vegaTableHeadRowRenderer.render()), this.host);
   }
   get host() { return getElement(this); }
@@ -7955,14 +7891,22 @@ class VegaTableRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderDragIcon = () => {
-      return (this.draggable && (h("td", { class: "vega-table-draggable-column" },
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showDraggableCell) && (h("td", { class: {
+          'vega-table-draggable-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } },
         h("vega-flex", { alignItems: "center" },
           h("vega-icon", { icon: VegaInternalIconManager.getIconKey('grip-dots-vertical'), color: "text-link" })))));
     };
     this.renderRowSelection = () => {
-      if (this.selectionType !== 'multiple')
+      const renderInput = this.renderInput;
+      if (!(renderInput === null || renderInput === void 0 ? void 0 : renderInput.showSelectionCell))
         return;
-      return (h("td", { class: "vega-table-selection-column" },
+      return (h("td", { class: {
+          'vega-table-selection-column': true,
+          'pinned-left': renderInput.hasLeftPinnedColumn,
+        } },
         h("div", { class: "vega-table-checkbox-wrapper" },
           h("vega-checkbox", { size: "small", checked: this.checked, 
             /* eslint-disable-next-line react/jsx-no-bind */
@@ -7973,7 +7917,11 @@ class VegaTableRowRenderer extends VegaSlimmer {
             } }))));
     };
     this.renderExpandIcon = () => {
-      return ((this.expandable || this.hasExpandableRow) && (h("td", { class: "vega-table-expand-action-column" },
+      const renderInput = this.renderInput;
+      return ((renderInput === null || renderInput === void 0 ? void 0 : renderInput.showExpandActionCell) && (h("td", { class: {
+          'vega-table-expand-action-column': true,
+          'pinned-right': renderInput.hasRightPinnedColumn,
+        } },
         h("div", { class: "vega-table-expand-icon-wrapper" }, this.expandable && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick }))))));
     };
     this.onRowClick = () => {
@@ -8009,11 +7957,17 @@ class VegaTableRowRenderer extends VegaSlimmer {
   connectedCallback() {
     this.setParentTableRef();
   }
+  componentDidRender() {
+    var _a, _b;
+    const draggableCell = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vega-table-draggable-column');
+    this.host.style.setProperty('--row-draggable-width', `${(_b = draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0}px`);
+  }
   getParentTableRef() {
     return this.parentTableRef;
   }
   render() {
     var _a, _b;
+    const renderInput = this.renderInput;
     return (h(Fragment, null,
       this.renderExpandRowSpace(this.rowKey),
       h("tr", { class: {
@@ -8025,12 +7979,12 @@ class VegaTableRowRenderer extends VegaSlimmer {
         }, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onClick: this.clickable ? this.onRowClick : null },
-        h("td", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+        h("td", { class: { 'pinned-left': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasLeftPinnedColumn }, style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
         this.renderDragIcon(),
         this.renderRowSelection(),
         h("slot", null),
         this.renderExpandIcon(),
-        h("td", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } }))));
+        h("td", { class: { 'pinned-right': renderInput === null || renderInput === void 0 ? void 0 : renderInput.hasRightPinnedColumn }, style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } }))));
   }
   renderExpandRowSpace(rowKey) {
     return (this.expandable && (h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
@@ -8069,18 +8023,12 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "expandable", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTableRowRenderer.prototype, "hasExpandableRow", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaClick", void 0);
 __decorate$5([
   MapToComponentField()
-], VegaTableRowRenderer.prototype, "selectionType", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTableRowRenderer.prototype, "draggable", void 0);
+], VegaTableRowRenderer.prototype, "renderInput", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowSelectionController", void 0);
@@ -8096,6 +8044,9 @@ __decorate$5([
 __decorate$5([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowRenderer.prototype, "connectedCallback", null);
+__decorate$5([
+  MapToComponentMethod('componentDidRender')
+], VegaTableRowRenderer.prototype, "componentDidRender", null);
 
 var __decorate$4 = (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;
@@ -8474,7 +8425,7 @@ __decorate$1([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);
 
-const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}.vega-table-draggable-column{width:16px;min-width:16px;cursor:move}";
+const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}td.pinned-left,td.pinned-right{position:sticky;z-index:1}td.pinned-left:first-of-type{left:0}td.vega-table-draggable-column.pinned-left{left:var(--row-left-padding, 0px)}td.vega-table-selection-column.pinned-left{left:calc(var(--row-left-padding, 0px) + var(--row-draggable-width, 0px))}td.vega-table-expand-action-column.pinned-right{right:var(--row-right-padding, 0px)}td.pinned-right:last-of-type{right:0}:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}.vega-table-draggable-column{width:16px;min-width:16px;cursor:move}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -8499,6 +8450,7 @@ const VegaTableRow = class {
     this.vegaTableRowExpandController = new VegaTableRowExpandController();
     this.vegaTableRowClickController = new VegaTableRowClickController();
     this.vegaTableRowStateController = new VegaTableRowStateController();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalRowRenderInputRIC);
     this.clickEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaClick);
     this.expandEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaExpand);
     this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
@@ -8529,12 +8481,16 @@ const VegaTableRow = class {
   watchRowDivider() {
   }
   render() {
+    var _a, _b, _c, _d;
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
         'row-divider': this.rowDivider,
         'column-divider': this.columnDivider,
         'striped': this.striped,
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      }, style: {
+        '--row-left-padding': `${(_b = (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.leftPaddingPx) !== null && _b !== void 0 ? _b : 0}px`,
+        '--row-right-padding': `${(_d = (_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.rightPaddingPx) !== null && _d !== void 0 ? _d : 0}px`,
       } }, this.vegaTableRowRenderer.render()), this.host);
   }
   get host() { return getElement(this); }
@@ -8564,6 +8520,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "vegaTableRowStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "clickEventEmitter", void 0);