@globalpayments/vega 2.13.0-backfill-beta.2 → 2.50.0

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

@@ -1,40 +1,53 @@
-import { h, f as forceUpdate, F as Fragment, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-c3505689.js';
-import { a as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
+import { h, f as forceUpdate, F as Fragment, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-d0a47531.js';
+import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-6bc153ea.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { g as getValueByPath } from './object-261e7344.js';
-import { C as ChangeManager } from './changeManager-d60d98c8.js';
-import { j as TABLE_EXPAND_ROW, k as TABLE_ROW_SELECTION, l as TABLE_ROW_SELECTION_ALL, m as TABLE_ROW_CLICK } from './staticSubjectTitle-3b88939a.js';
-import { O as Observer, D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { f as findParent, a as arrayToClassString } from './ui-28499aab.js';
-import { a as VegaClick, e as VegaChange, x as VegaPageSizeChange, B as VegaSelectChange, C as VegaSelectAllChange, D as VegaRowClick } from './vegaEventId-c0384a6f.js';
-import { P as isNonNullable, s as isBreakpointsTokenType } from './typeGuard-ebc62114.js';
-import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-7665557d.js';
-import { s as sanitizeVegaComponent } from './component-40be4402.js';
-import { g as generateUUID } from './misc-c21a85c9.js';
-import { g as getCurrentBreakpoint, B as Breakpoints } from './breakpoints-e59edf8d.js';
-import { M as MutationObserverSlimmer, T as TagNameMutationFilter } from './mutationObserverFilters-17327079.js';
-import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
-import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-71b39ca0.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-86a1593c.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-d5b8d8d7.js';
-import { I as ImmutableMap } from './immutableMap-af49ae98.js';
-import { F as FeatureFlag } from './featureFlagController-fdb8cf0e.js';
-import { Z as ZIndexManager } from './zIndexManager-522f477e.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { n as TABLE_EXPAND_ROW, o as TABLE_ROW_SELECTION, p as TABLE_ROW_SELECTION_ALL, q as TABLE_ROW_CLICK, S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-ca83d6b6.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { f as findParent, a as arrayToClassString } from './ui-ed1283bb.js';
+import { d as domNodeSubjectFactory, a as VegaClick, f as VegaChange, L as VegaPageSizeChange, V as VegaExpand, Q as VegaSelectChange, R as VegaSelectAllChange, S as VegaRowClick, T as VegaRowExpand, U as VegaRowSelect, W as VegaRowSelectAll } from './dom-node-subject-factory-eb6bba5d.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
+import { C as VegaInternalTableRowExpand, D as VegaInternalTableRowSelect, E as VegaInternalTableRowSelectAll, F as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-178b2743.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-6083d518.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-738b3413.js';
+import { i as isNonNullable, s as isBreakpointsTokenType } from './type-guard-158f6d7a.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-15a84d26.js';
+import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-6cef9549.js';
+import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-6768a092.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1142fb79.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-480d3b54.js';
+import { I as ImmutableMap } from './immutable-map-612922a2.js';
+import { T as TranslationSlimmer } from './translation-slimmer-e6b130bf.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-2958d1a3.js';
+import { F as FeatureFlag } from './feature-flag-controller-0fbe8fb0.js';
+import { B as Breakpoints } from './breakpoints-d9faf11c.js';
+import { I as InternalVegaZIndexManager } from './vega-skeleton-loader-controller-878e1b28.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-a52b1c10.js';
-import { c as chevronUp, a as chevronDown } from './chevron-down-4303bddb.js';
-import './ui-df46cc20.js';
-import './regex-dfe11abf.js';
-import './typography-a8fc4764.js';
-import './number-e2519d1c.js';
-import './array-8c82516c.js';
-import './dynamic-slimmer-ef83e258.js';
-import './vegaInternalEventId-ba0b5623.js';
-import './internalVegaEventManager-501f9eb9.js';
-import './index-1d242e89.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-58cf8aa6.js';
+import { c as chevronUp } from './chevron-up-b1989751.js';
+import { c as chevronDown } from './chevron-down-4a75d28e.js';
+import './number-4398f2e1.js';
+import './ui-8424715a.js';
+import './pixel-f32c07ce.js';
+import './array-7888f339.js';
+import './vega-env-manager-8f8dc473.js';
+import './icon-manager-638dd4d4.js';
+import './wait-for-vega-handler-b18eb955.js';
+import './translation-71e0711d.js';
+import './content-state-120176f3.js';
+import './code-block-527df049.js';
+import './dark-mode-style-controller-2ada8e22.js';
 import './_commonjsHelpers-9943807e.js';
-import './iconManager-48bebc43.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-56c6469a.js';
+import './index-44c794b4.js';
 
 /**
  * Immutable Set cannot be changed once created
@@ -143,7 +156,7 @@ const VegaTableEditableFieldTypes = [
   'time-picker',
 ];
 
-var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$F = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -232,17 +245,17 @@ class VegaTableCellRenderer extends VegaSlimmer {
     return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow }, this.renderTableCellContent(column, record, index)));
   }
 }
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
 
-var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -391,6 +404,7 @@ class VegaTableExpandRowController extends VegaSlimmer {
       this.mutationObserver.disconnect();
     }
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
   /**
    * Component lifecycle - componentDidLoad
@@ -417,6 +431,12 @@ class VegaTableExpandRowController extends VegaSlimmer {
       }
     });
     ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
+      return this.rowExpandEventEmitter.emit({
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        expanded: expanded,
+      });
+    });
   }
   /**
    * The function checks if the input is an acceptable row observer.
@@ -430,44 +450,47 @@ class VegaTableExpandRowController extends VegaSlimmer {
   }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$C([
+__decorate$E([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
+__decorate$E([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
 
-var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -511,7 +534,7 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
     /**
      * Get the row selection type
      *
-     * @returns {'multiple' | 'single'} Return the type of the row selection
+     * @returns {Nullable<'multiple' | 'single'>} Return the type of the row selection
      */
     this.getRowSelectionType = () => {
       if (!this.rowSelection)
@@ -609,7 +632,7 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
    * Component lifecycle - connectedCallback
    */
   connectedCallback() {
-    this.initRowSelectionObserver();
+    this.initRowSelection();
     this.initRowClickObserver();
     this.initRowSelectionAllObserver();
   }
@@ -620,6 +643,8 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
     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
@@ -744,15 +769,33 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
     }
   }
   /**
-   * The function initializes a row selection observer.
+   * The function initializes a row selection.
    */
-  initRowSelectionObserver() {
+  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
@@ -786,62 +829,68 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
       this.host === findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$B([
+__decorate$D([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
+__decorate$D([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
+__decorate$D([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -974,50 +1023,48 @@ class VegaTableDataSourceController extends VegaSlimmer {
       ? this.columns.filter((column) => column.sorter && column.sorter !== 'event' && this.sortersMap.has(column.prop))
       : [];
     if (sortedColumns.length > 0) {
-      const sortProp = sortedColumns[sortedColumns.length - 1].prop;
-      const sortedOrder = this.sortersMap.get(sortProp).order;
-      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, sortProp, sortedOrder));
+      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, Array.from(this.sortersMap.values())));
     }
     else {
       this.setCurrentData(this.dataSource);
     }
   }
 }
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$A([
+__decorate$C([
   MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1054,35 +1101,35 @@ class VegaTableBodyRenderer extends VegaSlimmer {
     return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$z([
+__decorate$B([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1093,7 +1140,8 @@ class VegaTableHeaderRenderer extends VegaSlimmer {
     super(...arguments);
     this.renderHeaderColumnCells = () => {
       return this.columns.map((column) => {
-        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: column.sortOrder, breakpoint: column.breakpoint, 
+        var _a;
+        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) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
@@ -1110,23 +1158,29 @@ class VegaTableHeaderRenderer extends VegaSlimmer {
       h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll }, this.renderHeaderColumnCells()))));
   }
 }
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$y([
+__decorate$A([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
+__decorate$A([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1175,9 +1229,9 @@ class VegaTablePaginationRenderer extends VegaSlimmer {
       (_b = (_a = this.pagination).vegaPageSizeChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
     this.getPaginationConfig = () => {
-      var _a;
-      const _b = this.pagination, { position } = _b, otherProps = __rest(_b, ["position"]);
-      return Object.assign(Object.assign({}, otherProps), { position: ((_a = this.pagination.extensions) === null || _a === void 0 ? void 0 : _a.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
+      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() {
@@ -1192,23 +1246,23 @@ class VegaTablePaginationRenderer extends VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
-const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
+const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, children) => {
   const { maxHeight } = scrollConfig;
   const isVerticalScrollable = isNonNullable(maxHeight);
   const handleVerticalScroll = (e) => {
@@ -1222,6 +1276,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
     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,
@@ -1230,7 +1285,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
     onScroll: handleVerticalScroll }, children));
 };
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1244,25 +1299,39 @@ class VegaTableScrollContainerRenderer extends VegaSlimmer {
         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) }, 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$w([
+__decorate$y([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$w([
+__decorate$y([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "host", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$y([
   MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1281,12 +1350,13 @@ class VegaTableRenderer extends VegaSlimmer {
           this.vegaTableColGroupRenderer.render(),
           this.vegaTableHeaderRenderer.render(),
         ],
-        this.dataSource.length > 0 && this.vegaTableBodyRenderer.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.emptyDescription));
+        this.emptyDescription && (h("div", { class: "vega-table-empty-description" }, this.translationSlimmer.t(this.emptyDescription))));
     };
   }
   render() {
@@ -1302,56 +1372,62 @@ class VegaTableRenderer extends VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$v([
+__decorate$x([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "translationSlimmer", void 0);
+__decorate$x([
   MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$x([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "editingRows", void 0);
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1415,23 +1491,23 @@ class VegaTablePaginationController extends VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$u([
+__decorate$w([
   MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$u([
+__decorate$w([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$u([
+__decorate$w([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$u([
+__decorate$w([
   MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$u([
+__decorate$w([
   MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1448,7 +1524,7 @@ class VegaTableEditableController extends VegaSlimmer {
   /**
    * Get the map of the row form refs
    *
-   * @returns {Map} The map of row form refs
+   * @returns {Map<string, HTMLVegaFormElement>} The map of row form refs
    */
   getRowFormRefMap() {
     return this.rowFormRefMap;
@@ -1457,6 +1533,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * The callback to handle [saveAllEditRows]{@link VegaTable.saveAllEditRows}
    */
   async saveAllEditRows() {
+    if (!this.canMethodBeInvokedInCurrentState('saveAllEditRows')) {
+      return;
+    }
     const currentData = this.vegaTableDataSourceController
       .getCurrentData()
       .slice();
@@ -1474,6 +1553,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * The callback to handle [stopAllRowEditMode]{@link VegaTable.stopAllRowEditMode}
    */
   stopAllRowEditMode() {
+    if (!this.canMethodBeInvokedInCurrentState('stopAllRowEditMode')) {
+      return;
+    }
     this.editingRows.clear();
   }
   /**
@@ -1482,11 +1564,13 @@ class VegaTableEditableController extends VegaSlimmer {
    * @param {VegaTableDataSourceItem[]} newValue - The new data source
    */
   watchDataSource(newValue) {
-    this.getEditingRowsKey().forEach((rowKey) => {
-      if (!newValue.find((item) => item.key === rowKey)) {
-        this.stopRowEditMode(rowKey);
-      }
-    });
+    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}
@@ -1494,6 +1578,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * @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()
@@ -1511,6 +1598,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   stopRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('stopRowEditMode')) {
+      return;
+    }
     this.editingRows.delete(rowKey);
   }
   /**
@@ -1519,6 +1609,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * @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));
@@ -1529,6 +1622,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   startRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('startRowEditMode')) {
+      return;
+    }
     this.editingRows.add(rowKey);
   }
   /**
@@ -1539,6 +1635,9 @@ class VegaTableEditableController extends VegaSlimmer {
    */
   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;
@@ -1553,9 +1652,11 @@ class VegaTableEditableController extends VegaSlimmer {
    * The callback to handle [getRowsData]{@link VegaTable.getRowsData}
    */
   async getRowsData() {
-    const formValues = await this.vegaTableBodyRenderer
-      .getTableFormRef()
-      .getValue();
+    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)}`];
@@ -1569,15 +1670,21 @@ class VegaTableEditableController extends VegaSlimmer {
    * @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 {HTMLElement} The form ref of the row
+   * @returns {HTMLVegaFormElement} The form ref of the row
    */
   getFormRef(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('getFormRef')) {
+      return;
+    }
     return rowKey ? this.rowFormRefMap.get(rowKey) : this.vegaTableBodyRenderer.getTableFormRef();
   }
   /**
@@ -1587,6 +1694,9 @@ class VegaTableEditableController extends VegaSlimmer {
    * @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);
   }
@@ -1599,58 +1709,128 @@ class VegaTableEditableController extends VegaSlimmer {
   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$t([
+__decorate$v([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$t([
+__decorate$v([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$t([
+__decorate$v([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "columns", void 0);
+__decorate$v([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$t([
+__decorate$v([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$t([
+__decorate$v([
   MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * 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$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1660,28 +1840,6 @@ var __decorate$s = (undefined && undefined.__decorate) || function (decorators,
  * The sort controller for the vega-table
  */
 class VegaTableSortController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * The method to sort the data by sorter which include prop name and order
-     *
-     * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
-     * @param {string} sortProp - The prop name of which prop you want to sort by
-     * @param {VegaTableSortOrderType} sortOrder - The order of the sorter
-     * @returns {VegaTableDataSourceItem[]} The sorted data source
-     */
-    this.sortData = (data, sortProp, sortOrder) => {
-      const sorter = this.columns.find((column) => typeof column.sorter === 'function' && column.prop === sortProp).sorter;
-      const cloneData = data.slice();
-      if (!sortOrder) {
-        return cloneData;
-      }
-      return cloneData.sort((a, b) => {
-        const compareResult = sorter(a, b);
-        return sortOrder === 'asc' ? compareResult : -compareResult;
-      });
-    };
-  }
   /**
    * The callback of [watchColumns]{@link VegaTable.watchColumns}
    */
@@ -1695,16 +1853,23 @@ class VegaTableSortController extends VegaSlimmer {
    * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
    */
   handleHeadSortClick(column, nextSortOrder) {
-    if (this.sortersMap.has(column.prop)) {
-      this.sortersMap.delete(column.prop);
+    if (this.sortConfig.type === 'single') {
+      this.sortersMap.clear();
+    }
+    if (!nextSortOrder) {
+      if (this.sortersMap.has(column.prop)) {
+        this.sortersMap.delete(column.prop);
+      }
     }
-    if (nextSortOrder) {
-      this.sortersMap.set(column.prop, { order: nextSortOrder, prop: 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(), column.prop, nextSortOrder));
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), Array.from(this.sortersMap.values())));
     }
-    this.changeEventEmitter.emit({ sorters: [...this.sortersMap.values()] });
+    this.changeEventEmitter.emit({
+      sorters: Array.from(this.sortersMap.values()).map((s) => s.toExternalFormat()),
+    });
   }
   /**
    * Sync the default sort order from the columns
@@ -1713,27 +1878,48 @@ class VegaTableSortController extends VegaSlimmer {
     this.columns
       .filter((column) => isNonNullable(column.sorter) && isNonNullable(column.sortOrder))
       .forEach((item) => {
-      this.sortersMap.set(item.prop, { order: item.sortOrder, prop: item.prop });
+      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$s([
+__decorate$u([
   MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$s([
+__decorate$u([
   MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$s([
+__decorate$u([
   MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$s([
+__decorate$u([
   MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$s([
+__decorate$u([
+  MapToComponentField()
+], VegaTableSortController.prototype, "sortConfig", void 0);
+__decorate$u([
   MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1760,20 +1946,20 @@ class VegaTableColGroupRenderer extends VegaSlimmer {
       h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$r([
+__decorate$t([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$r([
+__decorate$t([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$r([
+__decorate$t([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
-__decorate$r([
+__decorate$t([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1789,7 +1975,11 @@ class VegaTableChildrenController extends VegaSlimmer {
       // eslint-disable-next-line jsdoc/require-jsdoc
       target: () => this.host,
       options: { childList: true, subtree: true },
-      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW'),
+      /*
+       * 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
@@ -1806,7 +1996,11 @@ class VegaTableChildrenController extends VegaSlimmer {
       // eslint-disable-next-line jsdoc/require-jsdoc
       target: () => this.host,
       options: { childList: true, subtree: true },
-      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW', 'VEGA-TABLE-EXPAND-ROW'),
+      /*
+       * 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
@@ -1920,59 +2114,59 @@ class VegaTableChildrenController extends VegaSlimmer {
     }
   }
 }
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$q([
+__decorate$s([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$q([
+__decorate$s([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$q([
+__decorate$s([
   MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2001,23 +2195,23 @@ class VegaTableRowRenderer$1 extends VegaSlimmer {
     return editable ? (h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "columns", void 0);
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2048,7 +2242,7 @@ class VegaTableRenderModeController extends VegaSlimmer {
      * @returns {boolean} return true if the mode is template, otherwise false
      */
     this.checkIsTemplateRenderMode = (tableRef) => {
-      return (Array.from(tableRef.children).filter((el) => { var _a; return !((_a = el.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.startsWith('vega-table-expand-row-')); }).length > 0);
+      return Array.from(tableRef.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
     };
   }
   /**
@@ -2073,31 +2267,31 @@ class VegaTableRenderModeController extends VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$o([
+__decorate$q([
   MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$o([
+__decorate$q([
   MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$o([
+__decorate$q([
   InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$o([
+__decorate$q([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$o([
+__decorate$q([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$o([
+__decorate$q([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$o([
+__decorate$q([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
 const VegaTableRuntimeMetricsPayloadDefinition = [
   {
-    payloadKey: 'DATA_SOURCE_IS_EMPTY',
+    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'.
@@ -2109,7 +2303,7 @@ const VegaTableRuntimeMetricsPayloadDefinition = [
     payloadValue: (host) => host.dataSource.length === 0,
   },
   {
-    payloadKey: 'DATA_SOURCE_IS_NOT_EMPTY',
+    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'.
@@ -2124,7 +2318,7 @@ const VegaTableRuntimeMetricsPayloadDefinition = [
 
 const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header{box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}";
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2141,11 +2335,18 @@ const VegaTable = class {
     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.vegaTableRenderer = new VegaTableRenderer();
     this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
@@ -2172,17 +2373,20 @@ const VegaTable = class {
     this.paddingXNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
     this.rowClickableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
     this.scrollConfigNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
-    this.paginationEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaPageSizeChange], () => this.host);
+    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;
     });
@@ -2208,13 +2412,17 @@ const VegaTable = class {
     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
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.dataSource = [];
     /**
      * Defines the behavior and options related to
@@ -2222,8 +2430,10 @@ const VegaTable = class {
      *
      * 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
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.rowSelection = null;
     /**
      * Specifies whether rows in the table can be expanded
@@ -2231,54 +2441,84 @@ const VegaTable = class {
      */
     /**
      * 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() {
   }
@@ -2321,6 +2561,7 @@ const VegaTable = class {
    *    revealing additional content.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async openExpandRow(rowKey) {
   }
@@ -2328,11 +2569,14 @@ const VegaTable = class {
    * Invoke this method to close the expanded row with the specified `rowKey`.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async closeExpandRow(rowKey) {
   }
   /**
    * Invoke this method to close all expanded rows.
+   *
+   * @vegaVersion 1.3.0
    */
   async closeAllExpandRow() {
   }
@@ -2342,12 +2586,15 @@ const VegaTable = class {
    *    collapsed and collapsing it if it is currently expanded.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async toggleExpandRow(rowKey) {
   }
   /**
    * Invoke this method to clear the selected row keys,
    *    removing any current selection.
+   *
+   * @vegaVersion 1.3.0
    */
   async clearSelection() {
   }
@@ -2355,6 +2602,8 @@ const VegaTable = class {
    * 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();
@@ -2365,18 +2614,27 @@ const VegaTable = class {
    *    the desired selected rows.
    *
    * @param {string[]} keys - Row keys to be set as selected.
+   * @vegaVersion 1.3.0
    */
   async setSelection(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) {
   }
   /**
    * 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) {
   }
@@ -2384,6 +2642,10 @@ const VegaTable = class {
    * 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() {
   }
@@ -2393,6 +2655,10 @@ const VegaTable = class {
    *    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);
@@ -2401,6 +2667,10 @@ const VegaTable = class {
    * 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();
@@ -2413,6 +2683,10 @@ const VegaTable = class {
    *    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);
@@ -2422,6 +2696,10 @@ const VegaTable = class {
    *
    * @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);
@@ -2432,6 +2710,10 @@ const VegaTable = class {
    *    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);
@@ -2440,12 +2722,20 @@ const VegaTable = class {
    * 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() {
   }
   /**
    * 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();
@@ -2455,6 +2745,10 @@ const VegaTable = class {
    *    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) {
   }
@@ -2484,113 +2778,125 @@ const VegaTable = class {
     "scrollConfig": ["watchScrollConfig"]
   }; }
 };
-__decorate$n([
+__decorate$p([
   InjectVegaGlobalSlimmer()
 ], VegaTable.prototype, "globalSlimmers", void 0);
-__decorate$n([
+__decorate$p([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "translationSlimmer", void 0);
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableExpandRowController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableDataSourceController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableEditableController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableSortController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
-], VegaTable.prototype, "paginationEventPrevent", void 0);
-__decorate$n([
+], VegaTable.prototype, "eventsPrevent", void 0);
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "changeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectChangeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickEventEmitter", void 0);
+__decorate$p([
   InjectVegaSlimmer()
-], VegaTable.prototype, "rowClickEventEmitter", void 0);
-__decorate$n([
+], VegaTable.prototype, "rowExpandEventEmitter", void 0);
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "densityNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$p([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectEventEmitter", void 0);
+__decorate$p([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
 VegaTable.style = vegaTableCss;
 
 const vegaTableBodyCss = ":host{display:contents}";
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2612,13 +2918,13 @@ const VegaTableBody = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$m([
+__decorate$o([
   InjectVegaGlobalSlimmer()
 ], VegaTableBody.prototype, "globalSlimmers", void 0);
-__decorate$m([
+__decorate$o([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
-__decorate$m([
+__decorate$o([
   InjectVegaSlimmer()
 ], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableBody.style = vegaTableBodyCss;
@@ -2667,7 +2973,7 @@ const generateColSpan = (columnLength, withMultipleSelection) => {
   return columnLength + (withMultipleSelection ? 2 : 1);
 };
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2690,13 +2996,13 @@ class VegaTableCellStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$l([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
 
 const vegaTableCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}.vega-table-cell{padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-table-cell.break-word{word-break:break-word}td{display:block;padding:0px}td.v-text-center{text-align:center}td.v-text-left{text-align:left}td.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}.vega-table-cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vega-table-cell-scroll{overflow:auto}";
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2738,21 +3044,21 @@ const VegaTableCell = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$k([
+__decorate$m([
   InjectVegaGlobalSlimmer()
 ], VegaTableCell.prototype, "globalSlimmers", void 0);
-__decorate$k([
+__decorate$m([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
-__decorate$k([
+__decorate$m([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$k([
+__decorate$m([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableCell.style = vegaTableCellCss;
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2771,20 +3077,20 @@ class VegaTableExpandRowRenderer extends VegaSlimmer {
       h("td", null)));
   }
 }
-__decorate$j([
+__decorate$l([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
-__decorate$j([
+__decorate$l([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "expanded", void 0);
-__decorate$j([
+__decorate$l([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "checked", void 0);
-__decorate$j([
+__decorate$l([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2827,19 +3133,19 @@ class VegaTableExpandRowExpandController extends VegaSlimmer {
     }
   }
 }
-__decorate$i([
+__decorate$k([
   MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "host", void 0);
-__decorate$i([
+__decorate$k([
   MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "rowKey", void 0);
-__decorate$i([
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowExpandController.prototype, "expanded", void 0);
-__decorate$i([
+__decorate$k([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "connectedCallback", null);
-__decorate$i([
+__decorate$k([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "disconnectedCallback", null);
 
@@ -2863,7 +3169,7 @@ function isAcceptableTableObserver(input) {
   return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === findParent(this.host, 'vega-table');
 }
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2891,23 +3197,23 @@ class VegaTableExpandRowSelectionController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
   }
 }
-__decorate$h([
+__decorate$j([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowSelectionController.prototype, "checked", void 0);
-__decorate$h([
+__decorate$j([
   MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "host", void 0);
-__decorate$h([
+__decorate$j([
   MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "rowKey", void 0);
-__decorate$h([
+__decorate$j([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "connectedCallback", null);
-__decorate$h([
+__decorate$j([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "disconnectedCallback", null);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2940,17 +3246,17 @@ class VegaTableExpandRowStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$g([
+__decorate$i([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "host", void 0);
-__decorate$g([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
-__decorate$g([
+__decorate$i([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3015,28 +3321,28 @@ class VegaTableExpandRowColSpanController extends VegaSlimmer {
     }).length;
   }
 }
-__decorate$f([
+__decorate$h([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "host", void 0);
-__decorate$f([
+__decorate$h([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowColSpanController.prototype, "colSpan", void 0);
-__decorate$f([
+__decorate$h([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
-__decorate$f([
+__decorate$h([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
-__decorate$f([
+__decorate$h([
   MapToComponentMethod('watchCurrentBreakpoint')
 ], VegaTableExpandRowColSpanController.prototype, "watchCurrentBreakpoint", null);
-__decorate$f([
+__decorate$h([
   MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
 
 const vegaTableExpandRowCss = ":host{display:contents}:host([data-striped=striped]) .vega-table-expanded-row:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.vega-table-expanded-row.expanded.checked{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}";
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -3086,33 +3392,33 @@ const VegaTableExpandRow = class {
     "withMultipleSelection": ["watchWithMultipleSelection"]
   }; }
 };
-__decorate$e([
+__decorate$g([
   InjectVegaGlobalSlimmer()
 ], VegaTableExpandRow.prototype, "globalSlimmers", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowRenderer", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowExpandController", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowSelectionController", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowStateController", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowColSpanController", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableExpandRow.style = vegaTableExpandRowCss;
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3140,16 +3446,16 @@ class VegaTableHeadStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], VegaTableHeadStateController.prototype, "host", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField({ writable: true })
 ], VegaTableHeadStateController.prototype, "fixed", void 0);
 
 const vegaTableHeadCss = ":host{display:table-header-group;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host thead{display:contents}:host(.fixed-header){position:sticky;top:0px}";
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -3165,22 +3471,23 @@ const VegaTableHead = class {
     this.globalSlimmers = {};
     this.vegaTableHeadStateController = new VegaTableHeadStateController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
     /**
      * Indicates whether the table header is fixed.
      */
     this.fixed = false;
     this.handleTableHeadRefChange = (ref) => {
       if (this.tableHeadRef) {
-        ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+        InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
       }
       if (this.fixed) {
-        ZIndexManager.setZIndex(ref, 'base');
+        InternalVegaZIndexManager.setZIndex(ref, 'base');
       }
       this.tableHeadRef = ref;
     };
   }
   disconnectedCallback() {
-    ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+    InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
@@ -3189,18 +3496,21 @@ const VegaTableHead = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$c([
+__decorate$e([
   InjectVegaGlobalSlimmer()
 ], VegaTableHead.prototype, "globalSlimmers", void 0);
-__decorate$c([
+__decorate$e([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaTableHeadStateController", void 0);
-__decorate$c([
+__decorate$e([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableHead.prototype, "headCellEventPrevent", void 0);
 VegaTableHead.style = vegaTableHeadCss;
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3223,11 +3533,144 @@ class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$b([
+__decorate$d([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
 
-const vegaTableHeadCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}th{display:block;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}th.vega-table-cell.sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vega-table-column{display:flex;align-items:center;justify-content:space-between}.vega-table-column-sorter{display:flex;flex-direction:column;gap:4px;margin-left:4px;cursor:pointer;outline:none}.vega-table-column-sorter span{display:inline-flex}.vega-table-column-sorter span.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.vega-table-column-label{flex-grow:1;min-width:0px}.vega-table-column-label.v-text-center{text-align:center}.vega-table-column-label.v-text-left{text-align:left}.vega-table-column-label.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}";
+const arrowUpArrowDown = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M489 377c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55V56c0-13.3-10.7-24-24-24s-24 10.7-24 24V398.1l-55-55c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l96 96c9.4 9.4 24.6 9.4 33.9 0l96-96zM137 39c-9.4-9.4-24.6-9.4-33.9 0L7 135c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55V456c0 13.3 10.7 24 24 24s24-10.7 24-24V113.9l55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L137 39z"/></svg>`,
+};
+
+const circleArrowDown = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM127 281c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l71 71L232 136c0-13.3 10.7-24 24-24s24 10.7 24 24l0 182.1 71-71c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 393c-9.4 9.4-24.6 9.4-33.9 0L127 281z"/></svg>`,
+};
+
+const circleArrowUp = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/></svg>`,
+};
+
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var 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 SortIconRenderer extends VegaSlimmer {
+  render() {
+    if (!this.sorter)
+      return;
+    const { icon, color } = SortIconRenderer.SORT_ICON_MAP[this.sortOrder || 'default'];
+    return (h("span", { class: "vega-table-column-sorter" },
+      h("vega-icon", { color: color, icon: VegaInternalIconManager.getIconKey(icon), size: "size-12" })));
+  }
+}
+SortIconRenderer.SORT_ICON_MAP = {
+  asc: {
+    icon: 'circle-arrow-up',
+    color: 'text-link',
+  },
+  desc: {
+    icon: 'circle-arrow-down',
+    color: 'text-link',
+  },
+  default: {
+    icon: 'arrow-up-arrow-down',
+    color: 'text-secondary',
+  },
+};
+__decorate$c([
+  MapToComponentField()
+], SortIconRenderer.prototype, "sorter", void 0);
+__decorate$c([
+  MapToComponentField()
+], SortIconRenderer.prototype, "sortOrder", void 0);
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the table head cell sort configuration
+ */
+class VegaTableHeadCellSortConfigController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    const parent = findParent(this.host, 'vega-table-head');
+    if (parent) {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(parent, VegaInternalTableHeadCellSortEvent), this.observer);
+    }
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    const topParent = findParent(this.host, 'vega-table-head');
+    if (topParent) {
+      this.hostTable = findParent(topParent, 'vega-table');
+      this.isTemplateRenderMode = this.checkIsTemplateRenderMode();
+      this.observer = new Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      ChangeManager.register(domNodeSubjectFactory.getSubject(topParent, VegaInternalTableHeadCellSortEvent), this.observer);
+    }
+  }
+  /**
+   * Notify other table head cells on click sort
+   */
+  notifyOtherHeadCellOnClickSort() {
+    const parent = findParent(this.host, 'vega-table-head');
+    if (parent) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(parent, VegaInternalTableHeadCellSortEvent), { host: this.host });
+    }
+  }
+  /**
+   * The function isAcceptableObserver checks if the input host matches a specified vega table head cell.
+   *
+   * @param {TableHeadCellObserverPayload} input - The `input` parameter is of type `TableHeadCellObserverPayload`
+   * @returns {boolean} The `isAcceptableObserver` function is returns `true`.
+   */
+  isAcceptableObserver(input) {
+    return input['host'] !== this.host;
+  }
+  /**
+   * The function checks if table is in template render mode and if sortConfig is of type single
+   */
+  observerListener() {
+    var _a;
+    if (this.isTemplateRenderMode) {
+      if (((_a = this.hostTable.sortConfig) === null || _a === void 0 ? void 0 : _a.type) === 'single') {
+        this.sortOrder = undefined;
+      }
+    }
+  }
+  /**
+   * Check whether render mode is template render
+   *
+   * @returns {boolean} return true if the mode is template, otherwise false
+   */
+  checkIsTemplateRenderMode() {
+    return Array.from(this.hostTable.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaTableHeadCellSortConfigController.prototype, "host", void 0);
+__decorate$b([
+  MapToComponentField({ writable: true })
+], VegaTableHeadCellSortConfigController.prototype, "sortOrder", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTableHeadCellSortConfigController.prototype, "sortConfig", void 0);
+__decorate$b([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadCellSortConfigController.prototype, "disconnectedCallback", null);
+__decorate$b([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableHeadCellSortConfigController.prototype, "componentWillLoad", null);
+
+const vegaTableHeadCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{display:block;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}";
 
 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;
@@ -3249,18 +3692,13 @@ const VegaTableHeadCell = class {
     this.vegaTableHeadCellStateController = new VegaTableHeadCellStateController();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.sortIconRenderer = new SortIconRenderer();
+    this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
     this.currentBreakpoint = getCurrentBreakpoint();
     this.handleSort = (e) => {
       this.sortOrder = this.getNextSortOrder(this.sortOrder);
       this.clickEventEmitter.emit({ sortOrder: this.sortOrder }, e);
-    };
-    this.renderSortIconButton = () => {
-      if (!this.sorter)
-        return;
-      return (h("div", { class: "vega-table-column-sorter" }, h("span", { class: this.isSortActive('asc') ? 'v-text-link' : '' }, h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-up'), size: "size-8" })), h("span", { class: this.isSortActive('desc') ? 'v-text-link' : '' }, h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), size: "size-8" }))));
-    };
-    this.isSortActive = (order) => {
-      return this.sortOrder === order;
+      this.vegaTableHeadCellSortConfigController.notifyOtherHeadCellOnClickSort();
     };
     /**
      * Get the next sorter order
@@ -3269,23 +3707,18 @@ const VegaTableHeadCell = class {
      * @returns {Nullable<'desc' | 'asc'>} Return the next sorter order
      */
     this.getNextSortOrder = (sortOrder) => {
-      let nextSortOrder;
-      switch (sortOrder) {
-        case 'desc':
-          nextSortOrder = 'asc';
-          break;
-        case 'asc':
-          nextSortOrder = null;
-          break;
-        default:
-          nextSortOrder = 'desc';
-          break;
-      }
-      return nextSortOrder;
+      var _a;
+      const isReverseSortOrder = FeatureFlag.isEnabled('VEGA_TABLE.REVERSE_SORT_ORDER');
+      const baseOrderSequence = isReverseSortOrder
+        ? ['asc', 'desc']
+        : ['desc', 'asc'];
+      const orderSequence = ((_a = this.sortConfig) === null || _a === void 0 ? void 0 : _a.disableUnsorted)
+        ? baseOrderSequence
+        : [...baseOrderSequence, null];
+      return orderSequence[(orderSequence.indexOf(sortOrder) + 1) % orderSequence.length];
     };
   }
   render() {
-    const labelAlignClassName = generateTextAlignClass(this.textAlign);
     const sortableConfig = this.sorter
       ? {
         role: 'button',
@@ -3294,14 +3727,15 @@ const VegaTableHeadCell = class {
         onClick: (e) => this.handleSort(e),
       }
       : null;
-    const cellClassNames = ['vega-table-cell', this.sorter ? 'sortable' : null];
+    const cellClassNames = ['vega-table-cell'];
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       cellClassNames.push('break-word');
     }
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+        sortable: !!this.sorter,
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, style: { width: this.width } }, h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig), h("div", { class: "vega-table-column" }, h("span", { class: `vega-table-column-label ${labelAlignClassName}` }, h("slot", null)), this.renderSortIconButton()))), this.host);
+      }, style: { width: this.width } }, h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig), h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) }, h("span", { class: "vega-table-column-label" }, h("slot", null)), this.sortIconRenderer.render()))), this.host);
   }
   get host() { return getElement(this); }
 };
@@ -3309,6 +3743,9 @@ const VegaTableHeadCell = class {
   VegaInternalIconManager.register({
     'chevron-up': chevronUp,
     'chevron-down': chevronDown,
+    'arrow-up-arrow-down': arrowUpArrowDown,
+    'circle-arrow-down': circleArrowDown,
+    'circle-arrow-up': circleArrowUp,
   });
 })();
 __decorate$a([
@@ -3326,6 +3763,12 @@ __decorate$a([
 __decorate$a([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "sortIconRenderer", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
 VegaTableHeadCell.style = vegaTableHeadCellCss;
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3341,7 +3784,7 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
       if (this.selectionType !== 'multiple')
         return;
       return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
-        h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, 
+        h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
@@ -3361,6 +3804,16 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
     this.renderHeaderExpandableCell = () => {
       return this.expandable && h("th", { class: "vega-table-expand-action-column" });
     };
+    this.handleClick = (e) => {
+      e.stopPropagation();
+      const event = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(findParent(this.host, 'vega-table'), VegaInternalTableRowSelectAll), {
+        host: this.host,
+        checked: !this.checkedAll,
+      });
+      if (event.defaultPrevented) {
+        e.preventDefault();
+      }
+    };
   }
   /**
    * Used by {@link currentDataObserver}
@@ -3594,7 +4047,7 @@ const VegaTableHeadRow = class {
     this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
     this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
     this.vegaTableHeadRowController = new VegaTableHeadRowController();
-    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaChange], () => this.host);
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -3651,7 +4104,7 @@ class VegaTableRowRenderer extends VegaSlimmer {
         h("div", { class: "vega-table-checkbox-wrapper" },
           h("vega-checkbox", { size: "small", checked: this.checked, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: this.stopRowSelectionPropagation, 
+            onClick: this.handleClick, 
             /* eslint-disable-next-line react/jsx-no-bind */
             ref: (ref) => {
               DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.onRowSelectionChange);
@@ -3662,8 +4115,7 @@ class VegaTableRowRenderer extends VegaSlimmer {
         h("div", { class: "vega-table-expand-icon-wrapper" },
           h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
     };
-    this.onRowClick = (e) => {
-      e.stopPropagation();
+    this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
     };
     this.onRowSelectionChange = (input) => {
@@ -3671,14 +4123,34 @@ class VegaTableRowRenderer extends VegaSlimmer {
         this.vegaTableRowSelectionController.handleRowSelect(input.detail);
       }
     };
-    this.stopRowSelectionPropagation = (e) => {
+    this.handleClick = (e) => {
       e.stopPropagation();
+      const rowSelectEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.parentTableRef, VegaInternalTableRowSelect), {
+        host: this.host,
+        rowKey: this.rowKey,
+        checked: !this.checked,
+      });
+      if (rowSelectEvent.defaultPrevented) {
+        e.preventDefault();
+      }
     };
     this.onExpandIconClick = async (e) => {
       e.stopPropagation();
-      this.vegaTableRowExpandController.handleExpandIconClick();
+      const expandEvent = this.expandEventEmitter.emit({
+        expanded: !this.expanded,
+        rowKey: this.rowKey,
+      });
+      if (expandEvent && !expandEvent.defaultPrevented) {
+        this.vegaTableRowExpandController.handleExpandIconClick();
+      }
     };
   }
+  connectedCallback() {
+    this.setParentTableRef();
+  }
+  getParentTableRef() {
+    return this.parentTableRef;
+  }
   render() {
     var _a, _b;
     return (h(Fragment, null,
@@ -3701,6 +4173,9 @@ class VegaTableRowRenderer extends VegaSlimmer {
   renderExpandRowSpace(rowKey) {
     return (this.expandable && (h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
   }
+  setParentTableRef() {
+    this.parentTableRef = findParent(this.host, 'vega-table');
+  }
 }
 (() => {
   VegaInternalIconManager.register({ 'chevron-down': chevronDown });
@@ -3744,6 +4219,12 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowClickController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "expandEventEmitter", void 0);
+__decorate$5([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowRenderer.prototype, "connectedCallback", null);
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3855,12 +4336,19 @@ class VegaTableRowExpandController extends VegaSlimmer {
    * The handler for expand icon click event.
    */
   handleExpandIconClick() {
-    this.expanded = !this.expanded;
-    ChangeManager.notify(TABLE_EXPAND_ROW, {
+    const rowExpandEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowExpand), {
       host: this.host,
       rowKey: this.rowKey,
-      expanded: this.expanded,
+      expanded: !this.expanded,
     });
+    if (!rowExpandEvent.defaultPrevented) {
+      this.expanded = !this.expanded;
+      ChangeManager.notify(TABLE_EXPAND_ROW, {
+        host: this.host,
+        rowKey: this.rowKey,
+        expanded: this.expanded,
+      });
+    }
   }
   /**
    * Initialize the row expand observer.
@@ -3886,6 +4374,9 @@ __decorate$3([
 __decorate$3([
   MapToComponentField({ writable: true })
 ], VegaTableRowExpandController.prototype, "expanded", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTableRowExpandController.prototype, "vegaTableRowRenderer", void 0);
 __decorate$3([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowExpandController.prototype, "connectedCallback", null);
@@ -3919,8 +4410,15 @@ class VegaTableRowClickController extends VegaSlimmer {
    * Row click handler
    */
   handleRowClick() {
-    ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
-    this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    const rowSelectEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowSelect), {
+      host: this.host,
+      rowKey: this.rowKey,
+      checked: !this.checked,
+    });
+    if (!rowSelectEvent.defaultPrevented) {
+      ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
+      this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    }
   }
   /**
    * Initialize row click observer
@@ -3928,11 +4426,13 @@ class VegaTableRowClickController extends VegaSlimmer {
   initRowClickObserver() {
     this.rowClickObserver = new Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
       this.clicked = payload.host === this.host;
-      if (this.selectionType === 'single' && payload.host === this.host) {
-        this.vegaTableRowSelectionController.setChecked(!this.checked);
-      }
-      else {
-        this.vegaTableRowSelectionController.setChecked(false);
+      if (this.selectionType === 'single') {
+        if (payload.host === this.host) {
+          this.vegaTableRowSelectionController.setChecked(!this.checked);
+        }
+        else {
+          this.vegaTableRowSelectionController.setChecked(false);
+        }
       }
     });
     ChangeManager.register(TABLE_ROW_CLICK, this.rowClickObserver);
@@ -3962,6 +4462,9 @@ __decorate$2([
 __decorate$2([
   MapToComponentField()
 ], VegaTableRowClickController.prototype, "clickEventEmitter", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "vegaTableRowRenderer", void 0);
 __decorate$2([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowClickController.prototype, "connectedCallback", null);
@@ -4103,6 +4606,8 @@ const VegaTableRow = class {
     registerInstance(this, hostRef);
     this.vegaClick = createEvent(this, "vegaClick", 7);
     this.click = createEvent(this, "click", 7);
+    this.vegaExpand = createEvent(this, "vegaExpand", 7);
+    this.expand = createEvent(this, "expand", 7);
     this.globalSlimmers = {};
     this.vegaTableRowRenderer = new VegaTableRowRenderer();
     this.vegaTableRowSelectionController = new VegaTableRowSelectionController();
@@ -4110,7 +4615,8 @@ const VegaTableRow = class {
     this.vegaTableRowClickController = new VegaTableRowClickController();
     this.vegaTableRowStateController = new VegaTableRowStateController();
     this.clickEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaClick);
-    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClick], () => this.host);
+    this.expandEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaExpand);
+    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -4151,6 +4657,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "clickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "expandEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "checkboxValueChangeEventPrevent", void 0);