@globalpayments/vega 2.56.0 → 2.57.1

package/dist/collection/components/vega-table/slimmers/controllers/dto/test/column-structure-model.test.js

@@ -0,0 +1,147 @@
+import { ColumnStructureModel } from '../column-structure-model';
+describe('ColumnStructureModel', () => {
+  it('normal columns', () => {
+    const columns = [
+      { key: 'a', label: 'A' },
+      { label: 'B' },
+      { prop: 'c', label: 'C' },
+    ];
+    const root = ColumnStructureModel.from(columns, null);
+    const keys = root.iterator().map((m) => m.key);
+    expect(keys).toEqual(['a', 'B', 'c']);
+    const leafKeys = root.getLeaves().map((l) => l.key);
+    expect(leafKeys).toEqual(['a', 'B', 'c']);
+    expect(root.hasLeftPinnedColumn()).toBe(false);
+    expect(root.hasRightPinnedColumn()).toBe(false);
+    expect(root.hasGroupColumn()).toBe(false);
+    expect(root.getMaxDepth()).toBe(1);
+    expect(root.generateColumnConfigByLeaves(columns)).toEqual([
+      { key: 'a', label: 'A' },
+      { label: 'B' },
+      { prop: 'c', label: 'C' },
+    ]);
+  });
+  it('normal columns with pinned', () => {
+    const columns = [
+      { key: 'a', label: 'A' },
+      { key: 'c', pinned: 'right', label: 'C' },
+      { key: 'b', pinned: 'left', label: 'B' },
+    ];
+    const root = ColumnStructureModel.from(columns, null);
+    const keys = root.iterator().map((m) => m.key);
+    expect(keys).toEqual(['b', 'a', 'c']);
+    const leafKeys = root.getLeaves().map((l) => l.key);
+    expect(leafKeys).toEqual(['b', 'a', 'c']);
+    expect(root.hasLeftPinnedColumn()).toBe(true);
+    expect(root.hasRightPinnedColumn()).toBe(true);
+    expect(root.hasGroupColumn()).toBe(false);
+    expect(root.getMaxDepth()).toBe(1);
+    expect(root.generateColumnConfigByLeaves(columns)).toEqual([
+      { key: 'b', label: 'B', pinned: 'left' },
+      { key: 'a', label: 'A' },
+      { key: 'c', label: 'C', pinned: 'right' },
+    ]);
+  });
+  it('group columns', () => {
+    const groupConfig = [
+      {
+        key: 'a',
+        label: 'Group A',
+        children: [{ key: 'e' }, { key: 'f' }],
+      },
+      {
+        key: 'b',
+        label: 'Group B',
+        pinned: 'right',
+        children: [{ key: 'g' }],
+      },
+      { key: 'c', label: 'Group C', pinned: 'left' },
+      { key: 'd' },
+    ];
+    const root = ColumnStructureModel.from(null, groupConfig);
+    const keys = root.iterator().map((m) => m.key);
+    expect(keys).toEqual(['c', 'a', 'e', 'f', 'd', 'b', 'g']);
+    const leafKeys = root.getLeaves().map((l) => l.key);
+    expect(leafKeys).toEqual(['c', 'e', 'f', 'd', 'g']);
+    expect(root.hasLeftPinnedColumn()).toBe(true);
+    expect(root.hasRightPinnedColumn()).toBe(true);
+    expect(root.hasGroupColumn()).toBe(true);
+    expect(root.getMaxDepth()).toBe(2);
+    expect(root.generateColumnConfigByLeaves([
+      { key: 'e', label: 'E' },
+      { key: 'c', label: 'C' },
+      { key: 'f', label: 'F' },
+      { key: 'h', label: 'H' },
+      { key: 'd', label: 'D' },
+    ])).toEqual([
+      { key: 'c', label: 'C' },
+      { key: 'e', label: 'E' },
+      { key: 'f', label: 'F' },
+      { key: 'd', label: 'D' },
+      undefined,
+    ]);
+  });
+  it('iterator cache', () => {
+    const groupConfig = [
+      {
+        key: 'a',
+        label: 'Group A',
+        children: [{ key: 'e' }, { key: 'f' }],
+      },
+      { key: 'd' },
+    ];
+    const root = ColumnStructureModel.from(null, groupConfig);
+    expect(root.iterator('bfs')).toEqual([]);
+    const first = root.iterator();
+    const second = root.iterator();
+    expect(first).toBe(second);
+  });
+  it('leaves cache', () => {
+    const groupConfig = [
+      {
+        key: 'a',
+        label: 'Group A',
+        children: [{ key: 'e' }, { key: 'f' }],
+      },
+      { key: 'd' },
+    ];
+    const root = ColumnStructureModel.from(null, groupConfig);
+    const first = root.getLeaves();
+    const second = root.getLeaves();
+    expect(first).toBe(second);
+  });
+  it('order cache', () => {
+    const groupConfig = [
+      {
+        key: 'a',
+        label: 'Group A',
+        children: [{ key: 'e' }, { key: 'f' }],
+      },
+      { key: 'c', label: 'Group C', pinned: 'left' },
+      { key: 'd' },
+    ];
+    const root = ColumnStructureModel.from(null, groupConfig);
+    const first = root['orderChildrenByPinned']();
+    const second = root['orderChildrenByPinned']();
+    expect(first).toBe(second);
+    expect(root.children[0]['orderedChildren']).toEqual([]);
+  });
+  it('handles empty inputs (no columns / groups)', () => {
+    const root = ColumnStructureModel.from([], []);
+    expect(root.children).toEqual([]);
+    expect(root.iterator()).toEqual([]);
+    expect(root.getLeaves()).toEqual([]);
+    expect(root.getMaxDepth()).toBe(0);
+    expect(root.hasGroupColumn()).toBe(false);
+    expect(root.hasLeftPinnedColumn()).toBe(false);
+    expect(root.hasRightPinnedColumn()).toBe(false);
+    expect(root.generateColumnConfigByLeaves([
+      { key: 'e', label: 'E' },
+      { key: 'c', label: 'C' },
+    ])).toEqual([]);
+  });
+  it('call iterator with a not supported type', () => {
+    const root = ColumnStructureModel.from(null, null);
+    expect(root.iterator('not-support')).toEqual([]);
+  });
+});

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-column-structure-model-controller.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { ColumnStructureModel } from './dto/column-structure-model';
+/**
+ * Controller responsible for building and keeping the ColumnStructureModel in sync
+ * with the component's `columns` and `groupColumns` properties.
+ *
+ * This slimmer maps relevant component fields and lifecycle/watch hooks to
+ * automatically rebuild the column structure when inputs change.
+ */
+export class VegaTableColumnStructureModelController extends VegaSlimmer {
+  /**
+   * Component lifecycle hook mapped to the host's componentWillLoad.
+   * Initializes the ColumnStructureModel prior to initial render.
+   */
+  componentWillLoad() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchColumns.
+   * Rebuilds the ColumnStructureModel when `columns` changes.
+   */
+  watchColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchGroupColumns.
+   * Rebuilds the ColumnStructureModel when `groupColumns` changes.
+   */
+  watchGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
+   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   */
+  setColumnStructureModel() {
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "columns", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchColumns')
+], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
+__decorate([
+  MapToComponentMethod('watchGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-render-input-controller.js

@@ -0,0 +1,171 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnBodyCellRenderInputRIC, VegaInternalColumnHeadCellRenderInputRIC, VegaInternalColumnHeadRowRenderInputRIC, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import { ColumnRenderInputModel } from './dto/column-render-input-model';
+/**
+ * VegaTableRenderInputController
+ *
+ * Central controller that computes and provides render input data for table header rows,
+ * header cells and body cells. Responsibilities:
+ * - Build and cache shared header layout context (depth, width, pinned indices).
+ * - Generate per-head-row and per-body-row render inputs used by head/row renderers.
+ * - Expose render inputs to shadow DOM cells via Remote Invocation Call (RIC) registry.
+ */
+export class VegaTableRenderInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.headRowRenderInputMap = new Map();
+    this.headCellRenderInputMap = new Map();
+    this.pinnedColumnBodyCellRenderInputMap = new Map();
+  }
+  /**
+   * Register remote invocation observers when controller is connected.
+   * Called via component lifecycle mapping.
+   */
+  connectedCallback() {
+    this.registerRenderInputRICObserver();
+  }
+  /**
+   * Unregister remote invocation observers when controller is disconnected.
+   * Called via component lifecycle mapping.
+   */
+  disconnectedCallback() {
+    this.unRegisterRenderInputRICObserver();
+  }
+  /**
+   * Initialize head context before component load.
+   * Called via component lifecycle mapping.
+   */
+  componentWillLoad() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Recompute head context when the column structure model changes.
+   * Called via watch mapping.
+   */
+  watchColumnStructureModel() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Return render input models for table body (flattened leaves).
+   *
+   * @returns {ColumnRenderInputModel[]} Flattened array of leaf render input models.
+   */
+  getLeafRenderInputs() {
+    return this.leavesRenderInputModels;
+  }
+  /**
+   * Return render input models for table head (root-level forest).
+   *
+   * @returns {ColumnRenderInputModel[]} Root-level column render input models.
+   */
+  getHeadRenderInputs() {
+    return this.columnRenderInputModels;
+  }
+  /**
+   * Store head row render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headRow - The head row element.
+   * @param {ColumnRenderInputModel[]} renderInputs - Associated render input models.
+   */
+  addHeadRowRenderInputMap(headRow, renderInputs) {
+    this.headRowRenderInputMap.set(headRow, renderInputs);
+  }
+  /**
+   * Store head cell render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headCell - The head cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addHeadCellRenderInputMap(headCell, renderInput) {
+    this.headCellRenderInputMap.set(headCell, renderInput);
+  }
+  /**
+   * Store body cell render input mapping for pinned cells (used to update sticky positions).
+   *
+   * Only stores cells that require sticky positioning (left/right or no-pinned-end).
+   *
+   * @param {HTMLElement} cell - The body cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addCellRenderInputMap(cell, renderInput) {
+    if ((cell && ['left', 'right'].includes(renderInput.pinned)) || renderInput.isNoPinnedEnd) {
+      this.pinnedColumnBodyCellRenderInputMap.set(cell, renderInput);
+    }
+  }
+  /**
+   * Expose the internal head-cell -> render-input mapping.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableHeadCellElement} HTMLVegaTableHeadCellElement
+   * @returns {Map<HTMLVegaTableHeadCellElement, ColumnRenderInputModel>} Map of head cell elements to render input.
+   */
+  getHeadCellRenderInputMap() {
+    return this.headCellRenderInputMap;
+  }
+  /**
+   * Expose the internal map of pinned body cells to their render inputs.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableCellElement} HTMLVegaTableCellElement
+   * @returns {Map<HTMLVegaTableCellElement, ColumnRenderInputModel>} Map of body cell hosts requiring sticky positioning.
+   */
+  getPinnedColumnBodyCellRenderInputMap() {
+    return this.pinnedColumnBodyCellRenderInputMap;
+  }
+  /**
+   * Register remote invocation callbacks to allow DOM nodes to request render inputs.
+   */
+  registerRenderInputRICObserver() {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC), (headRow) => {
+      return this.headRowRenderInputMap.get(headRow);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC), (headCell) => {
+      return this.headCellRenderInputMap.get(headCell);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC), (cell) => {
+      return this.pinnedColumnBodyCellRenderInputMap.get(cell);
+    });
+  }
+  /**
+   * Unregister remote invocation callbacks previously registered.
+   */
+  unRegisterRenderInputRICObserver() {
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC));
+  }
+  /**
+   * Build the ColumnRenderInputModel forest from the current ColumnStructureModel.
+   */
+  setRenderInputModel() {
+    this.columnRenderInputModels = ColumnRenderInputModel.from(this.columnStructureModel);
+    this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderInputController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderInputController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchColumnStructureModel')
+], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);

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

@@ -34,7 +34,9 @@ export class VegaTableBodyRenderer extends VegaSlimmer {
     return this.tableFormRef;
   }
   render() {
-    const editable = this.columns.some((item) => item.editable);
+    const editable = this.columnStructureModel
+      .generateColumnConfigByLeaves(this.columns)
+      .some((item) => item === null || item === void 0 ? void 0 : item.editable);
     return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
@@ -65,3 +67,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);

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

@@ -86,18 +86,36 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
     };
   }
-  render(column, record, index) {
-    const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
-    const columnKey = `${rowKey}_${column.key || column.prop}`;
-    return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow }, this.renderTableCellContent(column, record, index)));
+  render(renderInput, record, index) {
+    const column = this.columns.find((column) => column.key === renderInput.key ||
+      column.prop === renderInput.key ||
+      column.label === renderInput.key);
+    if (column) {
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      const columnKey = `${rowKey}_${column.key || column.prop}`;
+      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+        } }, this.renderTableCellContent(column, record, index)));
+    }
+    else {
+      return (h("vega-table-cell", { key: renderInput.key, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+        } }));
+    }
   }
 }
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-col-group-renderer.js

@@ -20,9 +20,16 @@ export class VegaTableColGroupRenderer extends VegaSlimmer {
     return (h("colgroup", null,
       h("col", { style: { minWidth: this.paddingX[0], width: this.paddingX[0] } }),
       this.vegaTableRowSelectionController.getRowSelectionType() === 'multiple' && (h("col", { style: { minWidth: '40px', width: '40px' } })),
-      this.columns.map((column) => {
-        const responsiveClass = this.getColResponsiveClass(column);
-        return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+      this.columnStructureModel
+        .generateColumnConfigByLeaves(this.columns)
+        .map((column) => {
+        if (column) {
+          const responsiveClass = this.getColResponsiveClass(column);
+          return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+        }
+        else {
+          return h("col", null);
+        }
       }),
       this.rowExpandable && h("col", { style: { minWidth: '40px', width: '40px' } }),
       h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
@@ -31,6 +38,9 @@ export class VegaTableColGroupRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);

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

@@ -11,24 +11,58 @@ import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event
 export class VegaTableHeaderRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderHeaderColumnCells = () => {
-      return this.columns.map((column) => {
+    this.renderHeaderRows = () => {
+      const renderInputs = this.vegaTableRenderInputController.getHeadRenderInputs();
+      const rows = [];
+      let levelRenderInputs = renderInputs;
+      while (levelRenderInputs.length > 0) {
+        rows.push(levelRenderInputs);
+        levelRenderInputs = levelRenderInputs.flatMap((n) => n.children);
+      }
+      return rows.map((cells) => {
         var _a;
+        return (h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll, ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadRowRenderInputMap(ref, cells);
+          } }, cells.map((renderInput) => {
+          if (renderInput.label) {
+            return this.renderGroupCell(renderInput);
+          }
+          else {
+            const column = this.columns.find((column) => column.key === renderInput.key ||
+              column.prop === renderInput.key ||
+              column.label === renderInput.key);
+            return this.renderCell(renderInput, column);
+          }
+        })));
+      });
+    };
+    this.renderGroupCell = (renderInput) => {
+      return (h("vega-table-head-cell", { key: renderInput.key, ref: (ref) => {
+          this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
+        } }, renderInput.label));
+    };
+    this.renderCell = (renderInput, column) => {
+      var _a;
+      if (column) {
         return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), sortConfig: this.sortConfig, breakpoint: column.breakpoint, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
               const sortOrder = input.detail.sortOrder;
               this.vegaTableSortController.handleHeadSortClick(column, sortOrder);
             });
           } }, column.label));
-      });
+      }
+      else {
+        return (h("vega-table-head-cell", { key: renderInput.key, ref: (ref) => {
+            this.vegaTableRenderInputController.addHeadCellRenderInputMap(ref, renderInput);
+          } }));
+      }
     };
   }
   render() {
-    var _a;
-    return (this.showHeader && (h("vega-table-head", null,
-      h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll }, this.renderHeaderColumnCells()))));
+    return this.showHeader && h("vega-table-head", null, this.renderHeaderRows());
   }
 }
 __decorate([
@@ -52,3 +86,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);