@heartlandone/vega 2.72.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-table.entry.js

@@ -0,0 +1,3707 @@
+import { h, F as Fragment, g as Host, r as registerInstance, e as createEvent, i as getElement } from './index-01a2f9c9.js';
+import { V as VegaSlimmer, L as LogUtility, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, a as InjectVegaSlimmer, d as slotPlaceholder, e as InjectVegaGlobalSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { g as getValueByPath } from './object-66c37948.js';
+import { V as VegaTableExpandRowController } from './vega-table-expand-row-controller-22993540.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { k as TABLE_ROW_SELECTION, l as TABLE_ROW_SELECTION_ALL, m as TABLE_ROW_CLICK, S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-6fdf8c8b.js';
+import { f as findParent, a as arrayToClassString, j as extractNumberFromString } from './ui-5f775fd9.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-4219120b.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { L as VegaInternalTableRowSelect, M as VegaInternalTableRowSelectAll, N as VegaInternalColumnHeadRowRenderInputRIC, O as VegaInternalColumnHeadCellRenderInputRIC, P as VegaInternalColumnBodyCellRenderInputRIC } from './vega-internal-event-id-b65a01a3.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { a as VegaClick, h as VegaChange, S as VegaPageSizeChange, d as VegaExpand, W as VegaSelectChange, X as VegaSelectAllChange, Y as VegaRowClick, Z as VegaRowExpand, _ as VegaRowSelect, $ as VegaRowSelectAll } from './vega-event-id-61c8bd9f.js';
+import { r as responsiveFormatFacade } from './responsive-format-facade-d4abfdb9.js';
+import { i as isNonNullable, w as isBreakpointsTokenType, aj as isVegaTableColumnGroupingModelType } from './type-guard-09acedc9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-ee8774a6.js';
+import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-7065c745.js';
+import { T as TagNameMutationFilter } from './mutation-observer-filters-6c515793.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-2c2e1a57.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { I as ImmutableMap } from './immutable-map-612922a2.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './number-4398f2e1.js';
+import './ui-189dae23.js';
+import './pixel-f32c07ce.js';
+import './breakpoints-d9faf11c.js';
+import './array-a1d98264.js';
+import './public-api-a77a0b33.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-event-manager-826279b7.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './feature-flag-controller-24b9f956.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+import './dark-mode-style-controller-e2a2f76c.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './try-get-document-bef0f526.js';
+import './internal-icon-manager-9279071a.js';
+import './valid-credit-card-number-rule-04b032a6.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './index-b04c1ee0.js';
+import './index-81ce67e2.js';
+import './content-state-fc9d98e0.js';
+import './code-block-b5f8fc8a.js';
+import './string-a953eafc.js';
+import './dto-renderer-manager-12bc9121.js';
+import './base-renderer-101f6d04.js';
+import './column-operation-a1620c67.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+import './typography-396de03f.js';
+
+/**
+ * Immutable Set cannot be changed once created
+ */
+class ImmutableSet {
+  /**
+   * The constructor of ImmutableSet
+   *
+   * @typedef T generic type parameter
+   * @param {Set<T>} initialSet - The initial set to use. If not provided, the set will be empty.
+   * @param {() => void} onMutate - A callback function that will be called whenever the set is mutated.
+   */
+  constructor(initialSet, onMutate) {
+    this.size = 0;
+    this.set = new Set();
+    if (initialSet) {
+      this.set = initialSet;
+      this.size = initialSet.size;
+    }
+    if (onMutate) {
+      this.onMutate = onMutate;
+    }
+  }
+  /**
+   * The function is called when the set is mutated
+   *
+   * @param {Immutable<Set<T>>} _newSet - The new set that was created.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMutate(_newSet) {
+    return;
+  }
+  /**
+   * Add new items to the set, and then call the onMutate with the new ImmutableSet
+   *
+   * @typedef T generic type parameter
+   * @param {T[]} value  - The items to add to the set.
+   * @returns {ImmutableSet<T>} A new ImmutableSet with the new items added.
+   */
+  add(...value) {
+    return this.withMutation((set) => {
+      value.forEach((value) => set.add(value));
+    });
+  }
+  /**
+   * clear the set values
+   *
+   * @typedef T generic type parameter
+   */
+  clear() {
+    this.withMutation((set) => set.clear());
+  }
+  /**
+   * delete item from set
+   *
+   * @typedef T generic type parameter
+   * @param {T} value - The key to delete from the set.
+   * @returns {ImmutableSet<T>} A new ImmutableSet
+   */
+  delete(value) {
+    return this.withMutation((set) => {
+      set.delete(value);
+    });
+  }
+  /**
+   * It takes a function that mutates a set, and returns a new immutable set that is the result of that mutation
+   *
+   * @param {(set: Set<T>) => void} fn - (set: Set<T>) => void
+   * @returns {ImmutableSet<T>} A new ImmutableSet
+   */
+  withMutation(fn) {
+    const newSet = new Set(this.set);
+    fn(newSet);
+    const newImmutableSet = new ImmutableSet(newSet, this.onMutate);
+    this.onMutate(newImmutableSet);
+    return newImmutableSet;
+  }
+  /**
+   * It returns true if the value is in the set, and false otherwise
+   *
+   * @typedef T generic type parameter
+   * @param {T} value - The value to check for.
+   * @returns {boolean} A boolean value.
+   */
+  has(value) {
+    return this.set.has(value);
+  }
+  /**
+   * It returns an array of the values in the set
+   *
+   * @returns {T[]} An array of the values in the set.
+   */
+  toArray() {
+    return [...this.set];
+  }
+}
+
+const VegaTableEditableFieldTypes = [
+  'input',
+  'input-select',
+  'stepper',
+  'checkbox',
+  'textarea',
+  'combo-box',
+  'date-picker',
+  'time-picker',
+];
+
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+class VegaTableCellRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableCellContent = (column, record, index) => {
+      var _a, _b;
+      const value = getValueByPath(record, column.prop);
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      const isNewRow = !this.vegaTableDataSourceController
+        .getDataSource()
+        .find((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+      const editing = this.vegaTableEditableController.isEditing(rowKey);
+      const rowForm = this.vegaTableEditableController.getRowFormRefMap().get(rowKey);
+      if (editing && rowForm && column.renderFormItem) {
+        return column.renderFormItem(h, column.prop ? value : rowKey, record, index, {
+          rowForm,
+          isNewRow,
+        });
+      }
+      if (editing && rowForm && column.editable) {
+        const formItemProps = (_a = column.formItemProps) === null || _a === void 0 ? void 0 : _a.call(column, rowForm, {
+          record,
+          index,
+        });
+        const mergedProps = Object.assign({ dataVegaForm: (formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.dataVegaForm) || column.prop, size: 'small', value: value }, (_b = column.formItemProps) === null || _b === void 0 ? void 0 : _b.call(column, rowForm, { record, index }));
+        return this.generateEditComponentByType(column.formItemType, mergedProps);
+      }
+      if (column.render) {
+        return column.render(h, column.prop ? value : rowKey, record, index);
+      }
+      if (typeof value === 'string' || typeof value === 'number') {
+        return String(value);
+      }
+      else if (typeof value === 'undefined' || value === null) {
+        return '';
+      }
+      else {
+        LogUtility.error(`Column ${column.prop}'s value has a wrong type(${typeof record[column.prop]}) in table cell. Only 'VegaTableNode | string | number' can be rendered in table cell`);
+      }
+    };
+    /**
+     * Generate edit component by
+     *
+     * @param {VegaTableFormItemType} type - The type of the vega components
+     * @param {VegaTableEditComponentProps} props - The component props
+     * @returns {VegaTableNode} The node of VegaTable
+     */
+    this.generateEditComponentByType = (type = 'input', props) => {
+      const tagName = `vega-${type}`;
+      const { dataVegaForm } = props, componentProps = __rest$1(props, ["dataVegaForm"]);
+      if (!this.isVegaTableEditableFieldType(tagName)) {
+        LogUtility.error(`Type must be one of the form field types. [${VegaTableEditableFieldTypes.join(',')}]`);
+        return;
+      }
+      return h(tagName, Object.assign(Object.assign({}, componentProps), { 'data-vega-form': dataVegaForm }));
+    };
+    /**
+     * Verify the tagName is editable field type
+     *
+     * @param {string} tagName The component tag name
+     * @returns {boolean} return true if the tagName is editable field in VegaTable
+     */
+    this.isVegaTableEditableFieldType = (tagName) => {
+      return (tagName.toUpperCase().startsWith('VEGA') &&
+        new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
+    };
+  }
+  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$i([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "rowKey", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "columns", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
+
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ *
+ */
+class VegaTableRowSelectionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The method for handling row selection change
+     *
+     * @param {boolean} checked - true: the row is selected, otherwise not selected
+     * @param {VegaTableDataSourceItem} record - The record of the changed row
+     */
+    this.handleRowSelect = (checked, record) => {
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      let isChanged = false;
+      if (checked) {
+        if (!this.selectedRowKeySet.has(rowKey)) {
+          this.selectedRowKeySet.add(rowKey);
+          isChanged = true;
+        }
+      }
+      else {
+        if (this.selectedRowKeySet.has(rowKey)) {
+          this.selectedRowKeySet.delete(rowKey);
+          isChanged = true;
+        }
+      }
+      if (isChanged) {
+        this.selectChangeEventEmitter.emit({
+          selected: checked,
+          record: record,
+          selectedRows: this.getSelectedRecords(),
+        });
+      }
+    };
+    /**
+     * Get the row selection type
+     *
+     * @returns {Nullable<'multiple' | 'single'>} Return the type of the row selection
+     */
+    this.getRowSelectionType = () => {
+      if (!this.rowSelection)
+        return;
+      return this.rowSelection.type || 'multiple';
+    };
+    /**
+     * The method for handing the single row selection
+     *
+     * @param {VegaTableDataSourceItem} record - The record of the single selected row
+     */
+    this.handleSingleRowSelect = (record) => {
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      if (this.isChecked(rowKey)) {
+        this.handleRowSelect(false, record);
+      }
+      else {
+        this.selectedRowKeySet.clear();
+        this.handleRowSelect(true, record);
+      }
+    };
+    /**
+     * Verify the row is checked or not for row selection
+     *
+     * @param {string} key - The row key of the row
+     * @returns {boolean} Return true if the row is selected, otherwise false
+     */
+    this.isChecked = (key) => {
+      return this.selectedRowKeySet.has(key);
+    };
+    /**
+     * The method to handling select all rows
+     *
+     * @param {boolean} checkedAll - true: all rows are selected; false: not selected all rows
+     */
+    this.handleSelectAll = (checkedAll) => {
+      if (checkedAll) {
+        const recordKeys = this.vegaTableDataSourceController.getAllRecordKeys();
+        this.selectedRowKeySet.add(...recordKeys.filter((key) => !this.selectedRowKeySet.has(key)));
+      }
+      else {
+        if (this.isCheckedAll()) {
+          this.selectedRowKeySet.clear();
+        }
+      }
+    };
+    /**
+     * Verify if all rows are selected
+     *
+     * @returns {boolean} return true if all rows are selected, otherwise false
+     */
+    this.isCheckedAll = () => {
+      return (this.selectedRowKeySet.size > 0 &&
+        this.vegaTableDataSourceController
+          .getCurrentData()
+          .every((record) => this.selectedRowKeySet.has(this.vegaTableDataSourceController.getRecordKey(record))));
+    };
+    /**
+     * Set up the row selection config
+     *
+     * @param {VegaTableRowSelectionConfig} config - The config of the row selection
+     */
+    this.setupRowSelection = (config) => {
+      this.rowSelection = Object.assign({ hideSelectAll: false, type: 'multiple' }, config);
+    };
+    /**
+     * Get the selected rows records array
+     *
+     * @returns {VegaTableDataSourceItem[]} The array of the all selected row's records
+     */
+    this.getSelectedRecords = () => {
+      return this.selectedRowKeySet
+        .toArray()
+        .map(this.vegaTableDataSourceController.getRecordByKey)
+        .filter(Boolean);
+    };
+    /**
+     * Sync up the selected row's key when current data changed
+     *
+     * @param {VegaTableDataSourceItem[]} currentData - The current data of the source
+     */
+    this.syncUpSelectedKeySetWithCurrentData = (currentData) => {
+      this.selectedRowKeySet.withMutation((set) => {
+        set.clear();
+        currentData.forEach((item) => {
+          const rowKey = this.vegaTableDataSourceController.getRecordKey(item);
+          if (this.selectedRowKeySet.has(rowKey)) {
+            set.add(rowKey);
+          }
+        });
+      });
+    };
+  }
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.initRowSelection();
+    this.initRowClickObserver();
+    this.initRowSelectionAllObserver();
+  }
+  /**
+   *
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+    ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+    ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    if (this.rowSelection) {
+      this.setupRowSelection(this.rowSelection);
+    }
+  }
+  /**
+   * The callback to handle [watchRowSelection]{@link VegaTable.watchRowSelection}
+   *
+   * @param {VegaTableRowSelectionConfig} newValue - The changed value of rowSelection
+   * @param {VegaTableRowSelectionConfig} oldValue - The value of rowSelection before changing
+   */
+  watchRowSelection(newValue, oldValue) {
+    if ((oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) !== (newValue === null || newValue === void 0 ? void 0 : newValue.type)) {
+      void this.clearSelection();
+    }
+  }
+  /**
+   * The callback to handle [setSelection]{@link VegaTable.setSelection}
+   *
+   * @param {string[]} keys - The keys array of which you want to select
+   */
+  setSelection(keys) {
+    if (this.getRowSelectionType() === 'single') {
+      keys.splice(1);
+    }
+    this.selectedRowKeySet.toArray().forEach((key) => {
+      ChangeManager.notify(TABLE_ROW_SELECTION, {
+        host: this.host,
+        rowKey: key,
+        checked: false,
+      });
+    });
+    this.selectedRowKeySet.clear();
+    keys.forEach((key) => {
+      if (this.vegaTableDataSourceController.getRecordByKey(key)) {
+        this.selectedRowKeySet.add(key);
+        ChangeManager.notify(TABLE_ROW_SELECTION, {
+          host: this.host,
+          rowKey: key,
+          checked: true,
+        });
+      }
+    });
+  }
+  /**
+   * The callback to handle [watchCurrentData]{@link VegaTable.watchCurrentData}
+   *
+   * @param {VegaTableDataSourceItem} currentData - The changed value of currentData
+   */
+  watchCurrentData(currentData) {
+    this.syncUpSelectedKeySetWithCurrentData(currentData);
+  }
+  /**
+   * The callback to handle [clearSelection]{@link VegaTable.clearSelection}
+   */
+  clearSelection() {
+    this.selectedRowKeySet.clear();
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: false,
+      noneChecked: this.selectedRowKeySet.size === 0,
+    });
+  }
+  /**
+   * The callback to handle [getSelection]{@link VegaTable.getSelection}
+   *
+   * @returns {string[]} The selected row keys array
+   */
+  getSelection() {
+    return this.selectedRowKeySet.toArray();
+  }
+  /**
+   *
+   */
+  watchSelectedRowKeySet() {
+    this.isSelectedAll = this.isCheckedAll();
+  }
+  /**
+   *
+   */
+  watchSelectedAll() {
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: this.isCheckedAll(),
+      noneChecked: this.selectedRowKeySet.size === 0,
+    });
+    this.selectAllChangeEventEmitter.emit({
+      selected: this.isCheckedAll(),
+      selectedRows: this.getSelectedRecords(),
+    });
+  }
+  /**
+   * The function checks if the input is an acceptable table row observer by verifying its host tag name and ensuring it is a child of a vega-table element.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean} boolean value indicating whether the input is of type T and satisfies certain conditions.
+   */
+  isAcceptableRowSelectionObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-TABLE') {
+      return this.host === input['host'];
+    }
+    if (input['host']['tagName'] === 'VEGA-TABLE-ROW') {
+      return this.host === findParent(input['host'], 'vega-table');
+    }
+  }
+  /**
+   * The function checks if the input is an acceptable observer for a table head row in a Vega table.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean}  boolean value.
+   */
+  isAcceptableRowSelectionAllObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-TABLE') {
+      return this.host === input['host'];
+    }
+    if (input['host']['tagName'] === 'VEGA-TABLE-HEAD-ROW') {
+      return this.host === findParent(input['host'], 'vega-table');
+    }
+  }
+  /**
+   * The function initializes a row selection.
+   */
+  initRowSelection() {
+    this.rowSelectionObserver = new Observer(this.isAcceptableRowSelectionObserver.bind(this), (payload) => {
+      const { rowKey, checked } = payload;
+      const record = this.vegaTableDataSourceController.getRecordByKey(rowKey);
+      this.handleRowSelect(checked, record);
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
+      return this.rowSelectEventEmitter.emit({
+        selected: checked,
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        selectedRows: this.getSelectedRecords(),
+      });
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
+      return this.rowSelectAllEventEmitter.emit({
+        selected: checked,
+        selectedRows: this.getSelectedRecords(),
+        changedRows: checked
+          ? this.vegaTableDataSourceController
+            .getCurrentData()
+            .filter((record) => !this.selectedRowKeySet.has(record.key))
+          : this.getSelectedRecords(),
+      });
+    });
+  }
+  /**
+   * The function initializes an observer for row selection all in a table
+   */
+  initRowSelectionAllObserver() {
+    this.rowSelectionAllObserver = new Observer(this.isAcceptableRowSelectionAllObserver.bind(this), (payload) => {
+      this.handleSelectAll(payload.checked);
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+  /**
+   * The function initializes a row click observer that handles row selection in a table.
+   */
+  initRowClickObserver() {
+    this.rowClickObserver = new Observer(this.isAcceptableRowClickObserver.bind(this), (payload) => {
+      if (this.getRowSelectionType() === 'single') {
+        const record = this.vegaTableDataSourceController.getRecordByKey(payload.rowKey);
+        this.handleSingleRowSelect(record);
+      }
+    });
+    ChangeManager.register(TABLE_ROW_CLICK, this.rowClickObserver);
+  }
+  /**
+   * The function checks if the input is an acceptable row click observer.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  isAcceptableRowClickObserver(input) {
+    return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
+      this.host === findParent(input['host'], 'vega-table'));
+  }
+}
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "host", void 0);
+__decorate$h([
+  MapToComponentField({ writable: true })
+], VegaTableRowSelectionController.prototype, "isSelectedAll", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "selectedRowKeySet", void 0);
+__decorate$h([
+  MapToComponentField({ writable: true })
+], VegaTableRowSelectionController.prototype, "rowSelection", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowKey", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "selectChangeEventEmitter", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "selectAllChangeEventEmitter", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowSelectEventEmitter", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowSelectAllEventEmitter", void 0);
+__decorate$h([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowSelectionController.prototype, "connectedCallback", null);
+__decorate$h([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowSelectionController.prototype, "disconnectedCallback", null);
+__decorate$h([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRowSelectionController.prototype, "componentWillLoad", null);
+__decorate$h([
+  MapToComponentMethod('watchRowSelection')
+], VegaTableRowSelectionController.prototype, "watchRowSelection", null);
+__decorate$h([
+  MapToComponentMethod('setSelection')
+], VegaTableRowSelectionController.prototype, "setSelection", null);
+__decorate$h([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableRowSelectionController.prototype, "watchCurrentData", null);
+__decorate$h([
+  MapToComponentMethod('clearSelection')
+], VegaTableRowSelectionController.prototype, "clearSelection", null);
+__decorate$h([
+  MapToComponentMethod('getSelection')
+], VegaTableRowSelectionController.prototype, "getSelection", null);
+__decorate$h([
+  MapToComponentMethod('watchSelectedRowKeySet')
+], VegaTableRowSelectionController.prototype, "watchSelectedRowKeySet", null);
+__decorate$h([
+  MapToComponentMethod('watchSelectedAll')
+], VegaTableRowSelectionController.prototype, "watchSelectedAll", null);
+
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The dataSource controller for the vega-table
+ */
+class VegaTableDataSourceController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the key of the record
+     *
+     * @param {VegaTableDataSourceItem} record - The record of the dataSource
+     * @returns {string} The key of the record
+     */
+    this.getRecordKey = (record) => {
+      if (record[this.rowKey] !== undefined && record[this.rowKey] !== null) {
+        return String(record[this.rowKey]);
+      }
+      else {
+        return '';
+      }
+    };
+    /**
+     * Get the record from [currentData]{@link currentData} by key
+     *
+     * @param {string} key - The key of the record
+     * @returns {VegaTableDataSourceItem} The record of the [currentData]{@link currentData}
+     */
+    this.getRecordByKey = (key) => {
+      return this.currentData.find((record) => this.getRecordKey(record) === key);
+    };
+    /**
+     * Update the [currentData]{@link currentData} by new data source
+     *
+     * @param {VegaTableDataSourceItem[]} data - New data source
+     */
+    this.setCurrentData = (data) => {
+      if (this.tableDataValidation(data)) {
+        this.currentData = data;
+      }
+      else {
+        this.currentData = [];
+      }
+    };
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.vegaTableSortController.syncSortOrder();
+    this.syncCurrentData();
+  }
+  /**
+   * The callback of [watchSortersMap]{@link VegaTable.watchSortersMap}
+   */
+  watchSortersMap() {
+    this.syncCurrentData();
+  }
+  /**
+   * The callback of watchDataSource
+   */
+  watchDataSource() {
+    this.syncCurrentData();
+  }
+  /**
+   * Get currentData item keys
+   *
+   * @returns {string[]} The key array of currentData
+   */
+  getAllRecordKeys() {
+    return this.currentData.map(this.getRecordKey);
+  }
+  /**
+   * The getter of dataSource
+   *
+   * @returns {VegaTableDataSourceItem[]} The value of dataSource
+   */
+  getDataSource() {
+    return this.dataSource;
+  }
+  /**
+   * The setter of [dataSource]{@link dataSource}
+   *
+   * @param {VegaTableDataSourceItem[]} data - The new data source
+   */
+  setDataSource(data) {
+    this.dataSource = data;
+  }
+  /**
+   * The getter of [currentData]{@link currentData}
+   *
+   * @returns {VegaTableDataSourceItem[]} the value of currentData
+   */
+  getCurrentData() {
+    return this.currentData;
+  }
+  /**
+   * Check whether the currentData is empty
+   *
+   * @returns {boolean} return true if the currentData is empty
+   */
+  isCurrentDataEmpty() {
+    return this.currentData.length === 0;
+  }
+  /**
+   * Verify whether the data is valid
+   *
+   * @param {VegaTableDataSourceItem[]} data - The data source
+   * @returns {boolean} Return true if the data is valid, otherwise false
+   */
+  tableDataValidation(data) {
+    if (data.some((item) => !this.getRecordKey(item))) {
+      LogUtility.error('Each item in dataSource should have a unique "key" prop.', ' Otherwise, you should specify the primary key of dataSource item via rowKey.', ' For more details, please refer to: https://heartlandpayments.github.io/Vega/?path=/docs/components-table-v2--basic-table#rowkey');
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Update the currentData with sorted data if there is sorted status.
+   * Otherwise, update with the dataSource directly
+   */
+  syncCurrentData() {
+    if (this.isTemplateRenderMode) {
+      return;
+    }
+    const sortedColumns = this.sortersMap.size > 0
+      ? this.columns.filter((column) => column.sorter && column.sorter !== 'event' && this.sortersMap.has(column.prop))
+      : [];
+    if (sortedColumns.length > 0) {
+      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, Array.from(this.sortersMap.values())));
+    }
+    else {
+      this.setCurrentData(this.dataSource);
+    }
+  }
+}
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "rowKey", void 0);
+__decorate$g([
+  MapToComponentField({ writable: true })
+], VegaTableDataSourceController.prototype, "currentData", void 0);
+__decorate$g([
+  MapToComponentField({ writable: true })
+], VegaTableDataSourceController.prototype, "dataSource", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "columns", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "sortersMap", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
+__decorate$g([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableDataSourceController.prototype, "componentWillLoad", null);
+__decorate$g([
+  MapToComponentMethod('watchSortersMap')
+], VegaTableDataSourceController.prototype, "watchSortersMap", null);
+__decorate$g([
+  MapToComponentMethod('watchDataSource')
+], VegaTableDataSourceController.prototype, "watchDataSource", null);
+
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableBodyRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableBody = (editable) => {
+      const currentData = this.vegaTableDataSourceController.getCurrentData();
+      return (h("vega-table-body", null, currentData.map((record, index) => {
+        const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+        const isVisibleInCurrentPage = this.vegaTablePaginationController.isRowVisible(index);
+        const isLastRow = index === currentData.length - 1;
+        return (h(Fragment, null,
+          this.vegaTableRowRenderer.render({
+            rowKey,
+            index,
+            record,
+            isVisibleInCurrentPage,
+            isLastRow: isLastRow,
+          }, editable),
+          this.rowExpandable && (h("vega-table-expand-row", { class: {
+              'v-hidden': !isVisibleInCurrentPage,
+            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index % 2 === 1 },
+            h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
+      })));
+    };
+  }
+  getTableFormRef() {
+    return this.tableFormRef;
+  }
+  render() {
+    const editable = this.columnStructureModel
+      .generateColumnConfigByLeaves(this.columns)
+      .some((item) => item === null || item === void 0 ? void 0 : item.editable);
+    return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
+  }
+}
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "striped", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columns", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
+
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableHeaderRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    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() {
+    return this.showHeader && h("vega-table-head", null, this.renderHeaderRows());
+  }
+}
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "columns", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);
+
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+class VegaTablePaginationRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.paginationRefCallback = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handlePaginationChange);
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPageSizeChange, this.handlePaginationPageSizeChange);
+    };
+    /**
+     * handle the pagination page change after observer the notify
+     *
+     * @param {NotifyObserverPayload<number>} input payload message, detail is the current page index
+     */
+    this.handlePaginationChange = (input) => {
+      var _a, _b;
+      this.vegaTablePaginationController.setCurrentPage(input.detail);
+      const event = new CustomEvent('vegaChange', { detail: input.detail });
+      (_b = (_a = this.pagination).vegaChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    };
+    /**
+     * handle the pagination page size change after observer the notify
+     *
+     * @param {NotifyObserverPayload<number>} input payload message, detail is the current page size
+     */
+    this.handlePaginationPageSizeChange = (input) => {
+      var _a, _b;
+      this.vegaTablePaginationController.setPageSize(input.detail);
+      const event = new CustomEvent('vegaPageSizeChange', {
+        detail: input.detail,
+      });
+      (_b = (_a = this.pagination).vegaPageSizeChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    };
+    this.getPaginationConfig = () => {
+      const _a = this.pagination, { position } = _a, otherProps = __rest(_a, ["position"]);
+      const currentExtensions = responsiveFormatFacade.formatCustom(this.pagination.extensions);
+      return Object.assign(Object.assign({}, otherProps), { position: (currentExtensions === null || currentExtensions === void 0 ? void 0 : currentExtensions.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
+    };
+  }
+  render() {
+    if (!this.pagination)
+      return;
+    const { pageSize, position, extensions, pageSizeSelectorOptions } = this.getPaginationConfig();
+    const paginationWrapperClasses = ['vega-table-pagination-container', position];
+    const total = this.vegaTableDataSourceController.getCurrentData().length;
+    return (total > 0 && (h("div", { class: arrayToClassString(paginationWrapperClasses) },
+      h("vega-pagination", { total: total, pageSize: pageSize, current: this.currentPage, extensions: extensions, pageSizeSelectorOptions: pageSizeSelectorOptions, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: this.paginationRefCallback }))));
+  }
+}
+__decorate$d([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "pagination", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
+
+const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, children) => {
+  const { maxHeight } = scrollConfig;
+  const isVerticalScrollable = isNonNullable(maxHeight);
+  const handleVerticalScroll = (e) => {
+    if (!isVerticalScrollable)
+      return;
+    const target = e.target;
+    if (target.scrollTop === 0) {
+      target.classList.remove('scrolled');
+      return;
+    }
+    if (target.scrollTop > 0 && !target.classList.contains('scrolled')) {
+      target.classList.add('scrolled');
+    }
+    onScroll(e);
+  };
+  return (h("div", { class: "vega-table-scrollable-container", style: {
+      maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+    }, ref: ref, 
+    /* eslint-disable-next-line react/jsx-no-bind */
+    onScroll: handleVerticalScroll }, children));
+};
+
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableScrollContainerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.scrollContainerToTop = () => {
+      if (this.tableScrollContainerRef) {
+        this.tableScrollContainerRef.scrollTop = 0;
+      }
+    };
+    this.notifyContentScrolling = () => {
+      this.isTemplateRenderMode &&
+        ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.host,
+        });
+    };
+  }
+  watchCurrentPage() {
+    this.scrollContainerToTop();
+  }
+  render(children) {
+    return (h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref), 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onScroll: () => this.notifyContentScrolling() }, children));
+  }
+  setTableScrollContainerRef(ref) {
+    this.tableScrollContainerRef = ref;
+  }
+}
+__decorate$c([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "host", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$c([
+  MapToComponentMethod('watchCurrentPage')
+], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderInternalTable = () => {
+      const tableLayoutFixed = this.columns.some((column) => column.overflow) ||
+        Array.from(this.host.querySelectorAll('vega-table-cell')).some((cell) => cell.overflow);
+      return (h("table", { class: {
+          'v-table-fixed': tableLayoutFixed,
+        } },
+        this.columns.length > 0 && [
+          this.vegaTableColGroupRenderer.render(),
+          this.vegaTableHeaderRenderer.render(),
+        ],
+        (this.dataSource.length > 0 || this.editingRows.size > 0) &&
+          this.vegaTableBodyRenderer.render(),
+        this.isTemplateRenderMode && h("slot", null)));
+    };
+    this.renderEmpty = () => {
+      return (this.vegaTableDataSourceController.isCurrentDataEmpty() &&
+        this.emptyDescription && (h("div", { class: "vega-table-empty-description" }, this.translationSlimmer.t(this.emptyDescription))));
+    };
+  }
+  render() {
+    const hostClasses = arrayToClassString([
+      this.rowDivider && 'row-divider',
+      this.columnDivider && 'column-divider',
+      `density-${responsiveFormatFacade.formatCustom(this.density)}`,
+      this.striped && 'striped',
+      this.columnStructureModel.hasGroupColumn() && 'is-group-table',
+      (this.columnStructureModel.hasLeftPinnedColumn() ||
+        this.columnStructureModel.hasRightPinnedColumn()) &&
+        'is-pinned-table',
+    ]);
+    return sanitizeVegaComponent(h(Host, { class: hostClasses },
+      this.vegaTableScrollContainerRenderer.render(this.renderInternalTable()),
+      this.vegaTablePaginationRenderer.render(),
+      this.renderEmpty()), this.host);
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "host", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columns", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "emptyDescription", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "rowDivider", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnDivider", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "density", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "dataSource", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "striped", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnStructureModel", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "translationSlimmer", void 0);
+__decorate$b([
+  MapToComponentField({ writable: true })
+], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "editingRows", void 0);
+
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The table pagination of VegaTable
+ */
+class VegaTablePaginationController extends VegaSlimmer {
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    var _a, _b;
+    this.currentPage = ((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.current) || 1;
+    this.pageSize = ((_b = this.pagination) === null || _b === void 0 ? void 0 : _b.pageSize) || 10;
+  }
+  /**
+   *
+   */
+  watchPagination() {
+    if (this.pagination) {
+      const { pageSize, current } = this.pagination;
+      if (pageSize > 0) {
+        this.pageSize = pageSize;
+      }
+      if (current > 0) {
+        this.currentPage = current;
+      }
+    }
+  }
+  /**
+   * Set pageSize value
+   *
+   * @param {number} pageSize - New value for pageSize
+   */
+  setPageSize(pageSize) {
+    this.pageSize = pageSize;
+  }
+  /**
+   * Set currentPage value
+   *
+   * @param {number} currentPage - New value for currentPage
+   */
+  setCurrentPage(currentPage) {
+    this.currentPage = currentPage;
+  }
+  /**
+   * Whether the row is visible in current page
+   *
+   * @param {number} index - The record index of the currentData
+   * @returns {boolean} Return true if the row is visible
+   */
+  isRowVisible(index) {
+    if (!this.pagination)
+      return true;
+    const pageSize = this.pageSize;
+    const current = this.currentPage;
+    const start = (current - 1) * pageSize;
+    const end = current * pageSize;
+    return index >= start && index < end;
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], VegaTablePaginationController.prototype, "pagination", void 0);
+__decorate$a([
+  MapToComponentField({ writable: true })
+], VegaTablePaginationController.prototype, "pageSize", void 0);
+__decorate$a([
+  MapToComponentField({ writable: true })
+], VegaTablePaginationController.prototype, "currentPage", void 0);
+__decorate$a([
+  MapToComponentMethod('componentWillLoad')
+], VegaTablePaginationController.prototype, "componentWillLoad", null);
+__decorate$a([
+  MapToComponentMethod('watchPagination')
+], VegaTablePaginationController.prototype, "watchPagination", null);
+
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Edit table controller
+ */
+class VegaTableEditableController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.rowFormRefMap = new Map();
+  }
+  /**
+   * Get the map of the row form refs
+   *
+   * @returns {Map<string, HTMLVegaFormElement>} The map of row form refs
+   */
+  getRowFormRefMap() {
+    return this.rowFormRefMap;
+  }
+  /**
+   * The callback to handle [saveAllEditRows]{@link VegaTable.saveAllEditRows}
+   */
+  async saveAllEditRows() {
+    if (!this.canMethodBeInvokedInCurrentState('saveAllEditRows')) {
+      return;
+    }
+    const currentData = this.vegaTableDataSourceController
+      .getCurrentData()
+      .slice();
+    for (const rowKey of this.editingRows.toArray()) {
+      const rowData = await this.getRowData(rowKey);
+      const index = currentData.findIndex((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+      if (index > -1) {
+        currentData.splice(index, 1, rowData);
+      }
+    }
+    this.vegaTableDataSourceController.setDataSource([...currentData]);
+    void this.stopAllRowEditMode();
+  }
+  /**
+   * The callback to handle [stopAllRowEditMode]{@link VegaTable.stopAllRowEditMode}
+   */
+  stopAllRowEditMode() {
+    if (!this.canMethodBeInvokedInCurrentState('stopAllRowEditMode')) {
+      return;
+    }
+    this.editingRows.clear();
+  }
+  /**
+   * Stop the removed editing row when the data source changed
+   *
+   * @param {VegaTableDataSourceItem[]} newValue - The new data source
+   */
+  watchDataSource(newValue) {
+    if (this.isEditableTable()) {
+      this.getEditingRowsKey().forEach((rowKey) => {
+        if (!newValue.find((item) => item.key === rowKey)) {
+          this.stopRowEditMode(rowKey);
+        }
+      });
+    }
+  }
+  /**
+   * The callback to handle [saveEditRow]{@link VegaTable.saveEditRow}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  async saveEditRow(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('saveEditRow')) {
+      return;
+    }
+    const rowData = await this.getRowData(rowKey);
+    const currentData = this.vegaTableDataSourceController
+      .getCurrentData()
+      .slice();
+    const index = currentData.findIndex((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+    if (index > -1) {
+      currentData.splice(index, 1, rowData);
+      this.vegaTableDataSourceController.setDataSource([...currentData]);
+    }
+    void this.stopRowEditMode(rowKey);
+  }
+  /**
+   * The callback to handle [stopRowEditMode]{@link VegaTable.stopRowEditMode}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  stopRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('stopRowEditMode')) {
+      return;
+    }
+    this.editingRows.delete(rowKey);
+  }
+  /**
+   * The callback to handle [removeRow]{@link VegaTable.removeRow}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  removeRow(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('removeRow')) {
+      return;
+    }
+    this.vegaTableDataSourceController.setDataSource(this.vegaTableDataSourceController
+      .getCurrentData()
+      .filter((item) => this.vegaTableDataSourceController.getRecordKey(item) !== rowKey));
+  }
+  /**
+   * The callback to handle [startRowEditMode]{@link VegaTable.startRowEditMode}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  startRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('startRowEditMode')) {
+      return;
+    }
+    this.editingRows.add(rowKey);
+  }
+  /**
+   * The callback to handle [addNewRow]{@link VegaTable.addNewRow}
+   *
+   * @param {VegaTableDataSourceItem} record - The record for adding
+   * @returns {string} The rowKey of the new added row record
+   */
+  addNewRow(record = {}) {
+    var _a;
+    if (!this.canMethodBeInvokedInCurrentState('addNewRow')) {
+      return;
+    }
+    const rowKey = ((_a = record[this.rowKey]) === null || _a === void 0 ? void 0 : _a.toString()) || generateUUID();
+    const newRowItem = Object.assign({}, record);
+    newRowItem[this.rowKey] = rowKey;
+    this.vegaTableDataSourceController.setCurrentData([
+      ...this.vegaTableDataSourceController.getCurrentData(),
+      newRowItem,
+    ]);
+    this.editingRows.add(rowKey);
+    return rowKey;
+  }
+  /**
+   * The callback to handle [getRowsData]{@link VegaTable.getRowsData}
+   */
+  async getRowsData() {
+    if (!this.canMethodBeInvokedInCurrentState('getRowsData')) {
+      return;
+    }
+    const tableFormRef = this.vegaTableBodyRenderer.getTableFormRef();
+    const formValues = tableFormRef ? await tableFormRef.getValue() : [];
+    return [
+      ...this.vegaTableDataSourceController.getCurrentData().map((record) => {
+        const value = formValues[`${VegaTableEditableController.rowFormKeyPrefix}${this.vegaTableDataSourceController.getRecordKey(record)}`];
+        return Object.assign(Object.assign({}, record), value);
+      }),
+    ];
+  }
+  /**
+   * The callback to handle [getEditingRowsKey]{@link VegaTable.getEditingRowsKey}
+   *
+   * @returns {string[]} The key of the rows which is editing
+   */
+  getEditingRowsKey() {
+    if (!this.canMethodBeInvokedInCurrentState('getEditingRowsKey')) {
+      return;
+    }
+    return this.editingRows.toArray();
+  }
+  /**
+   * The callback to handle [getFormRef]{@link VegaTable.getFormRef}
+   *
+   * @param {string} rowKey - The key of the row's record
+   * @returns {HTMLVegaFormElement} The form ref of the row
+   */
+  getFormRef(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('getFormRef')) {
+      return;
+    }
+    return rowKey ? this.rowFormRefMap.get(rowKey) : this.vegaTableBodyRenderer.getTableFormRef();
+  }
+  /**
+   * The callback to handle [getRowData]{@link VegaTable.getRowData}
+   *
+   * @param {string} rowKey - The key of the row's record
+   * @returns {Promise<VegaTableDataSourceItem>} The promise of the row data
+   */
+  async getRowData(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('getRowData')) {
+      return;
+    }
+    const formValue = await this.rowFormRefMap.get(rowKey).getValue();
+    return Object.assign(Object.assign({}, this.vegaTableDataSourceController.getRecordByKey(rowKey)), formValue);
+  }
+  /**
+   * Whether the row is in editing status
+   *
+   * @param {string} rowKey - The key of the row's record
+   * @returns {boolean} return true if the row is in editing status, otherwise false
+   */
+  isEditing(rowKey) {
+    return this.editingRows.has(rowKey);
+  }
+  /**
+   * The function `isEditableTable` checks if any column in a table is editable.
+   *
+   * @returns {boolean} The `isEditableTable` method is returning a boolean value. It checks if any of the columns
+   * in the `columns` array have the `editable` property set to true. If at least one column is editable,
+   * the method returns `true`, otherwise it returns `false`.
+   */
+  isEditableTable() {
+    return this.columns.some((item) => item.editable);
+  }
+  /**
+   * The function `canMethodBeInvokedInCurrentState` checks if the table is editable and logs a warning message if not.
+   *
+   * @param {string} methodName - The `methodName` parameter is a string that represents the name of the
+   * method being processed in the `canMethodBeInvokedInCurrentState` function.
+   * @returns {boolean} The method `canMethodBeInvokedInCurrentState` is returning a boolean value. If the table is not editable,
+   * it will log a warning message and return `false`. Otherwise, it will return `true`.
+   */
+  canMethodBeInvokedInCurrentState(methodName) {
+    if (!this.isEditableTable()) {
+      LogUtility.warn(`Method ${methodName} only works with editable tables`);
+      return false;
+    }
+    return true;
+  }
+}
+VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
+__decorate$9([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "editingRows", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "rowKey", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "columns", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$9([
+  MapToComponentMethod('saveAllEditRows')
+], VegaTableEditableController.prototype, "saveAllEditRows", null);
+__decorate$9([
+  MapToComponentMethod('stopAllRowEditMode')
+], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
+__decorate$9([
+  MapToComponentMethod('watchDataSource')
+], VegaTableEditableController.prototype, "watchDataSource", null);
+__decorate$9([
+  MapToComponentMethod('saveEditRow')
+], VegaTableEditableController.prototype, "saveEditRow", null);
+__decorate$9([
+  MapToComponentMethod('stopRowEditMode')
+], VegaTableEditableController.prototype, "stopRowEditMode", null);
+__decorate$9([
+  MapToComponentMethod('removeRow')
+], VegaTableEditableController.prototype, "removeRow", null);
+__decorate$9([
+  MapToComponentMethod('startRowEditMode')
+], VegaTableEditableController.prototype, "startRowEditMode", null);
+__decorate$9([
+  MapToComponentMethod('addNewRow')
+], VegaTableEditableController.prototype, "addNewRow", null);
+__decorate$9([
+  MapToComponentMethod('getRowsData')
+], VegaTableEditableController.prototype, "getRowsData", null);
+__decorate$9([
+  MapToComponentMethod('getEditingRowsKey')
+], VegaTableEditableController.prototype, "getEditingRowsKey", null);
+__decorate$9([
+  MapToComponentMethod('getFormRef')
+], VegaTableEditableController.prototype, "getFormRef", null);
+__decorate$9([
+  MapToComponentMethod('getRowData')
+], VegaTableEditableController.prototype, "getRowData", null);
+
+/**
+ * Vega Table Sorter
+ * This is a helper class for sorting table data based on defined columns to be sorted
+ * Supports multi-column sorting
+ */
+class VegaTableSorter {
+  constructor(prop, order, sorter) {
+    this.prop = prop;
+    this.order = order;
+    this.sorter = sorter;
+  }
+  /**
+   * Sort utility
+   *
+   * @param {VegaTableDataSourceItem} a column value
+   * @param {VegaTableDataSourceItem} b column value
+   * @returns {Nullable<number>} compare result
+   */
+  sort(a, b) {
+    const compareResult = this.sorter(a, b);
+    if (compareResult !== 0) {
+      return this.order === 'asc' ? compareResult : -compareResult;
+    }
+  }
+  /**
+   * Get params from sorter object for external use
+   *
+   * @returns {VegaTableSorterType} sorter prop and order
+   */
+  toExternalFormat() {
+    return { prop: this.prop, order: this.order };
+  }
+  /**
+   * Get sorter order value
+   *
+   * @returns {VegaTableSortOrderType} sorter order
+   */
+  getSortOrder() {
+    return this.order;
+  }
+}
+
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The sort controller for the vega-table
+ */
+class VegaTableSortController extends VegaSlimmer {
+  /**
+   * The callback of [watchColumns]{@link VegaTable.watchColumns}
+   */
+  watchColumns() {
+    this.syncSortOrder();
+  }
+  /**
+   * The method for header cell sort click
+   *
+   * @param {VegaTableColumnConfig} column - The column for sorting
+   * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
+   */
+  handleHeadSortClick(column, nextSortOrder) {
+    if (this.sortConfig.type === 'single') {
+      this.sortersMap.clear();
+    }
+    if (!nextSortOrder) {
+      if (this.sortersMap.has(column.prop)) {
+        this.sortersMap.delete(column.prop);
+      }
+    }
+    else {
+      this.sortersMap.set(column.prop, new VegaTableSorter(column.prop, nextSortOrder, column.sorter));
+    }
+    if (column.sorter !== 'event') {
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), Array.from(this.sortersMap.values())));
+    }
+    this.changeEventEmitter.emit({
+      sorters: Array.from(this.sortersMap.values()).map((s) => s.toExternalFormat()),
+    });
+  }
+  /**
+   * Sync the default sort order from the columns
+   */
+  syncSortOrder() {
+    this.columns
+      .filter((column) => isNonNullable(column.sorter) && isNonNullable(column.sortOrder))
+      .forEach((item) => {
+      this.sortersMap.set(item.prop, new VegaTableSorter(item.prop, item.sortOrder, item.sorter));
+    });
+  }
+  /**
+   * The method to sort the data by sorter which include prop name and order
+   *
+   * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
+   * @param {VegaTableSorter[]} sorters - array of sorters ordered by sequence of columns to be sorted
+   * @returns {VegaTableDataSourceItem[]} The sorted data source
+   */
+  sortData(data, sorters) {
+    return [...data].sort((a, b) => {
+      for (const sorter of sorters) {
+        const result = sorter.sort(a, b);
+        if (isNonNullable(result)) {
+          return result;
+        }
+      }
+      return 0;
+    });
+  }
+}
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaTableSortController.prototype, "sortersMap", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTableSortController.prototype, "columns", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTableSortController.prototype, "changeEventEmitter", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTableSortController.prototype, "sortConfig", void 0);
+__decorate$8([
+  MapToComponentMethod('watchColumns')
+], VegaTableSortController.prototype, "watchColumns", null);
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableColGroupRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.getColResponsiveClass = (column) => {
+      return column.breakpoint && isBreakpointsTokenType(column.breakpoint)
+        ? `v-hidden ${column.breakpoint}:v-table-column`
+        : '';
+    };
+  }
+  render() {
+    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.columnStructureModel
+        .generateColumnConfigByLeaves(this.columns)
+        .map((column) => {
+        if (column) {
+          const responsiveClass = this.getColResponsiveClass(column);
+          return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+        }
+        else {
+          return h("col", null);
+        }
+      }),
+      this.rowExpandable && h("col", { style: { minWidth: '40px', width: '40px' } }),
+      h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columns", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
+
+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;
+  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;
+};
+/**
+ * The controller for the table children components.
+ */
+class VegaTableChildrenController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.currentDataObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-rows-and-not-show-empty-message-when-lazy-render-table-body-with-table-rows}
+       */
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-BODY', 'VEGA-TABLE-ROW'),
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-not-render-empty-message-when-async-render-table-rows}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.syncUpTableCurrentData();
+        this.syncUpTableHeadRowProps();
+      },
+    });
+    this.rowStripedObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-rows-and-not-show-empty-message-when-lazy-render-table-body-with-table-rows}
+       */
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-BODY', 'VEGA-TABLE-ROW', 'VEGA-TABLE-EXPAND-ROW'),
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-row-when-async-render-table-rows}
+       * @see{module:should-render-striped-row-and-expanded-row-when-async-render-table-rows}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.syncRowStates();
+      },
+    });
+    /**
+     * Syncs up the properties of vega-table-row
+     */
+    this.syncUpTableCurrentData = () => {
+      if (!this.isTemplateRenderMode)
+        return;
+      const currentData = Array.from(this.host.querySelectorAll('vega-table-row')).map((row) => {
+        return { key: row.rowKey };
+      });
+      this.vegaTableDataSourceController.setCurrentData(currentData);
+    };
+    /**
+     * Sync up the properties of vega-table-expand-row
+     */
+    this.syncRowStates = () => {
+      const rows = this.host.querySelectorAll('vega-table-row');
+      rows.forEach((row, index) => {
+        this.updateRowStriped(row, index);
+        this.updateRowDivider(row, index === rows.length - 1);
+      });
+      const expandRows = this.host.querySelectorAll('vega-table-expand-row');
+      expandRows.forEach((row, index) => {
+        this.updateRowStriped(row, index);
+      });
+    };
+    /**
+     * Syncs up the properties of vega-table-head-row
+     */
+    this.syncUpTableHeadRowProps = () => {
+      var _a;
+      if (!this.isTemplateRenderMode)
+        return;
+      const headRow = this.host.querySelector('vega-table-head-row');
+      if (headRow) {
+        headRow.hideSelectAll = headRow.hideSelectAll || ((_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll);
+      }
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see module:should-render-striped-row-as-expected-when-component-re-attached
+   */
+  /**
+   * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
+   */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see module:should-render-striped-row-as-expected-when-component-re-attached
+   */
+  /**
+   * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaTable.componentWillLoad}
+   */
+  componentWillLoad() {
+    this.syncUpTableCurrentData();
+    this.syncUpTableHeadRowProps();
+    this.syncRowStates();
+    this.syncUpTableFootVisibility();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaTable.componentDidLoad}
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /**
+   * The callback to handle [clearSelection]{@link VegaTable.clearSelection}
+   */
+  clearSelection() {
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: false,
+      noneChecked: true,
+    });
+  }
+  /**
+   * The callback to handle [watchCurrentData]{@link VegaTable.watchCurrentData}
+   */
+  watchCurrentData() {
+    this.syncUpTableFootVisibility();
+  }
+  /**
+   * {@link VegaTable.watchStriped}
+   */
+  watchStriped() {
+    this.syncRowStates();
+  }
+  /**
+   * {@link VegaTable.watchRowDivider}
+   */
+  watchRowDivider() {
+    this.syncRowStates();
+  }
+  /**
+   * Update the row striped attr
+   *
+   * @param {HTMLElement} row - row or expand row element
+   * @param {number} index - index of the row
+   */
+  updateRowStriped(row, index) {
+    row.striped = this.striped && index % 2 === 1;
+  }
+  /**
+   * Update the row striped attr
+   *
+   * @param {HTMLElement} row - row or expand row element
+   * @param {boolean} isLastRow - Is last row
+   */
+  updateRowDivider(row, isLastRow) {
+    row.rowDivider = this.rowDivider && !isLastRow;
+  }
+  /**
+   * Sync up the visibility of table foot based on current data
+   */
+  syncUpTableFootVisibility() {
+    const tableFoot = this.host.querySelector('vega-table-foot');
+    if (tableFoot) {
+      if (this.vegaTableDataSourceController.isCurrentDataEmpty()) {
+        tableFoot.classList.add('v-hidden');
+      }
+      else {
+        tableFoot.classList.remove('v-hidden');
+      }
+    }
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "columns", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "dataSource", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "currentData", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "rowSelection", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "striped", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "rowDivider", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
+__decorate$6([
+  MapToComponentMethod('connectedCallback')
+], VegaTableChildrenController.prototype, "connectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableChildrenController.prototype, "disconnectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableChildrenController.prototype, "componentWillLoad", null);
+__decorate$6([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableChildrenController.prototype, "componentDidLoad", null);
+__decorate$6([
+  MapToComponentMethod('clearSelection')
+], VegaTableChildrenController.prototype, "clearSelection", null);
+__decorate$6([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableChildrenController.prototype, "watchCurrentData", null);
+__decorate$6([
+  MapToComponentMethod('watchStriped')
+], VegaTableChildrenController.prototype, "watchStriped", null);
+__decorate$6([
+  MapToComponentMethod('watchRowDivider')
+], VegaTableChildrenController.prototype, "watchRowDivider", null);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableRowRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableRowComponent = (rowProps) => {
+      const { rowKey, index, record, isVisibleInCurrentPage } = rowProps;
+      const renderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      return (h("vega-table-row", { class: {
+          'v-hidden': !isVisibleInCurrentPage,
+        }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.rowClickEventEmitter.emit({ record: record, index: index });
+          });
+        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, renderInputs.map((renderInput) => {
+        return this.vegaTableCellRenderer.render(renderInput, record, index);
+      })));
+    };
+  }
+  render(rowProps, editable) {
+    const { rowKey } = rowProps;
+    return editable ? (h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "rowClickEventEmitter", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableEditableController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableCellRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "striped", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "rowDivider", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRenderInputController", void 0);
+
+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;
+  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;
+};
+/**
+ * The render mode controller of the table
+ */
+class VegaTableRenderModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.currentDataObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW'),
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.isTemplateRenderMode = this.checkIsTemplateRenderMode(this.host);
+      },
+    });
+    /**
+     * Check whether render mode is template render
+     *
+     * @param {HTMLElement} tableRef - VegaTable ref
+     * @returns {boolean} return true if the mode is template, otherwise false
+     */
+    this.checkIsTemplateRenderMode = (tableRef) => {
+      return Array.from(tableRef.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
+    };
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * init the isTemplateRenderMode value
+   */
+  componentWillLoad() {
+    this.isTemplateRenderMode = this.checkIsTemplateRenderMode(this.host);
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaTableRenderModeController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
+__decorate$4([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderModeController.prototype, "connectedCallback", null);
+__decorate$4([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
+__decorate$4([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderModeController.prototype, "componentWillLoad", null);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRenderModeController.prototype, "componentDidLoad", null);
+
+const VegaTableRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length > 0,
+  },
+];
+
+/**
+ * Represents the hierarchical structure of table columns (including group columns).
+ *
+ * Responsibilities:
+ * - Build the tree from flat or grouped column configs (.from / .fromGroupColumns)
+ * - Provide traversal helpers (iterator / dfs) with caching
+ * - Provide utility checks (isLeaf, hasGroupColumn, hasPinnedColumn)
+ * - Produce leaf column configs for rendering (generateColumnConfigByLeaves)
+ * - Order root children by pinned type for rendering (orderChildrenByPinned)
+ */
+class ColumnStructureModel {
+  /**
+   * Constructor for ColumnStructureModel.
+   *
+   * @param {string} key - Unique key for the column.
+   * @param {number} level - Row level of this column (root uses ROOT_LEVEL).
+   * @param {ColumnStructureModel} [parent] - Optional parent node.
+   * @param {string} [label] - Optional display label for the column.
+   * @param {VegaTablePinnedType} [pinned] - Optional pinned metadata ('left'|'right'|null).
+   */
+  constructor(key, level, parent, label, pinned) {
+    this.key = key;
+    this.level = level;
+    this.parent = parent;
+    this.label = label;
+    this.pinned = pinned;
+    this.leaves = [];
+    this.orderedChildren = [];
+    this.iteratorCacheMap = new Map();
+  }
+  /**
+   * Creates the root ColumnStructureModel from column configs.
+   *
+   * @param {VegaTableColumnConfig[]} columnsConfig - Array of column configs.
+   * @param {Nullable<VegaTableGroupColumnConfig[]>} groupColumnConfig - Optional grouping configuration.
+   * @returns {ColumnStructureModel} Root column structure model.
+   */
+  static from(columnsConfig, groupColumnConfig) {
+    const rootModel = new ColumnStructureModel(this.ROOT_KEY, ColumnStructureModel.ROOT_LEVEL);
+    if (groupColumnConfig) {
+      rootModel.children = this.fromGroupColumns(rootModel, groupColumnConfig);
+      return rootModel;
+    }
+    else if (columnsConfig) {
+      rootModel.children = columnsConfig.map((column) => new ColumnStructureModel(column.key || column.prop || column.label, 0, rootModel, null, column.pinned));
+      return rootModel;
+    }
+    else {
+      rootModel.children = [];
+      return rootModel;
+    }
+  }
+  /**
+   * Recursively creates ColumnStructureModel children from group column configs.
+   *
+   * @param {ColumnStructureModel} parent - Parent node for the created children.
+   * @param {VegaTableGroupColumnConfig[]} groupColumns - Array of group column configs.
+   * @param {number} level - Current row level.
+   * @returns {ColumnStructureModel[]} Array of child column structure models.
+   */
+  static fromGroupColumns(parent, groupColumns, level = 0) {
+    if (groupColumns && groupColumns.length > 0) {
+      return groupColumns.map((groupColumn) => {
+        if (isVegaTableColumnGroupingModelType(groupColumn)) {
+          const current = new ColumnStructureModel(groupColumn.key, level, parent, groupColumn.label, groupColumn.pinned);
+          current.children = this.fromGroupColumns(current, groupColumn.children, level + 1);
+          return current;
+        }
+        else {
+          return new ColumnStructureModel(groupColumn.key, level, parent);
+        }
+      });
+    }
+    return [];
+  }
+  /**
+   * Generates an array of VegaTableColumnConfig for all leaf columns.
+   *
+   * @param {VegaTableColumnConfig[]} columns - Array of all column configs.
+   * @returns {VegaTableColumnConfig[]} Array of configs for leaf columns.
+   */
+  generateColumnConfigByLeaves(columns) {
+    return this.getLeaves().map((leaf) => columns.find((column) => column.key === leaf.key || column.prop === leaf.key || column.label === leaf.key));
+  }
+  /**
+   * Compute the maximum depth (highest level value) under this node.
+   * This is useful to determine the number of header rows required for rendering.
+   *
+   * @returns {number} Maximum level found in the subtree (or 0 when empty).
+   */
+  getMaxDepth() {
+    const models = this.dfsIterator();
+    if (models.length === 0) {
+      return 0;
+    }
+    return Math.max(...models.map((model) => model.level)) + 1;
+  }
+  /**
+   * Checks if this subtree contains any group (non-leaf) columns.
+   *
+   * @returns {boolean} True if any descendant is a group column.
+   */
+  hasGroupColumn() {
+    return !!this.children.find((model) => !model.isLeaf());
+  }
+  /**
+   * Checks if this subtree contains any left pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasLeftPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'left');
+  }
+  /**
+   * Checks if this subtree contains any right pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasRightPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'right');
+  }
+  /**
+   * Checks if this node is a leaf (no children).
+   *
+   * @returns {boolean} True when this node has no children.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+  /**
+   * Return an array of nodes for this subtree using the specified traversal mode.
+   *
+   * Currently only depth-first search ('dfs') is supported. The returned array is
+   * cached per-mode to avoid repeated traversal costs.
+   *
+   * @param {IteratorMode} mode - Traversal mode to use. Defaults to 'dfs'.
+   * @returns {ColumnStructureModel[]} Array of ColumnStructureModel nodes in traversal order.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    return [];
+  }
+  /**
+   * Gets all leaf nodes in the subtree, with caching.
+   *
+   * Subsequent calls return the cached array until the underlying model is rebuilt.
+   *
+   * @returns {ColumnStructureModel[]} Array of leaf column models.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.dfsIterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * For root nodes, returns children ordered by pinned type (left, none, right).
+   * For non-root nodes, returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of child column models.
+   */
+  getOrderedChildren() {
+    if (!this.isRoot())
+      return this.children;
+    return this.orderedChildren;
+  }
+  /**
+   * Orders root children by pinned type (left, none, right) and caches the result.
+   *
+   * For non-root nodes this method returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of ordered child column models.
+   */
+  orderChildrenByPinned() {
+    if (!this.isRoot())
+      return this.children;
+    if (this.orderedChildren.length > 0) {
+      return this.orderedChildren;
+    }
+    const leftPinned = [];
+    const noPinned = [];
+    const rightPinned = [];
+    this.children.forEach((child) => {
+      if (child.pinned === 'left') {
+        leftPinned.push(child);
+      }
+      else if (child.pinned === 'right') {
+        rightPinned.push(child);
+      }
+      else {
+        noPinned.push(child);
+      }
+    });
+    const children = [...leftPinned, ...noPinned, ...rightPinned];
+    this.orderedChildren = children;
+    return children;
+  }
+  /**
+   * Checks if this node is the root node.
+   *
+   * @returns {boolean} True if root node, false otherwise.
+   */
+  isRoot() {
+    return this.level === ColumnStructureModel.ROOT_LEVEL;
+  }
+  /**
+   * Performs a depth-first traversal of the column structure.
+   *
+   * The traversal respects root-child pinned ordering (left/no/right) for the root node.
+   * Results are cached per-node to avoid repeated recursion costs.
+   *
+   * @returns {ColumnStructureModel[]} Array of all nodes in DFS order.
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    const children = this.orderChildrenByPinned();
+    if (!this.isRoot()) {
+      localResult.push(this);
+    }
+    if (children && children.length > 0) {
+      children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+}
+ColumnStructureModel.ROOT_LEVEL = -1;
+ColumnStructureModel.ROOT_KEY = '#root-model#';
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller responsible for building and keeping the ColumnStructureModel in sync
+ * with the component's `columns` and `groupColumns` properties.
+ *
+ * This slimmer maps relevant component fields and lifecycle/watch hooks to
+ * automatically rebuild the column structure when inputs change.
+ */
+class VegaTableColumnStructureModelController extends VegaSlimmer {
+  /**
+   * Component lifecycle hook mapped to the host's componentWillLoad.
+   * Initializes the ColumnStructureModel prior to initial render.
+   */
+  componentWillLoad() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchColumns.
+   * Rebuilds the ColumnStructureModel when `columns` changes.
+   */
+  watchColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchGroupColumns.
+   * Rebuilds the ColumnStructureModel when `groupColumns` changes.
+   */
+  watchGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
+   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   */
+  setColumnStructureModel() {
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "columns", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
+__decorate$3([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
+__decorate$3([
+  MapToComponentMethod('watchColumns')
+], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
+__decorate$3([
+  MapToComponentMethod('watchGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
+
+/**
+ * ColumnRenderInputModel
+ *
+ * Render-time representation of a column or group node used by header/body renderers.
+ * Built from a ColumnStructureModel tree, it carries computed layout metadata required
+ * for rendering and pinned/sticky calculations (colSpan, rowSpan, pinned boundaries, etc).
+ *
+ * Instances form a forest (root-level nodes in an array) that mirrors the structure model
+ * but contains additional render-specific properties and parent/child links for renderers.
+ */
+class ColumnRenderInputModel {
+  /**
+   * Create a new render input node.
+   *
+   * @param {string} key - Unique key (matches ColumnStructureModel.key).
+   * @param {string} label - Optional display label (from structure model).
+   * @param {VegaTablePinnedType} pinned - Pinned type for this node ('left' | 'right' | null).
+   * @param {Nullable<number>} colSpan - Number of visual columns spanned by this node's subtree.
+   * @param {Nullable<number>} rowSpan - Number of header rows this node should span.
+   * @param {boolean} isViewStart - True when this node is the start of a visible view range.
+   * @param {boolean} isViewEnd - True when this node is the end of a visible view range.
+   * @param {boolean} isLeftEndPinned - True when node is last left-pinned sibling.
+   * @param {boolean} isRightStartPinned - True when node is first right-pinned sibling.
+   * @param {boolean} isNoPinnedEnd - True when node is last non-pinned sibling.
+   * @param {boolean} headHasGroupColumn - Header contains group columns (affects rowSpan).
+   * @param {boolean} headHasPinnedColumn - Header contains pinned columns.
+   * @param {number} headMaxDepth - Maximum header depth (number of header rows).
+   * @param {number} level - Level/index of this node within header rows (0-based).
+   * @param {number} columnIndex - Sequential leaf index (used for ordering).
+   * @param {Nullable<ColumnRenderInputModel>} parent - Parent render input node (null for root-level).
+   * @param {ColumnRenderInputModel[]} children - Child render input nodes.
+   */
+  constructor(key, label, pinned, colSpan, rowSpan, isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, headHasGroupColumn, headHasPinnedColumn, headMaxDepth, level, columnIndex, parent, children = []) {
+    this.key = key;
+    this.label = label;
+    this.pinned = pinned;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.isViewStart = isViewStart;
+    this.isViewEnd = isViewEnd;
+    this.isLeftEndPinned = isLeftEndPinned;
+    this.isRightStartPinned = isRightStartPinned;
+    this.isNoPinnedEnd = isNoPinnedEnd;
+    this.headHasGroupColumn = headHasGroupColumn;
+    this.headHasPinnedColumn = headHasPinnedColumn;
+    this.headMaxDepth = headMaxDepth;
+    this.level = level;
+    this.columnIndex = columnIndex;
+    this.parent = parent;
+    this.children = children;
+    this.iteratorCacheMap = new Map();
+    this.leaves = [];
+  }
+  /**
+   * Build a forest of ColumnRenderInputModel nodes from a ColumnStructureModel root.
+   *
+   * @param {ColumnStructureModel} rootModel - Root ColumnStructureModel that supplies tree and level data.
+   * @returns {ColumnRenderInputModel[]} Array of root-level ColumnRenderInputModel nodes (the render forest).
+   */
+  static from(rootModel) {
+    const renderInputs = [];
+    const parentStack = [];
+    const maxLevel = rootModel.getMaxDepth();
+    const hasGroupColumn = rootModel.hasGroupColumn();
+    const hasPinnedColumn = rootModel.hasLeftPinnedColumn() || rootModel.hasRightPinnedColumn();
+    let columnIndex = 0;
+    // Iterate structure model (DFS by default) and construct render nodes.
+    rootModel.iterator().forEach((model) => {
+      const parent = model.level > 0 ? parentStack[model.level - 1] : null;
+      const isParentStart = hasGroupColumn && this.isParentStart(model);
+      const isParentEnd = hasGroupColumn && this.isParentEnd(model);
+      const renderInput = new ColumnRenderInputModel(model.key, model.label, parent ? parent.pinned : model.pinned, hasGroupColumn ? this.getColSpan(model) : null, hasGroupColumn ? (model.isLeaf() ? maxLevel - model.level : 1) : null, parent ? parent.isViewStart && isParentStart : isParentStart, parent ? parent.isViewEnd && isParentEnd : isParentEnd, parent
+        ? parent.isLeftEndPinned && isParentEnd
+        : hasPinnedColumn && this.isLeftEndPinned(model), parent
+        ? parent.isRightStartPinned && isParentStart
+        : hasPinnedColumn && this.isRightStartPinned(model), parent ? parent.isNoPinnedEnd && isParentEnd : hasPinnedColumn && this.isNoPinnedEnd(model), hasGroupColumn, hasPinnedColumn, maxLevel, model.level, columnIndex, parent);
+      // Attach to parent if present, otherwise add to root-level array.
+      parent ? parent.children.push(renderInput) : renderInputs.push(renderInput);
+      // Maintain parent stack keyed by level to allow next nodes to find their parent.
+      parentStack[model.level] = renderInput;
+      parentStack.length = model.level + 1;
+      // Increment leaf index when encountering a leaf structure node.
+      if (model.isLeaf())
+        columnIndex++;
+    });
+    return renderInputs;
+  }
+  /**
+   * True when the provided structure model is the last left-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for left-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last left-pinned sibling.
+   */
+  static isLeftEndPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'left');
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided structure model is the first right-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for right-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first right-pinned sibling.
+   */
+  static isRightStartPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'right');
+    return siblings[0] === model;
+  }
+  /**
+   * True when the provided structure model is the last non-pinned sibling in its parent's children.
+   * Useful to handle the 'no-pinned-end' condition.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last non-pinned sibling.
+   */
+  static isNoPinnedEnd(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => !child.pinned);
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided model is the first child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first child.
+   */
+  static isParentStart(model) {
+    return model.parent.getOrderedChildren()[0] === model;
+  }
+  /**
+   * True when the provided model is the last child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last child.
+   */
+  static isParentEnd(model) {
+    const parentChildren = model.parent.getOrderedChildren();
+    return parentChildren[parentChildren.length - 1] === model;
+  }
+  /**
+   * Compute a node's colSpan by iterating its subtree and counting the maximum number
+   * of nodes present at any single level (visual column span).
+   *
+   * @param {ColumnStructureModel} mode - ColumnStructureModel node to examine.
+   * @returns {number} Number of visual columns spanned by the node.
+   */
+  static getColSpan(mode) {
+    const children = mode.iterator();
+    const rowMap = {};
+    children.forEach((node) => {
+      rowMap[node.level] = (rowMap[node.level] || 0) + 1;
+    });
+    return Math.max(...Object.values(rowMap));
+  }
+  /**
+   * Return cached leaf render nodes for this subtree.
+   * Caches the result on first call and returns cached array on subsequent calls.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of leaf render input nodes.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.iterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * Generic iterator that supports traversal modes ('dfs' currently implemented).
+   *
+   * @param {IteratorMode} [mode='dfs'] - Iterator mode ('dfs' | 'bfs').
+   * @returns {ColumnRenderInputModel[]} Traversal-ordered array of nodes.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    // Future: implement BFS mode here.
+    return [];
+  }
+  /**
+   * Depth-first pre-order traversal of this node and its descendants.
+   * Caches the result for the 'dfs' mode to avoid repeated recursion.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of nodes in DFS order (includes this node).
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    localResult.push(this);
+    if (this.children && this.children.length > 0) {
+      this.children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+  /**
+   * True when this render node has no children (visual leaf).
+   *
+   * @returns {boolean} True when node is a leaf.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+}
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * VegaTableRenderInputController
+ *
+ * Central controller that computes and provides render input data for table header rows,
+ * header cells and body cells. Responsibilities:
+ * - Build and cache shared header layout context (depth, width, pinned indices).
+ * - Generate per-head-row and per-body-row render inputs used by head/row renderers.
+ * - Expose render inputs to shadow DOM cells via Remote Invocation Call (RIC) registry.
+ */
+class VegaTableRenderInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.headRowRenderInputMap = new Map();
+    this.headCellRenderInputMap = new Map();
+    this.pinnedColumnBodyCellRenderInputMap = new Map();
+  }
+  /**
+   * Register remote invocation observers when controller is connected.
+   * Called via component lifecycle mapping.
+   */
+  connectedCallback() {
+    this.registerRenderInputRICObserver();
+  }
+  /**
+   * Unregister remote invocation observers when controller is disconnected.
+   * Called via component lifecycle mapping.
+   */
+  disconnectedCallback() {
+    this.unRegisterRenderInputRICObserver();
+  }
+  /**
+   * Initialize head context before component load.
+   * Called via component lifecycle mapping.
+   */
+  componentWillLoad() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Recompute head context when the column structure model changes.
+   * Called via watch mapping.
+   */
+  watchColumnStructureModel() {
+    this.setRenderInputModel();
+  }
+  /**
+   * Return render input models for table body (flattened leaves).
+   *
+   * @returns {ColumnRenderInputModel[]} Flattened array of leaf render input models.
+   */
+  getLeafRenderInputs() {
+    return this.leavesRenderInputModels;
+  }
+  /**
+   * Return render input models for table head (root-level forest).
+   *
+   * @returns {ColumnRenderInputModel[]} Root-level column render input models.
+   */
+  getHeadRenderInputs() {
+    return this.columnRenderInputModels;
+  }
+  /**
+   * Store head row render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headRow - The head row element.
+   * @param {ColumnRenderInputModel[]} renderInputs - Associated render input models.
+   */
+  addHeadRowRenderInputMap(headRow, renderInputs) {
+    this.headRowRenderInputMap.set(headRow, renderInputs);
+  }
+  /**
+   * Store head cell render input mapping for remote invocation.
+   *
+   * @param {HTMLElement} headCell - The head cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addHeadCellRenderInputMap(headCell, renderInput) {
+    this.headCellRenderInputMap.set(headCell, renderInput);
+  }
+  /**
+   * Store body cell render input mapping for pinned cells (used to update sticky positions).
+   *
+   * Only stores cells that require sticky positioning (left/right or no-pinned-end).
+   *
+   * @param {HTMLElement} cell - The body cell element.
+   * @param {ColumnRenderInputModel} renderInput - Associated render input model.
+   */
+  addCellRenderInputMap(cell, renderInput) {
+    if ((cell && ['left', 'right'].includes(renderInput.pinned)) || renderInput.isNoPinnedEnd) {
+      this.pinnedColumnBodyCellRenderInputMap.set(cell, renderInput);
+    }
+  }
+  /**
+   * Expose the internal head-cell -> render-input mapping.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableHeadCellElement} HTMLVegaTableHeadCellElement
+   * @returns {Map<HTMLVegaTableHeadCellElement, ColumnRenderInputModel>} Map of head cell elements to render input.
+   */
+  getHeadCellRenderInputMap() {
+    return this.headCellRenderInputMap;
+  }
+  /**
+   * Expose the internal map of pinned body cells to their render inputs.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableCellElement} HTMLVegaTableCellElement
+   * @returns {Map<HTMLVegaTableCellElement, ColumnRenderInputModel>} Map of body cell hosts requiring sticky positioning.
+   */
+  getPinnedColumnBodyCellRenderInputMap() {
+    return this.pinnedColumnBodyCellRenderInputMap;
+  }
+  /**
+   * Register remote invocation callbacks to allow DOM nodes to request render inputs.
+   */
+  registerRenderInputRICObserver() {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC), (headRow) => {
+      return this.headRowRenderInputMap.get(headRow);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC), (headCell) => {
+      return this.headCellRenderInputMap.get(headCell);
+    });
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC), (cell) => {
+      return this.pinnedColumnBodyCellRenderInputMap.get(cell);
+    });
+  }
+  /**
+   * Unregister remote invocation callbacks previously registered.
+   */
+  unRegisterRenderInputRICObserver() {
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadRowRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnHeadCellRenderInputRIC));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalColumnBodyCellRenderInputRIC));
+  }
+  /**
+   * Build the ColumnRenderInputModel forest from the current ColumnStructureModel.
+   */
+  setRenderInputModel() {
+    this.columnRenderInputModels = ColumnRenderInputModel.from(this.columnStructureModel);
+    this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate$2([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderInputController.prototype, "connectedCallback", null);
+__decorate$2([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderInputController.prototype, "componentWillLoad", null);
+__decorate$2([
+  MapToComponentMethod('watchColumnStructureModel')
+], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTablePinnedRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      // eslint-disable-next-line
+      target: () => this.host.shadowRoot.querySelector('table'),
+      isDeferred: true,
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:resize-pinned-position-by-edit-row}
+       */
+      callback: /* istanbul ignore next */ async () => {
+        await this.host.componentOnReady().then(() => {
+          this.updateTableRowPinnedPosition();
+          this.updateTableCellPinnedPosition();
+        });
+      },
+    });
+  }
+  componentDidLoad() {
+    methodPlaceholder;
+  }
+  componentDidRender() {
+    this.updateTableRowPinnedPosition();
+    this.updateTableCellPinnedPosition();
+  }
+  updateTableCellPinnedPosition() {
+    if (!this.columnStructureModel.hasLeftPinnedColumn() &&
+      !this.columnStructureModel.hasRightPinnedColumn())
+      return;
+    // if not have head row, it means no pinned, so no need to update
+    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    // to avoid window resize before table rendered.
+    // @see{module:resize-pinned-position-by-edit-row}
+    /* istanbul ignore next */
+    if (!row)
+      return;
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
+    const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
+    const leafWidths = this.getLeafWidths();
+    headCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+  }
+  getRowShadowThWidths() {
+    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const rowShadow = row.shadowRoot;
+    const firstTh = rowShadow.querySelector('th:first-of-type');
+    const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
+    const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
+    const lastTh = rowShadow.querySelector('th:last-of-type');
+    if (firstTh) {
+      const prevWidth = firstTh.getBoundingClientRect().width + ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0);
+      const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
+      return [prevWidth, nextWidth];
+    }
+    // to avoid window resize before row rendered.
+    // @see{module:resize-pinned-position-by-edit-row}
+    /* istanbul ignore next */
+    return [0, 0];
+  }
+  getLeafWidths() {
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    return leafRenderInputs.map((leaf) => {
+      var _a;
+      for (const [cell, renderInput] of headCellRenderInputMap.entries()) {
+        if (leaf === renderInput) {
+          // to avoid window resize before cell rendered.
+          // @see{module:resize-pinned-position-by-edit-row}
+          /* istanbul ignore next */
+          return ((_a = cell.shadowRoot.querySelector('th, td')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        }
+      }
+    });
+  }
+  updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
+    if (['left', 'right'].includes(renderInput.pinned)) {
+      const shadowCell = headCell.shadowRoot.querySelector('th, td');
+      if (renderInput.pinned === 'left') {
+        const position = prevShadowThWidth +
+          leafWidths
+            .slice(0, renderInput.columnIndex)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'left', position);
+      }
+      if (renderInput.pinned === 'right') {
+        const colSpan = isNonNullable(renderInput.colSpan) ? renderInput.colSpan : 1;
+        const position = nextShadowThWidth +
+          leafWidths
+            .slice(renderInput.columnIndex + (colSpan - 1) + 1)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'right', position);
+      }
+    }
+  }
+  updateTableRowPinnedPosition() {
+    const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
+    const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
+    const tableWidth = this.host.getBoundingClientRect().width;
+    const leftPadding = extractNumberFromString(this.paddingX[0]);
+    const rightPadding = extractNumberFromString(this.paddingX[1]);
+    // table width - padding(8*2) - border(2);
+    const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
+    this.host.shadowRoot
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row')
+      .forEach((row) => {
+      const rowShadow = row.shadowRoot;
+      if (hasLeftPinnedColumn) {
+        const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
+        const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
+        this.updatePinnedPosition(firstCell, 'left', 0);
+        this.updatePinnedPosition(selectionCell, 'left', leftPadding);
+      }
+      if (hasRightPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
+        const lastCell = rowShadow.querySelector('th:last-of-type, td:last-of-type');
+        this.updatePinnedPosition(expandCell, 'right', rightPadding);
+        this.updatePinnedPosition(lastCell, 'right', 0);
+      }
+      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
+        if (expandCell) {
+          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
+          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
+          // we should set the width to make the expand slot not scroll by table scroll.
+          // ticket: https://gethired.atlassian.net/browse/VD-7015
+          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+        }
+      }
+    });
+  }
+  updatePinnedPosition(cell, type, position) {
+    if (!cell)
+      return;
+    cell.style.position = 'sticky';
+    cell.style.zIndex = '1';
+    cell.style[type] = `${position}px`;
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate$1([
+  MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+
+const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header,.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header){box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}.vega-table-scrollable-container.scrolled vega-table-foot.fixed-footer::after,.vega-table-scrollable-container.scrolled ::slotted(vega-table-foot.fixed-footer)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}:host(.is-group-table) .vega-table-scrollable-container{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-width:1px;border-style:solid}:host(.is-group-table.density-relaxed) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-default) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-compact) .vega-table-scrollable-container{border-radius:4px}:host(.is-pinned-table) table{min-width:max-content}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaRowClick = createEvent(this, "vegaRowClick", 7);
+    this.rowClick = createEvent(this, "rowClick", 7);
+    this.vegaRowExpand = createEvent(this, "vegaRowExpand", 7);
+    this.rowExpand = createEvent(this, "rowExpand", 7);
+    this.vegaSelectChange = createEvent(this, "vegaSelectChange", 7);
+    this.selectChange = createEvent(this, "selectChange", 7);
+    this.vegaSelectAllChange = createEvent(this, "vegaSelectAllChange", 7);
+    this.selectAllChange = createEvent(this, "selectAllChange", 7);
+    this.vegaRowSelect = createEvent(this, "vegaRowSelect", 7);
+    this.rowSelect = createEvent(this, "rowSelect", 7);
+    this.vegaRowSelectAll = createEvent(this, "vegaRowSelectAll", 7);
+    this.rowSelectAll = createEvent(this, "rowSelectAll", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
+    this.vegaTableRenderInputController = new VegaTableRenderInputController();
+    this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
+    this.vegaTableRenderer = new VegaTableRenderer();
+    this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
+    this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
+    this.vegaTableRowRenderer = new VegaTableRowRenderer();
+    this.vegaTableCellRenderer = new VegaTableCellRenderer();
+    this.vegaTablePaginationRenderer = new VegaTablePaginationRenderer();
+    this.vegaTableScrollContainerRenderer = new VegaTableScrollContainerRenderer();
+    this.vegaTableExpandRowController = new VegaTableExpandRowController();
+    this.vegaTableRowSelectionController = new VegaTableRowSelectionController();
+    this.vegaTableDataSourceController = new VegaTableDataSourceController();
+    this.vegaTablePaginationController = new VegaTablePaginationController();
+    this.vegaTableEditableController = new VegaTableEditableController();
+    this.vegaTableSortController = new VegaTableSortController();
+    this.vegaTableColGroupRenderer = new VegaTableColGroupRenderer();
+    this.vegaTableChildrenController = new VegaTableChildrenController();
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:should-render-responsive-columns-with-expandable-row-and-current-breakpoint-is-smaller-than-S}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.rowSelectionNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
+    this.rowExpandableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
+    this.paddingXNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
+    this.rowClickableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
+    this.scrollConfigNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
+    this.eventsPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaPageSizeChange, VegaExpand], () => this.host);
+    this.changeEventEmitter = createEventEmitSlimmer(VegaTable, VegaChange);
+    this.selectChangeEventEmitter = createEventEmitSlimmer(VegaTable, VegaSelectChange);
+    this.selectAllChangeEventEmitter = createEventEmitSlimmer(VegaTable, VegaSelectAllChange);
+    this.rowClickEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowClick);
+    this.rowExpandEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowExpand);
+    this.rowDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
+    this.columnDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
+    this.densityNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
+    this.isTemplateRenderModeNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
+    this.currentDataNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTableRuntimeMetricsPayloadDefinition);
+    this.rowSelectEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowSelect);
+    this.rowSelectAllEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowSelectAll);
+    this.selectedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
+      this.selectedRowKeySet = newSet;
+    });
+    this.expandedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
+      this.expandedRowKeySet = newSet;
+    });
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /** Current running sorters */
+    this.sortersMap = new ImmutableMap(new Map(), (newMap) => {
+      this.sortersMap = newMap;
+    });
+    /** The data for vega-table to render */
+    this.currentData = [];
+    /** Current page number of the table pagination */
+    this.currentPage = 1;
+    /**
+     * The page size of the table pagination
+     */
+    this.pageSize = 10;
+    this.editingRows = new ImmutableSet(new Set(), (newSet) => {
+      this.editingRows = newSet;
+    });
+    this.isSelectedAll = false;
+    /**
+     * Defines the columns of the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.columns = [];
+    /**
+     * Contains the data records to be rendered and
+     *    displayed within the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.dataSource = [];
+    /**
+     * Defines the behavior and options related to
+     *    row selection in the table.
+     *
+     * It allows users to select one or more rows in
+     *    the table for further actions or processing.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.rowSelection = null;
+    /**
+     * Specifies whether rows in the table can be expanded
+     *    to show additional content or details.
+     */
+    /**
+     * Indicates whether the row is expandable.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.rowExpandable = false;
+    /**
+     * Specifies whether rows in the table can be clicked.
+     *    If enabled, a `vegaRowClick` event will be
+     *    dispatched when a row is clicked.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.rowClickable = false;
+    /**
+     * Specifies whether dividers should be displayed
+     *    between rows in the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.rowDivider = false;
+    /**
+     * Specifies whether dividers should be displayed
+     *    between columns in the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.columnDivider = false;
+    /**
+     * Specifies whether alternate colors should be applied
+     *    to the rows of the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.striped = true;
+    /**
+     * Specifies the negative space within the table's cells.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.density = 'default';
+    /**
+     * Controls the amount of horizontal padding applied to the table.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.paddingX = ['8px', '8px'];
+    /**
+     * Specifies whether the table header should be displayed.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.showHeader = true;
+    /**
+     * Specifies the pagination configuration.
+     *
+     * @vegaVersion 1.5.0
+     */
+    this.pagination = null;
+    /**
+     * Provides a customized message or description that is
+     *    shown when the table's data source is empty.
+     *
+     * @vegaVersion 1.7.0
+     */
+    this.emptyDescription = 'There is no data to display';
+    /**
+     * Defines a unique key for each row in the table.
+     *
+     * @vegaVersion 1.9.2
+     */
+    this.rowKey = 'key';
+    /**
+     * Defines the column sorting options
+     * Has optional property type: single | multiple
+     * If not specified, it defaults to multiple column sorting
+     *
+     * @vegaVersion 2.22.0
+     */
+    this.sortConfig = { type: 'multiple' };
+  }
+  watchSelectedRowKeySet() {
+    methodPlaceholder();
+  }
+  watchSortersMap() {
+    methodPlaceholder();
+  }
+  watchCurrentData(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
+  }
+  watchCurrentPage() {
+    methodPlaceholder();
+  }
+  watchSelectedAll() {
+    methodPlaceholder();
+  }
+  watchTemplateRenderMode() {
+    methodPlaceholder();
+  }
+  watchColumnStructureModel() {
+    methodPlaceholder();
+  }
+  watchColumns() {
+    methodPlaceholder();
+  }
+  watchGroupColumns() {
+    methodPlaceholder();
+  }
+  watchDataSource() {
+    methodPlaceholder();
+  }
+  watchRowSelection() {
+    methodPlaceholder();
+  }
+  watchRowExpandable() {
+    methodPlaceholder();
+  }
+  watchRowClickable() {
+    methodPlaceholder();
+  }
+  watchRowDivider() {
+    methodPlaceholder();
+  }
+  watchColumnDivider() {
+    methodPlaceholder();
+  }
+  watchStriped() {
+    methodPlaceholder();
+  }
+  watchDensity() {
+    methodPlaceholder();
+  }
+  watchPaddingX() {
+    methodPlaceholder();
+  }
+  watchPagination() {
+    methodPlaceholder();
+  }
+  watchScrollConfig() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to expand the row with the specified `rowKey`,
+   *    revealing additional content.
+   *
+   * @param rowKey
+   * @vegaVersion 1.3.0
+   */
+  async openExpandRow(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to close the expanded row with the specified `rowKey`.
+   *
+   * @param rowKey
+   * @vegaVersion 1.3.0
+   */
+  async closeExpandRow(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to close all expanded rows.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async closeAllExpandRow() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to toggle the expandable row with the
+   *    specified `rowKey`, expanding it if it is currently
+   *    collapsed and collapsing it if it is currently expanded.
+   *
+   * @param rowKey
+   * @vegaVersion 1.3.0
+   */
+  async toggleExpandRow(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to clear the selected row keys,
+   *    removing any current selection.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async clearSelection() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to retrieve the selected row keys,
+   *    provided an array or list of the keys representing
+   *    the currently selected rows.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async getSelection() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to set the selected row keys,
+   *    specifying an array or list of keys to represent
+   *    the desired selected rows.
+   *
+   * @param {string[]} keys - Row keys to be set as selected.
+   * @vegaVersion 1.3.0
+   */
+  async setSelection(keys) {
+    methodPlaceholder(keys);
+  }
+  /**
+   * Invoke this method to start the edit mode for the row
+   *    with the specified `rowKey`.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async startRowEditMode(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to stop the edit mode for the row
+   *    with the specified `rowKey`.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async stopRowEditMode(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to stop the edit mode for all rows,
+   *    exiting the edit mode for each row currently
+   *    in the editing state.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async stopAllRowEditMode() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to retrieve the data of the row with
+   *    the specified `rowKey`, obtaining the complete set of
+   *    information associated with that row.
+   *
+   * @param rowKey The row's unique key.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async getRowData(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to retrieve all rows of data,
+   *    obtaining the complete set of information
+   *    associated with each row.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async getRowsData() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to retrieve the table row reference
+   *    based on the provided `rowKey`.
+   *
+   * If the `rowKey` is empty, this method will return the
+   *    reference to the table form.
+   *
+   * @param optional rowKey
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async getFormRef(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to add a new row to the editable table.
+   *
+   * @param record the default record of the new row
+   * @returns {Promise<string>} the rowKey of the new row
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async addNewRow(record = {}) {
+    return methodPlaceholder(record);
+  }
+  /**
+   * Invoke this method to save the edited row data to
+   *    the `currentData` and stop the edit mode
+   *    for that row.
+   *
+   * This action will not affect the editing mode of other rows.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async saveEditRow(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to save the data of all edited rows to
+   *    the `currentData` and stop the edit mode for
+   *    all rows in the table.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async saveAllEditRows() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to obtain the keys of the rows currently
+   *    in the editing mode in the table.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async getEditingRowsKey() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to remove a row from the `currentData`
+   *    based on the specified `rowKey` in the table.
+   *
+   * @param rowKey The rowKey of the row to remove.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
+   */
+  async removeRow(rowKey) {
+    methodPlaceholder(rowKey);
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return this.vegaTableRenderer.render();
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "selectedRowKeySet": ["watchSelectedRowKeySet"],
+    "sortersMap": ["watchSortersMap"],
+    "currentData": ["watchCurrentData"],
+    "currentPage": ["watchCurrentPage"],
+    "isSelectedAll": ["watchSelectedAll"],
+    "isTemplateRenderMode": ["watchTemplateRenderMode"],
+    "columnStructureModel": ["watchColumnStructureModel"],
+    "columns": ["watchColumns"],
+    "groupColumns": ["watchGroupColumns"],
+    "dataSource": ["watchDataSource"],
+    "rowSelection": ["watchRowSelection"],
+    "rowExpandable": ["watchRowExpandable"],
+    "rowClickable": ["watchRowClickable"],
+    "rowDivider": ["watchRowDivider"],
+    "columnDivider": ["watchColumnDivider"],
+    "striped": ["watchStriped"],
+    "density": ["watchDensity"],
+    "paddingX": ["watchPaddingX"],
+    "pagination": ["watchPagination"],
+    "scrollConfig": ["watchScrollConfig"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTable.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePinnedRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableCellRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableExpandRowController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePaginationController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableEditableController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableSortController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableChildrenController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "eventsPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "selectChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowExpandEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "densityNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
+VegaTable.style = vegaTableCss;
+
+export { VegaTable as vega_table };