@heartlandone/vega 2.84.0 → 2.86.0

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

@@ -14,7 +14,7 @@ const ui = require('./ui-ae4ee13d.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
-const vegaEventId = require('./vega-event-id-c08ce3d3.js');
+const vegaEventId = require('./vega-event-id-d9994eb3.js');
 const responsiveFormatFacade = require('./responsive-format-facade-5f6cd211.js');
 const typeGuard = require('./type-guard-2e97fc56.js');
 const component = require('./component-1e352960.js');
@@ -24,15 +24,16 @@ const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-b33171b0.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-58bbc5fc.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-ecca412d.js');
-const immutableMap = require('./immutable-map-edf24b54.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f3979a03.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
+const immutableMap = require('./immutable-map-d711339d.js');
 const translationSlimmer = require('./translation-slimmer-3cd7d3b2.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
+const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const subStateObserverSlimmer = require('./sub-state-observer-slimmer-b8f6f27b.js');
 const featureFlagController = require('./feature-flag-controller-9129ef52.js');
 const breakpoints$1 = require('./breakpoints-ebde4837.js');
-const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const accessibility = require('./accessibility-a5ef2038.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
@@ -44,8 +45,7 @@ require('./array-249289f2.js');
 require('./typography-4560e7f1.js');
 require('./internal-translation-controller-8360a89c.js');
 require('./try-get-document-c0ebd39a.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-6b74b3af.js');
+require('./internal-vega-event-manager-7e0d966d.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./index-f054eb5d.js');
 require('./icon-manager-c12c6ea9.js');
@@ -161,7 +161,7 @@ const VegaTableEditableFieldTypes = [
   'time-picker',
 ];
 
-var __decorate$S = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$U = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -262,23 +262,23 @@ class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "columns", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-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;
@@ -296,7 +296,7 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.toggleExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
     };
     /**
      * Open expandable row by rowKey
@@ -304,7 +304,7 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.openExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, true);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, true);
     };
     /**
      * Close expanded row by rowKey
@@ -312,13 +312,22 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.closeExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, false);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, false);
     };
     /**
      * Close all expanded row
      */
     this.closeAllExpandRow = () => {
-      this.rowExpandable && this.handleCloseAllExpandRow();
+      this.hasExpandableRow && this.handleCloseAllExpandRow();
+    };
+    /**
+     * Whether the row is expandable
+     *
+     * @param {VegaTableDataSourceItem} row - The row data
+     * @returns {boolean} Return true if the row is expandable
+     */
+    this.isExpandableRow = (row) => {
+      return this.expandableRows.includes(this.vegaTableDataSourceController.getRecordKey(row));
     };
     /**
      * Whether the row is expandable
@@ -429,6 +438,12 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_EXPAND_ROW, this.expandObserver);
     remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowExpand));
   }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.setExpandableRows();
+  }
   /**
    * Component lifecycle - componentDidLoad
    */
@@ -439,8 +454,16 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
    * The callback to handle [watchRowExpandable]{@link VegaTable.watchRowExpandable}
    */
   watchRowExpandable() {
+    this.setExpandableRows();
     this.handleCloseAllExpandRow();
   }
+  /**
+   * Set the expandable rows based on the rowExpandable prop
+   */
+  watchCurrentData() {
+    this.setExpandableRows();
+    this.clearUnusedExpandRowSlot();
+  }
   /**
    * Initializes row expand observer
    */
@@ -471,49 +494,110 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
       this.host === ui.findParent(input['host'], 'vega-table'));
   }
+  /**
+   * Sets expandable rows and hasExpandableRow based on rowExpandable and currentData
+   */
+  setExpandableRows() {
+    if (typeof this.rowExpandable === 'boolean') {
+      this.expandableRows = this.rowExpandable
+        ? this.currentData.map((item) => this.vegaTableDataSourceController.getRecordKey(item))
+        : [];
+      this.hasExpandableRow = this.rowExpandable;
+    }
+    else if (typeof this.rowExpandable === 'function') {
+      const result = [];
+      this.currentData.forEach((item) => {
+        const rowKey = this.vegaTableDataSourceController.getRecordKey(item);
+        if (this.rowExpandable(rowKey)) {
+          result.push(rowKey);
+        }
+      });
+      this.expandableRows = result;
+      this.hasExpandableRow = result.length > 0;
+    }
+    else {
+      this.expandableRows = [];
+      this.hasExpandableRow = false;
+    }
+  }
+  /**
+   * Whether the row is expandable by rowKey
+   *
+   * @param {string} rowKey - The row key of the row
+   * @returns {boolean} Return true if the row is expandable
+   */
+  isRowExpandable(rowKey) {
+    return this.expandableRows.includes(rowKey);
+  }
+  /**
+   * Clear the expand row slot which is not expandable anymore to avoid confusion,
+   *    this can be triggered by the change of rowExpandable or currentData
+   */
+  clearUnusedExpandRowSlot() {
+    this.expandedRowKeySet.toArray().forEach((rowKey) => {
+      if (!this.isRowExpandable(rowKey)) {
+        this.expandedRowKeySet.delete(rowKey);
+      }
+    });
+  }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$R([
+__decorate$T([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "expandableRows", void 0);
+__decorate$T([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$R([
+__decorate$T([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableExpandRowController.prototype, "currentData", void 0);
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$R([
+__decorate$T([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowController.prototype, "componentWillLoad", null);
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+__decorate$T([
+  globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
+], VegaTableExpandRowController.prototype, "watchCurrentData", null);
 
-var __decorate$Q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$S = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -852,68 +936,68 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
       this.host === ui.findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", 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;
@@ -1053,41 +1137,41 @@ class VegaTableDataSourceController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-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;
@@ -1098,7 +1182,7 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
     super(...arguments);
     this.renderTableBody = (editable) => {
       const currentData = this.vegaTableDataSourceController.getCurrentData();
-      return (index.h("vega-table-body", null, currentData.map((record, index$1) => {
+      return (index.h("vega-table-body", { ref: (ref) => (this.tableBodyRef = ref) }, currentData.map((record, index$1) => {
         const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
         const isVisibleInCurrentPage = this.vegaTablePaginationController.isRowVisible(index$1);
         const isLastRow = index$1 === currentData.length - 1;
@@ -1110,7 +1194,7 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
             isVisibleInCurrentPage,
             isLastRow: isLastRow,
           }, editable),
-          this.rowExpandable && (index.h("vega-table-expand-row", { class: {
+          this.vegaTableExpandRowController.isExpandableRow(record) && (index.h("vega-table-expand-row", { class: {
               'v-hidden': !isVisibleInCurrentPage,
             }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index$1 % 2 === 1 },
             index.h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
@@ -1120,6 +1204,9 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
   getTableFormRef() {
     return this.tableFormRef;
   }
+  getTableBodyRef() {
+    return this.tableBodyRef;
+  }
   render() {
     const editable = this.columnStructureModel
       .generateColumnConfigByLeaves(this.columns)
@@ -1127,41 +1214,41 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$O([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
+__decorate$Q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableExpandRowController", void 0);
 
-var __decorate$N = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$P = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1224,32 +1311,32 @@ class VegaTableHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.showHeader && index.h("vega-table-head", null, this.renderHeaderRows());
   }
 }
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$M = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$O = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1315,19 +1402,19 @@ class VegaTablePaginationRenderer extends globalSlimmerRegistry.VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
@@ -1354,7 +1441,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, chil
     onScroll: handleVerticalScroll }, children));
 };
 
-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;
@@ -1387,20 +1474,20 @@ class VegaTableScrollContainerRenderer extends globalSlimmerRegistry.VegaSlimmer
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "host", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$K = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$M = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1445,65 +1532,65 @@ class VegaTableRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columnStructureModel", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "translationSlimmer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "editingRows", void 0);
 
-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;
@@ -1567,23 +1654,23 @@ class VegaTablePaginationController extends globalSlimmerRegistry.VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$I = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$K = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1812,55 +1899,55 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "columns", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
@@ -1906,7 +1993,7 @@ class VegaTableSorter {
   }
 }
 
-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;
@@ -1916,6 +2003,20 @@ var __decorate$H = (undefined && undefined.__decorate) || function (decorators,
  * The sort controller for the vega-table
  */
 class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The method to clear all sorters
+     */
+    this.clearSorter = () => {
+      if (this.sortersMap.size > 0) {
+        this.sortersMap.clear(false);
+        this.changeEventEmitter.emit({
+          sorters: [],
+        });
+      }
+    };
+  }
   /**
    * The callback of [watchColumns]{@link VegaTable.watchColumns}
    */
@@ -1976,26 +2077,26 @@ class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
     });
   }
 }
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "sortConfig", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", 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;
@@ -2013,6 +2114,7 @@ class VegaTableColGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
     return (index.h("colgroup", null,
       index.h("col", { style: { minWidth: this.paddingX[0], width: this.paddingX[0] } }),
+      this.rowDraggable && index.h("col", { class: "draggable-col" }),
       this.vegaTableRowSelectionController.getRowSelectionType() === 'multiple' && (index.h("col", { style: { minWidth: '40px', width: '40px' } })),
       this.columnStructureModel
         .generateColumnConfigByLeaves(this.columns)
@@ -2025,27 +2127,30 @@ class VegaTableColGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
           return index.h("col", null);
         }
       }),
-      this.rowExpandable && index.h("col", { style: { minWidth: '40px', width: '40px' } }),
+      this.hasExpandableRow && index.h("col", { style: { minWidth: '40px', width: '40px' } }),
       index.h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
-__decorate$G([
+], VegaTableColGroupRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$I([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "rowDraggable", void 0);
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", 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;
@@ -2230,68 +2335,68 @@ class VegaTableChildrenController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowDivider", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableChildrenController.prototype, "watchCurrentData", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('watchRowDivider')
 ], VegaTableChildrenController.prototype, "watchRowDivider", null);
 
-var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$G = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2321,26 +2426,26 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.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$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowDivider", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableRenderInputController", void 0);
 
-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;
@@ -2396,25 +2501,25 @@ class VegaTableRenderModeController extends globalSlimmerRegistry.VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
@@ -2683,7 +2788,7 @@ class ColumnStructureModel {
 ColumnStructureModel.ROOT_LEVEL = -1;
 ColumnStructureModel.ROOT_KEY = '#root-model#';
 
-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;
@@ -2726,25 +2831,25 @@ class VegaTableColumnStructureModelController extends globalSlimmerRegistry.Vega
     this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
   }
 }
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "columns", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('watchColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('watchGroupColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
 
@@ -2965,7 +3070,7 @@ class ColumnRenderInputModel {
   }
 }
 
-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;
@@ -3128,32 +3233,32 @@ class VegaTableRenderInputController extends globalSlimmerRegistry.VegaSlimmer {
     this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
   }
 }
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderInputController.prototype, "host", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderInputController.prototype, "componentWillLoad", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaTableRenderInputController.prototype, "componentDidRender", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('watchColumnStructureModel')
 ], VegaTableRenderInputController.prototype, "watchColumnStructureModel", 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;
@@ -3220,11 +3325,14 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const row = this.host.shadowRoot.querySelector('vega-table-head-row');
     const rowShadow = row.shadowRoot;
     const firstTh = rowShadow.querySelector('th:first-of-type');
+    const draggableTh = rowShadow.querySelector('.vega-table-draggable-column');
     const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
     const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
     const lastTh = rowShadow.querySelector('th:last-of-type');
     if (firstTh) {
-      const prevWidth = firstTh.getBoundingClientRect().width + ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0);
+      const prevWidth = firstTh.getBoundingClientRect().width +
+        ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0) +
+        ((draggableTh === null || draggableTh === void 0 ? void 0 : draggableTh.getBoundingClientRect().width) || 0);
       const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
       return [prevWidth, nextWidth];
     }
@@ -3283,8 +3391,11 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
       if (hasLeftPinnedColumn) {
         const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
         const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
+        const draggableCell = rowShadow.querySelector('.vega-table-draggable-column');
         this.updatePinnedPosition(firstCell, 'left', 0);
-        this.updatePinnedPosition(selectionCell, 'left', leftPadding);
+        this.updatePinnedPosition(draggableCell, 'left', leftPadding);
+        const draggableCellWidth = (draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) || 0;
+        this.updatePinnedPosition(selectionCell, 'left', leftPadding + draggableCellWidth);
       }
       if (hasRightPinnedColumn) {
         const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
@@ -3292,65 +3403,699 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         this.updatePinnedPosition(expandCell, 'right', rightPadding);
         this.updatePinnedPosition(lastCell, 'right', 0);
       }
-      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
-        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
-        if (expandCell) {
-          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
-          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
-          // we should set the width to make the expand slot not scroll by table scroll.
-          // ticket: https://gethired.atlassian.net/browse/VD-7015
-          slotInnerContainer.style.width = `${expandContainerWidth}px`;
-        }
+      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
+        if (expandCell) {
+          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
+          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
+          // we should set the width to make the expand slot not scroll by table scroll.
+          // ticket: https://gethired.atlassian.net/browse/VD-7015
+          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+        }
+      }
+    });
+  }
+  clearAllPinnedPositions() {
+    this.previouslyStyledCells.forEach((cell) => {
+      cell.style.position = '';
+      cell.style.zIndex = '';
+      cell.style.left = '';
+      cell.style.right = '';
+      if (cell.classList.contains('expanded-row-slot-inner')) {
+        cell.style.width = '';
+      }
+    });
+    this.previouslyStyledCells.clear();
+  }
+  updatePinnedPosition(cell, type, position) {
+    if (!cell)
+      return;
+    cell.style.position = 'sticky';
+    cell.style.zIndex = '1';
+    cell.style[type] = `${position}px`;
+    this.previouslyStyledCells.add(cell);
+  }
+}
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate$C([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentMethod('watchColumnStructureModel')
+], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);
+
+var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Makes the direct children of a container element sortable via pointer events.
+ * This works across shadow DOM boundaries because pointer events are composed.
+ */
+class DraggableElementSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor(entry) {
+    super();
+    this.activePointerId = null;
+    this.activeItem = null;
+    this.isDragging = false;
+    this.startX = 0;
+    this.startY = 0;
+    this.dragFromIndex = null;
+    this.dragToIndex = null;
+    this.currentOverItem = null;
+    this.currentOverIndex = null;
+    this.activeItemHeight = 0;
+    this.cachedItems = [];
+    this.cachedItemDraggableMap = new WeakMap();
+    /**
+     * Handles the `pointerdown` event. Validates that the event originated from the trigger element
+     * and initiates a drag session for the matched item.
+     *
+     * @param {PointerEvent} e - The pointer event fired on the container.
+     */
+    this.onPointerDown = (e) => {
+      // check left mouse button only
+      if (e.button !== 0)
+        return;
+      const item = this.getItemFromComposedPath(e, true);
+      if (item) {
+        this.startDrag(item, e);
+        e.preventDefault();
+      }
+    };
+    /**
+     * Handles the `pointermove` event. Once the drag threshold is crossed, updates the dragged
+     * element's visual position and recalculates the current drop target.
+     *
+     * @param {PointerEvent} e - The pointer event fired on the window.
+     */
+    this.onPointerMove = (e) => {
+      if (!this.isCurrentPointEvent(e) || !this.hasCrossedDragThreshold(e))
+        return;
+      this.beginDragging();
+      this.syncActiveVisual(e);
+      this.updateDropTarget(e);
+      this.emitDrag();
+      e.preventDefault();
+    };
+    /**
+     * Handles the `pointerup` event. Finalizes the drag and fires the reorder callback
+     * if the item was released at a different position.
+     *
+     * @param {PointerEvent} e - The pointer event fired on the window.
+     */
+    this.onPointerUp = (e) => {
+      if (!this.isCurrentPointEvent(e))
+        return;
+      this.finishDrag();
+    };
+    /**
+     * Handles the `pointercancel` event. Aborts the active drag session and restores all
+     * inline styles to their pre-drag state. Only responds to the active pointer.
+     *
+     * @param {PointerEvent} e - The pointer event fired on the window.
+     */
+    this.onPointerCancel = (e) => {
+      if (e.pointerId === this.activePointerId)
+        this.resetDragState();
+    };
+    this.entry = entry;
+  }
+  /**
+   * Re-registers pointer event listeners when the host component is re-attached to the DOM after a prior disconnection.
+   */
+  connectedCallback() {
+    this.init();
+  }
+  /**
+   * Removes all pointer event listeners and clears drag state when the host component is detached from the DOM.
+   */
+  disconnectedCallback() {
+    this.destroy();
+  }
+  /**
+   * Registers pointer event listeners once the host component has finished its initial render.
+   */
+  componentDidLoad() {
+    this.init();
+  }
+  /**
+   * Updates the slimmer's draggable state in response to changes in the host component's `rowDraggable` property.
+   */
+  watchIsDraggable() {
+    this.isDraggable ? this.init() : this.destroy();
+  }
+  /**
+   * Initializes the slimmer by attaching pointer event listeners if `isDraggable` is true.
+   */
+  init() {
+    this.isDraggable && this.listenPointerEvents();
+  }
+  /**
+   * Cleans up the slimmer by removing pointer event listeners and resetting all drag state.
+   */
+  destroy() {
+    this.removePointerListeners();
+    this.resetDragState();
+  }
+  /**
+   * Attaches `pointerdown` on the container and `pointermove` / `pointerup` / `pointercancel` on the window.
+   */
+  listenPointerEvents() {
+    const container = this.getContainer();
+    if (container) {
+      container.addEventListener('pointerdown', this.onPointerDown);
+      window.addEventListener('pointermove', this.onPointerMove);
+      window.addEventListener('pointerup', this.onPointerUp);
+      window.addEventListener('pointercancel', this.onPointerCancel);
+    }
+  }
+  /**
+   * Removes all pointer event listeners that were registered by {@link listenPointerEvents}.
+   */
+  removePointerListeners() {
+    const container = this.getContainer();
+    if (container)
+      container.removeEventListener('pointerdown', this.onPointerDown);
+    window.removeEventListener('pointermove', this.onPointerMove);
+    window.removeEventListener('pointerup', this.onPointerUp);
+    window.removeEventListener('pointercancel', this.onPointerCancel);
+  }
+  /**
+   * Initializes all drag state for the given item. Caches the current item list,
+   * records the pointer origin, and captures the item height used for sibling offset calculations.
+   *
+   * @param {HTMLElement} item - The draggable item element that was grabbed.
+   * @param {PointerEvent} e - The originating `pointerdown` event.
+   */
+  startDrag(item, e) {
+    this.activePointerId = e.pointerId;
+    this.activeItem = item;
+    this.isDragging = false;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.cacheItems();
+    this.dragFromIndex = this.getItems().indexOf(item);
+    this.dragToIndex = this.dragFromIndex;
+    this.currentOverItem = item;
+    this.currentOverIndex = this.dragFromIndex;
+    this.activeItemHeight = this.getVisualElement(item).getBoundingClientRect().height;
+  }
+  /**
+   * Marks the interaction as an active drag after threshold crossing.
+   */
+  beginDragging() {
+    if (this.isDragging || this.dragFromIndex === null || !this.activeItem)
+      return;
+    this.isDragging = true;
+    this.onDragDrop('start');
+  }
+  /**
+   * Translates the dragged item's visual element to follow the pointer and lifts it
+   * above sibling items by applying `zIndex` and disabling its pointer events.
+   *
+   * @param {PointerEvent} e - The current `pointermove` event.
+   */
+  syncActiveVisual(e) {
+    if (!this.activeItem)
+      return;
+    const visualElement = this.getVisualElement(this.activeItem);
+    const moveY = e.clientY - this.startY;
+    visualElement.style.transform = `translateY(${moveY}px)`;
+    visualElement.style.position = 'relative';
+    visualElement.style.pointerEvents = 'none';
+    visualElement.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
+    internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(visualElement, 'top');
+  }
+  /**
+   * Resolves the item currently under the pointer and updates `dragToIndex`,
+   * then applies slot-shift transforms to all sibling items.
+   *
+   * @param {PointerEvent} e - The current `pointermove` event.
+   */
+  updateDropTarget(e) {
+    if (this.dragFromIndex === null || !this.activeItem)
+      return;
+    const overItem = this.getItemFromComposedPath(e, false);
+    if (!overItem) {
+      this.emitDragLeave(this.currentOverIndex, this.currentOverItem);
+      this.currentOverItem = null;
+      this.currentOverIndex = null;
+      return;
+    }
+    const overIndex = this.getItemIndex(overItem);
+    const resolvedDropIndex = this.getResolvedDropIndex(overItem, e.clientY);
+    if (this.currentOverItem !== overItem) {
+      this.emitDragLeave(this.currentOverIndex, this.currentOverItem);
+      this.currentOverItem = overItem;
+      this.currentOverIndex = overIndex;
+      this.onDragDrop('enter');
+    }
+    else {
+      this.currentOverIndex = overIndex;
+    }
+    this.dragToIndex = resolvedDropIndex;
+    this.onDragDrop('over');
+    this.applyLayoutTransforms();
+  }
+  /**
+   * Completes the drag session. Captures the final `fromIndex` and `toIndex` before
+   * resetting state, then fires `onReorder` if the item was moved to a new position.
+   */
+  finishDrag() {
+    var _a, _b, _c;
+    const fromIndex = this.dragFromIndex;
+    const toIndex = this.dragToIndex;
+    const shouldReorder = this.isDragging && fromIndex != null && fromIndex !== toIndex;
+    const fromItem = fromIndex != null ? (_a = this.getItems().at(fromIndex)) !== null && _a !== void 0 ? _a : null : null;
+    const toItem = this.currentOverItem;
+    if (this.isDragging && fromIndex != null && fromItem) {
+      this.onDragDrop('drop');
+    }
+    this.resetDragState();
+    if (shouldReorder && fromIndex != null && fromItem) {
+      (_c = (_b = this.entry).onDragDrop) === null || _c === void 0 ? void 0 : _c.call(_b, {
+        status: 'end',
+        options: {
+          fromIndex,
+          fromItem,
+          toIndex,
+          toItem,
+        },
+      });
+    }
+  }
+  /**
+   * Clears all inline drag styles applied to cached items and resets every
+   * drag-related state field to its initial value.
+   */
+  resetDragState() {
+    // Restore inline styles for all cached items.
+    this.cachedItems.forEach((item) => {
+      const cachedItem = this.cachedItemDraggableMap.get(item);
+      if (!cachedItem)
+        return;
+      const { visualElement, inlineStyle } = cachedItem;
+      if (inlineStyle == null) {
+        visualElement.removeAttribute('style');
+      }
+      else {
+        visualElement.setAttribute('style', inlineStyle);
       }
     });
+    // Clear any zIndex overrides from the active item.
+    if (this.activeItem) {
+      const activeVisualElement = this.getVisualElement(this.activeItem);
+      internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(activeVisualElement, 'top');
+    }
+    // Reset all drag state fields.
+    this.activePointerId = null;
+    this.activeItem = null;
+    this.isDragging = false;
+    this.dragFromIndex = null;
+    this.dragToIndex = null;
+    this.currentOverItem = null;
+    this.currentOverIndex = null;
+    this.activeItemHeight = 0;
+    this.cachedItemDraggableMap = new WeakMap();
+    this.cachedItems = [];
   }
-  clearAllPinnedPositions() {
-    this.previouslyStyledCells.forEach((cell) => {
-      cell.style.position = '';
-      cell.style.zIndex = '';
-      cell.style.left = '';
-      cell.style.right = '';
-      if (cell.classList.contains('expanded-row-slot-inner')) {
-        cell.style.width = '';
+  /**
+   * Invokes the container factory function to retrieve the current container element.
+   *
+   * @returns {Nullable<HTMLElement>} The resolved container element, or `null` if the factory throws.
+   */
+  getContainer() {
+    return this.entry.container();
+  }
+  /**
+   * Performs a live DOM query for all elements matching `itemSelector` within the container.
+   *
+   * @returns {HTMLElement[]} An array of matched item elements, or an empty array if the container is unavailable.
+   */
+  queryItems() {
+    const container = this.getContainer();
+    if (!container)
+      return [];
+    return Array.from(container.querySelectorAll(this.entry.itemSelector));
+  }
+  /**
+   * Returns the cached item list during an active drag session.
+   * Falls back to a live DOM query when no drag is in progress.
+   *
+   * @returns {HTMLElement[]} The current list of draggable item elements.
+   */
+  getItems() {
+    return this.cachedItems.length > 0 ? this.cachedItems : this.queryItems();
+  }
+  /**
+   * Returns the zero-based index of the given element within the current item list.
+   *
+   * @param {HTMLElement} target - The element to locate.
+   * @returns {number} The index of the element, or `-1` if it is not found.
+   */
+  getItemIndex(target) {
+    return this.getItems().indexOf(target);
+  }
+  /**
+   * Resolves the element that should receive drag-related inline styles for a given item.
+   * Checks the item's shadow root first, then its light DOM children, then falls back to the item itself.
+   *
+   * @param {HTMLElement} item - The draggable item element.
+   * @returns {HTMLElement} The visual target element for style application.
+   */
+  getVisualElement(item) {
+    const cachedItem = this.cachedItemDraggableMap.get(item);
+    if (cachedItem)
+      return cachedItem.visualElement;
+    return this.resolveVisualElement(item);
+  }
+  /**
+   * Resolves the element that should receive drag-related inline styles for a given item.
+   * Checks the item's shadow root first, then its light DOM children, then falls back to the item itself.
+   *
+   * @param {HTMLElement} item - The draggable item element.
+   * @returns {HTMLElement} The visual target element for style application.
+   */
+  resolveVisualElement(item) {
+    var _a, _b;
+    const visualElementSelector = this.entry.visualElementSelector;
+    if (!visualElementSelector)
+      return item;
+    const shadowElement = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(visualElementSelector);
+    if (shadowElement)
+      return shadowElement;
+    return (_b = item.querySelector(visualElementSelector)) !== null && _b !== void 0 ? _b : item;
+  }
+  /**
+   * Caches each draggable item using the item as the map key and stores its resolved visual element
+   * together with the visual element's original inline style for precise restoration after dragging.
+   */
+  cacheItems() {
+    this.cachedItemDraggableMap = new WeakMap();
+    this.cachedItems = this.queryItems();
+    this.cachedItems.forEach((cachedItem) => {
+      const visualElement = this.resolveVisualElement(cachedItem);
+      this.cachedItemDraggableMap.set(cachedItem, {
+        visualElement,
+        inlineStyle: visualElement.getAttribute('style'),
+      });
+    });
+  }
+  /**
+   * Walks the event's composed path to find the matching item element.
+   * When `requireTriggerMatch` is `true`, also verifies that the event originated
+   * inside the configured trigger element; returns `null` if either condition fails.
+   *
+   * @param {Event} e - The event whose composed path is inspected.
+   * @param {boolean} requireTriggerMatch - When `true`, the item is only returned if the trigger element was also matched.
+   * @returns {Nullable<HTMLElement>} The matched item element, or `null` if not found or trigger requirement not met.
+   */
+  getItemFromComposedPath(e, requireTriggerMatch = false) {
+    const itemSelector = this.entry.itemSelector;
+    const triggerElementSelector = this.entry.triggerElementSelector;
+    let matchedItem = null;
+    let matchedTrigger = !triggerElementSelector;
+    for (const node of e.composedPath()) {
+      if (!(node instanceof HTMLElement))
+        continue;
+      if (!matchedItem && node.matches(itemSelector)) {
+        matchedItem = node;
       }
+      if (!matchedTrigger && triggerElementSelector && node.matches(triggerElementSelector)) {
+        matchedTrigger = true;
+      }
+      if (matchedItem && matchedTrigger)
+        break;
+    }
+    return !matchedItem || (requireTriggerMatch && !matchedTrigger) ? null : matchedItem;
+  }
+  /**
+   * Translates sibling items up or down to visually make space for the dragged item at its current drop target.
+   * Items within the affected index range shift by one item height; all others are reset to their natural position.
+   */
+  applyLayoutTransforms() {
+    if (this.dragFromIndex == null || this.dragToIndex == null || this.activeItemHeight === 0)
+      return;
+    const fromIndex = this.dragFromIndex;
+    const toIndex = this.dragToIndex;
+    const offsetY = fromIndex < toIndex ? -this.activeItemHeight : this.activeItemHeight;
+    this.getItems().forEach((item, index) => {
+      if (item === this.activeItem)
+        return;
+      const visualElement = this.getVisualElement(item);
+      const isInRange = fromIndex < toIndex
+        ? index > fromIndex && index <= toIndex
+        : index >= toIndex && index < fromIndex;
+      visualElement.style.transform = isInRange ? `translateY(${offsetY}px)` : '';
     });
-    this.previouslyStyledCells.clear();
   }
-  updatePinnedPosition(cell, type, position) {
-    if (!cell)
+  /**
+   * Calculates the resolved drop index based on whether the pointer is above or below
+   * the midpoint of the hovered item. The slot only switches after crossing the 50% mark,
+   * preventing index jitter at slot boundaries.
+   *
+   * @param {HTMLElement} overItem - The item element currently under the pointer.
+   * @param {number} pointerClientY - The vertical client coordinate of the pointer.
+   * @returns {number} The resolved zero-based index where the dragged item would be inserted.
+   */
+  getResolvedDropIndex(overItem, pointerClientY) {
+    const overIndex = this.getItemIndex(overItem);
+    const dragFromIndex = this.dragFromIndex;
+    if (overIndex < 0 || dragFromIndex == null)
+      return overIndex;
+    if (overIndex === dragFromIndex)
+      return overIndex;
+    const overRect = this.getVisualElement(overItem).getBoundingClientRect();
+    const isAfterMidpoint = pointerClientY > overRect.top + overRect.height / 2;
+    return overIndex > dragFromIndex
+      ? isAfterMidpoint
+        ? overIndex
+        : overIndex - 1
+      : isAfterMidpoint
+        ? overIndex + 1
+        : overIndex;
+  }
+  /**
+   * Checks whether the given pointer event belongs to the pointer that started the current drag session.
+   *
+   * @param {PointerEvent} e - The pointer event to test.
+   * @returns {boolean} `true` if the event's `pointerId` matches the active drag pointer.
+   */
+  isCurrentPointEvent(e) {
+    return this.activePointerId !== null && this.activePointerId === e.pointerId;
+  }
+  /**
+   * Checks whether the pointer has moved at least `DRAG_THRESHOLD` pixels (combined X + Y delta)
+   * from its origin, or whether a drag is already in progress.
+   *
+   * @param {PointerEvent} e - The current `pointermove` event.
+   * @returns {boolean} `true` if the drag threshold has been crossed or dragging is already active.
+   */
+  hasCrossedDragThreshold(e) {
+    if (this.isDragging)
+      return true;
+    const deltaX = Math.abs(e.clientX - this.startX);
+    const deltaY = Math.abs(e.clientY - this.startY);
+    return deltaX + deltaY >= DraggableElementSlimmer.DRAG_THRESHOLD;
+  }
+  /**
+   * Emits the drag lifecycle callback while the pointer is moving.
+   */
+  emitDrag() {
+    if (this.dragFromIndex === null || !this.activeItem)
       return;
-    cell.style.position = 'sticky';
-    cell.style.zIndex = '1';
-    cell.style[type] = `${position}px`;
-    this.previouslyStyledCells.add(cell);
+    this.onDragDrop('drag');
+  }
+  /**
+   * Emits a drag-leave lifecycle callback when the pointer exits a hovered item.
+   *
+   * @param {Nullable<number>} toIndex - Index of the item being left.
+   * @param {Nullable<HTMLElement>} toItem - Item element being left.
+   */
+  emitDragLeave(toIndex, toItem) {
+    if (toIndex === null || !toItem)
+      return;
+    this.onDragDrop('leave');
+  }
+  /**
+   * Emits a drag lifecycle payload to consumers.
+   *
+   * @param {DragDropEventStatus} status - Current lifecycle phase.
+   */
+  onDragDrop(status) {
+    var _a, _b;
+    if (this.dragFromIndex == null || !this.activeItem)
+      return;
+    (_b = (_a = this.entry).onDragDrop) === null || _b === void 0 ? void 0 : _b.call(_a, {
+      status,
+      options: {
+        fromIndex: this.dragFromIndex,
+        fromItem: this.activeItem,
+        toIndex: this.dragToIndex,
+        toItem: this.currentOverItem,
+      },
+    });
+  }
+}
+DraggableElementSlimmer.DRAG_THRESHOLD = 4;
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], DraggableElementSlimmer.prototype, "connectedCallback", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], DraggableElementSlimmer.prototype, "disconnectedCallback", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], DraggableElementSlimmer.prototype, "componentDidLoad", null);
+
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The row draggable controller for the vega-table
+ */
+class VegaTableRowDraggableController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.draggableElementSlimmer = dynamicSlimmer.createDynamicSlimmer(VegaTableRowDraggableController, DraggableElementSlimmer, [{ mapFrom: 'rowDraggable', mapTo: 'isDraggable' }], [{ mapFrom: 'watchRowDraggable', mapTo: 'watchIsDraggable' }], [
+      {
+        container: this.getDragContainer.bind(this),
+        itemSelector: 'vega-table-row',
+        triggerElementSelector: 'td.vega-table-draggable-column',
+        visualElementSelector: 'tr.vega-table-row',
+        onDragDrop: this.onDragDrop.bind(this),
+      },
+    ]);
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.componentDidLoad}
+   */
+  componentDidLoad() {
+  }
+  /**
+   * Watches for changes to the rowDraggable property and initializes or destroys the DraggableElement instance accordingly.
+   * If rowDraggable is true, it calls setRowDraggableElement to initialize the instance;
+   * if false, it calls destroyRowDraggableElement to clean up.
+   */
+  watchRowDraggable() {
+  }
+  /**
+   * Resolve the draggable container for current render mode.
+   *
+   * @returns {Nullable<HTMLElement>} The table body container used by drag behavior.
+   */
+  getDragContainer() {
+    return this.isTemplateRenderMode
+      ? this.host.querySelector('vega-table-body')
+      : this.vegaTableBodyRenderer.getTableBodyRef();
+  }
+  /**
+   * Handles the drag and drop event emitted by the DraggableElement instance, re-emitting it through the rowDragDropEventEmitter with additional details.
+   *
+   * @param {DragDropEventPayload} payload - An object containing payload about the drag event.
+   */
+  onDragDrop(payload) {
+    const event = this.rowDragDropEventEmitter.emit(payload);
+    if (!event.defaultPrevented) {
+      payload.status === 'end' && this.onDragEnd(payload);
+    }
+  }
+  /**
+   * Handles the logic for reordering rows in the table when a drag and drop action is completed.
+   *
+   * @param {DragDropEventPayload} payload - An object containing details about the completed drag event, including fromIndex and toIndex.
+   */
+  onDragEnd(payload) {
+    const fromIndex = payload.options.fromIndex;
+    const toIndex = payload.options.toIndex;
+    this.vegaTableSortController.clearSorter();
+    if (this.isTemplateRenderMode) {
+      const rows = Array.from(this.host.querySelectorAll('vega-table-row'));
+      const container = this.host.querySelector('vega-table-body');
+      fromIndex > toIndex
+        ? container.insertBefore(rows[fromIndex], rows[toIndex])
+        : container.insertBefore(rows[fromIndex], rows[toIndex].nextSibling);
+    }
+    else {
+      const rows = this.vegaTableDataSourceController.getCurrentData();
+      const copiedRows = [...rows];
+      const [moved] = copiedRows.splice(fromIndex, 1);
+      copiedRows.splice(toIndex, 0, moved);
+      this.vegaTableDataSourceController.setCurrentData(copiedRows);
+    }
   }
 }
 __decorate$A([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "host", void 0);
+], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
 __decorate$A([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+], VegaTableRowDraggableController.prototype, "host", void 0);
 __decorate$A([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
 __decorate$A([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
 __decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
 __decorate$A([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
-], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaTableRowDraggableController.prototype, "connectedCallback", null);
 __decorate$A([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
-], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
 __decorate$A([
-  globalSlimmerRegistry.MapToComponentMethod('watchColumnStructureModel')
-], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentMethod('watchRowDraggable')
+], VegaTableRowDraggableController.prototype, "watchRowDraggable", null);
 
-const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header,.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header){box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}.vega-table-scrollable-container.scrolled vega-table-foot.fixed-footer::after,.vega-table-scrollable-container.scrolled ::slotted(vega-table-foot.fixed-footer)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}:host(.is-group-table) .vega-table-scrollable-container{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-width:1px;border-style:solid}:host(.is-group-table.density-relaxed) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-default) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-compact) .vega-table-scrollable-container{border-radius:4px}:host(.is-pinned-table) table{min-width:max-content}";
+const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header,.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header){box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}.vega-table-scrollable-container.scrolled vega-table-foot.fixed-footer::after,.vega-table-scrollable-container.scrolled ::slotted(vega-table-foot.fixed-footer)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}:host(.is-group-table) .vega-table-scrollable-container{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-width:1px;border-style:solid}:host(.is-group-table.density-relaxed) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-default) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-compact) .vega-table-scrollable-container{border-radius:4px}:host(.is-pinned-table) table{min-width:max-content}.draggable-col{min-width:16px;width:16px}";
 
 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;
@@ -3379,6 +4124,8 @@ const VegaTable = class {
     this.rowSelect = index.createEvent(this, "rowSelect", 7);
     this.vegaRowSelectAll = index.createEvent(this, "vegaRowSelectAll", 7);
     this.rowSelectAll = index.createEvent(this, "rowSelectAll", 7);
+    this.vegaRowDragDrop = index.createEvent(this, "vegaRowDragDrop", 7);
+    this.rowDragDrop = index.createEvent(this, "rowDragDrop", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
@@ -3392,7 +4139,6 @@ const VegaTable = class {
     this.vegaTableCellRenderer = new VegaTableCellRenderer();
     this.vegaTablePaginationRenderer = new VegaTablePaginationRenderer();
     this.vegaTableScrollContainerRenderer = new VegaTableScrollContainerRenderer();
-    this.vegaTableExpandRowController = new VegaTableExpandRowController();
     this.vegaTableRowSelectionController = new VegaTableRowSelectionController$1();
     this.vegaTableDataSourceController = new VegaTableDataSourceController();
     this.vegaTablePaginationController = new VegaTablePaginationController();
@@ -3400,13 +4146,20 @@ const VegaTable = class {
     this.vegaTableSortController = new VegaTableSortController();
     this.vegaTableColGroupRenderer = new VegaTableColGroupRenderer();
     this.vegaTableChildrenController = new VegaTableChildrenController();
+    this.vegaTableRowDraggableController = new VegaTableRowDraggableController();
+    /**
+     * vegaTableExpandRowController should be injected after childrenController and VegaTableDataSourceController,
+     *     because it needs to wait for sync currentData to set expandableRows.
+     */
+    this.vegaTableExpandRowController = new VegaTableExpandRowController();
     /**
      * The below method is e2e-test covered in
      * @see{module:should-render-responsive-columns-with-expandable-row-and-current-breakpoint-is-smaller-than-S}
      */
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.rowSelectionNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
-    this.rowExpandableNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
+    this.expandableRowsNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'expandableRows', 'watchExpandableRows');
+    this.hasExpandableRowNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'hasExpandableRow', 'watchHasExpandableRow');
     this.paddingXNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
     this.rowClickableNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
     this.scrollConfigNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
@@ -3416,11 +4169,13 @@ const VegaTable = class {
     this.selectAllChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaSelectAllChange);
     this.rowClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowClick);
     this.rowExpandEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowExpand);
+    this.rowDragDropEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowDragDrop);
     this.rowDividerNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
     this.columnDividerNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
     this.densityNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
     this.isTemplateRenderModeNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
     this.currentDataNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
+    this.rowDraggableNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowDraggable', 'watchRowDraggable');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaTableRuntimeMetricsPayloadDefinition);
     this.rowSelectEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowSelect);
     this.rowSelectAllEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowSelectAll);
@@ -3447,6 +4202,8 @@ const VegaTable = class {
       this.editingRows = newSet;
     });
     this.isSelectedAll = false;
+    this.expandableRows = [];
+    this.hasExpandableRow = false;
     /**
      * Defines the columns of the table.
      *
@@ -3490,6 +4247,12 @@ const VegaTable = class {
      * @vegaVersion 1.3.0
      */
     this.rowClickable = false;
+    /**
+     * Specifies whether the table supports row dragging for reordering.
+     *
+     * @vegaVersion 2.85.0
+     */
+    this.rowDraggable = false;
     /**
      * Specifies whether dividers should be displayed
      *    between rows in the table.
@@ -3571,6 +4334,10 @@ const VegaTable = class {
   }
   watchColumnStructureModel() {
   }
+  watchExpandableRows() {
+  }
+  watchHasExpandableRow() {
+  }
   watchColumns() {
   }
   watchGroupColumns() {
@@ -3583,6 +4350,8 @@ const VegaTable = class {
   }
   watchRowClickable() {
   }
+  watchRowDraggable() {
+  }
   watchRowDivider() {
   }
   watchColumnDivider() {
@@ -3806,12 +4575,15 @@ const VegaTable = class {
     "isSelectedAll": ["watchSelectedAll"],
     "isTemplateRenderMode": ["watchTemplateRenderMode"],
     "columnStructureModel": ["watchColumnStructureModel"],
+    "expandableRows": ["watchExpandableRows"],
+    "hasExpandableRow": ["watchHasExpandableRow"],
     "columns": ["watchColumns"],
     "groupColumns": ["watchGroupColumns"],
     "dataSource": ["watchDataSource"],
     "rowSelection": ["watchRowSelection"],
     "rowExpandable": ["watchRowExpandable"],
     "rowClickable": ["watchRowClickable"],
+    "rowDraggable": ["watchRowDraggable"],
     "rowDivider": ["watchRowDivider"],
     "columnDivider": ["watchColumnDivider"],
     "striped": ["watchStriped"],
@@ -3860,9 +4632,6 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$z([
-  globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaTable.prototype, "vegaTableExpandRowController", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
@@ -3884,6 +4653,12 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowDraggableController", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableExpandRowController", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
@@ -3892,7 +4667,10 @@ __decorate$z([
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
+], VegaTable.prototype, "expandableRowsNotifySlimmer", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "hasExpandableRowNotifySlimmer", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
@@ -3920,6 +4698,9 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandEventEmitter", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "rowDragDropEventEmitter", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
@@ -3935,6 +4716,9 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "rowDraggableNotifySlimmer", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
@@ -4019,10 +4803,11 @@ const generateTextAlignClass = (align) => {
  *
  * @param {number} columnLength - The number of columns in a table or grid.
  * @param {boolean} withMultipleSelection - A boolean value indicating whether the table has a column for multiple selection.
- * @returns {number} the value of `columnLength` plus 2 if `withMultipleSelection` is true, or plus 1 if `withMultipleSelection` is false.
+ * @param {boolean} withRowDraggable - A boolean value indicating whether the table has a column for row draggable.
+ * @returns {number} the value of `columnLength` plus 2 if `withMultipleSelection` is true, or plus 1 if `withMultipleSelection` is false, plus 1 if `withRowDraggable` is true.
  */
-const generateColSpan = (columnLength, withMultipleSelection) => {
-  return columnLength + (withMultipleSelection ? 2 : 1);
+const generateColSpan = (columnLength, withMultipleSelection, withRowDraggable) => {
+  return columnLength + (withMultipleSelection ? 2 : 1) + (withRowDraggable ? 1 : 0);
 };
 
 var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -4500,6 +5285,10 @@ class VegaTableExpandRowStateController extends subStateObserverSlimmer.SubState
             }
           },
         },
+        {
+          subStateName: 'withRowDraggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -4510,6 +5299,9 @@ __decorate$q([
 __decorate$q([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableExpandRowStateController.prototype, "withRowDraggable", void 0);
 __decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
@@ -4536,7 +5328,7 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
      * Update state colSpan
      */
     this.updateColSpan = () => {
-      this.colSpan = generateColSpan(this.getVisibleColumnsNumber(), this.withMultipleSelection);
+      this.colSpan = generateColSpan(this.getVisibleColumnsNumber(), this.withMultipleSelection, this.withRowDraggable);
     };
   }
   /**
@@ -4557,6 +5349,12 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
   watchWithMultipleSelection() {
     this.updateColSpan();
   }
+  /**
+   * Update the expand row content col span when draggable state changed
+   */
+  watchWithRowDraggable() {
+    this.updateColSpan();
+  }
   /**
    * Get visual columns number, it will be changed by the breakpoints
    *
@@ -4588,6 +5386,9 @@ __decorate$p([
 __decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableExpandRowColSpanController.prototype, "withRowDraggable", void 0);
 __decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
@@ -4597,6 +5398,9 @@ __decorate$p([
 __decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentMethod('watchWithRowDraggable')
+], VegaTableExpandRowColSpanController.prototype, "watchWithRowDraggable", null);
 
 const vegaTableExpandRowCss = ":host{display:contents}:host .vega-table-expanded-row.striped:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.vega-table-expanded-row.expanded.checked{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}:host tr.is-pinned-row td:first-of-type{position:sticky;z-index:1;left:0px}:host tr.is-pinned-row td.vega-table-expanded-row-slot-container div{position:sticky;z-index:1;left:8px}";
 
@@ -4640,6 +5444,8 @@ const VegaTableExpandRow = class {
   }
   watchWithMultipleSelection() {
   }
+  watchWithRowDraggable() {
+  }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
     return component.sanitizeVegaComponent(index.h(index.Host, null, this.vegaTableExpandRowRenderer.render()), this.host);
@@ -4647,7 +5453,8 @@ const VegaTableExpandRow = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "currentBreakpoint": ["watchCurrentBreakpoint"],
-    "withMultipleSelection": ["watchWithMultipleSelection"]
+    "withMultipleSelection": ["watchWithMultipleSelection"],
+    "withRowDraggable": ["watchWithRowDraggable"]
   }; }
 };
 __decorate$o([
@@ -4923,12 +5730,16 @@ class VegaTableFootRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
       return index.h("td", { class: "vega-table-selection-column" });
     };
     this.renderFooterExpandableCell = () => {
-      return this.expandable && index.h("td", { class: "vega-table-expand-action-column" });
+      return this.hasExpandableRow && index.h("td", { class: "vega-table-expand-action-column" });
+    };
+    this.renderFooterDraggableCell = () => {
+      return this.draggable && index.h("td", { class: "vega-table-draggable-column" });
     };
   }
   render() {
     return (index.h("tr", null,
       index.h("td", { style: { width: this.paddingX[0] } }),
+      this.renderFooterDraggableCell(),
       this.renderFooterSelectionCell(),
       index.h("slot", null),
       this.renderFooterExpandableCell(),
@@ -4946,7 +5757,10 @@ __decorate$i([
 ], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
 __decorate$i([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "expandable", void 0);
+], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableFootRowRenderer.prototype, "draggable", void 0);
 
 var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4964,8 +5778,8 @@ class VegaTableFootRowStateController extends subStateObserverSlimmer.SubStateOb
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -4987,6 +5801,10 @@ class VegaTableFootRowStateController extends subStateObserverSlimmer.SubStateOb
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -5022,7 +5840,10 @@ __decorate$h([
 ], VegaTableFootRowStateController.prototype, "density", void 0);
 __decorate$h([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
-], VegaTableFootRowStateController.prototype, "expandable", void 0);
+], VegaTableFootRowStateController.prototype, "hasExpandableRow", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableFootRowStateController.prototype, "draggable", void 0);
 
 const vegaTableFootRowCss = ":host{display:contents}td{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) td:first-of-type,:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type,:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
 
@@ -5046,9 +5867,9 @@ const VegaTableFootRow = class {
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
     /**
-     * Indicates whether the row is expandable.
+     * Indicates whether the table has a expandable row.
      */
-    this.expandable = false;
+    this.hasExpandableRow = false;
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
@@ -5144,6 +5965,11 @@ const VegaTableHead = class {
       this.tableHeadRef = ref;
     };
   }
+  connectedCallback() {
+    if (this.tableHeadRef && this.fixed) {
+      internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.tableHeadRef, 'base');
+    }
+  }
   disconnectedCallback() {
     internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }
@@ -5486,8 +6312,14 @@ class VegaTableHeadRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         }
       }
     };
+    this.renderHeaderDraggableCell = (renderInput) => {
+      return (this.draggable && (index.h("th", { rowSpan: renderInput.startRowSpan, class: {
+          'vega-table-draggable-column': true,
+          'hidden': renderInput.isStartHidden,
+        } })));
+    };
     this.renderHeaderExpandableCell = (renderInput) => {
-      return (this.expandable && (index.h("th", { rowSpan: renderInput.endRowSpan, class: {
+      return (this.hasExpandableRow && (index.h("th", { rowSpan: renderInput.endRowSpan, class: {
           'vega-table-expand-action-column': true,
           'hidden': renderInput.isEndHidden,
         } })));
@@ -5530,6 +6362,7 @@ class VegaTableHeadRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         }, rowSpan: renderInput.startRowSpan, class: {
           hidden: renderInput.isStartHidden,
         } }),
+      this.renderHeaderDraggableCell(renderInput),
       this.renderHeaderSelectionCell(renderInput),
       index.h("slot", null),
       this.renderHeaderExpandableCell(renderInput),
@@ -5583,7 +6416,10 @@ __decorate$9([
 ], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
 __decorate$9([
   globalSlimmerRegistry.MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "expandable", void 0);
+], VegaTableHeadRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "draggable", void 0);
 __decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);
@@ -5669,8 +6505,8 @@ class VegaTableHeadRowStateController extends subStateObserverSlimmer.SubStateOb
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -5711,6 +6547,10 @@ class VegaTableHeadRowStateController extends subStateObserverSlimmer.SubStateOb
             this.isEmptyTable = currentData.length === 0;
           },
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -5734,7 +6574,7 @@ __decorate$7([
 ], VegaTableHeadRowStateController.prototype, "host", void 0);
 __decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
-], VegaTableHeadRowStateController.prototype, "expandable", void 0);
+], VegaTableHeadRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "selectionType", void 0);
@@ -5753,6 +6593,9 @@ __decorate$7([
 __decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "draggable", void 0);
 
 const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}:host tr.is-group-row th{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host tr.is-group-row th.hidden{display:none}:host tr.is-group-row th.vega-table-selection-column{border-right-width:1px;border-right-style:solid}:host tr.is-group-row th:first-of-type{border-top-left-radius:0px;border-bottom-left-radius:0px}:host tr.is-group-row th:last-of-type{border-top-right-radius:0px;border-bottom-right-radius:0px}:host tr.is-pinned-row th{position:sticky;z-index:1}:host tr.is-pinned-row th:first-of-type{left:0px}:host tr.is-pinned-row th.vega-table-selection-column{left:8px}:host tr.is-pinned-row th.vega-table-expand-action-column{right:8px}:host tr.is-pinned-row th:last-of-type{right:0px}";
 
@@ -5779,9 +6622,9 @@ const VegaTableHeadRow = class {
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(vegaInternalEventId.VegaInternalColumnHeadRowRenderInputRIC);
     this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
     /**
-     * Indicates whether the row is expandable.
+     * Indicates whether the table has an expandable row.
      */
-    this.expandable = false;
+    this.hasExpandableRow = false;
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
@@ -5818,6 +6661,10 @@ __decorate$6([
 ], VegaTableHeadRow.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 VegaTableHeadRow.style = vegaTableHeadRowCss;
 
+const gripDotsVertical = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 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="M32 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm0 160a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM64 416A32 32 0 1 0 0 416a32 32 0 1 0 64 0zm96-288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 128a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM160 448a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>`,
+};
+
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -5827,6 +6674,11 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
 class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.renderDragIcon = () => {
+      return (this.draggable && (index.h("td", { class: "vega-table-draggable-column" },
+        index.h("vega-flex", { alignItems: "center" },
+          index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('grip-dots-vertical'), color: "text-link" })))));
+    };
     this.renderRowSelection = () => {
       if (this.selectionType !== 'multiple')
         return;
@@ -5841,9 +6693,8 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
             } }))));
     };
     this.renderExpandIcon = () => {
-      return (this.expandable && (index.h("td", { class: "vega-table-expand-action-column" },
-        index.h("div", { class: "vega-table-expand-icon-wrapper" },
-          index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
+      return ((this.expandable || this.hasExpandableRow) && (index.h("td", { class: "vega-table-expand-action-column" },
+        index.h("div", { class: "vega-table-expand-icon-wrapper" }, this.expandable && (index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick }))))));
     };
     this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
@@ -5895,6 +6746,7 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         /* eslint-disable-next-line react/jsx-no-bind */
         onClick: this.clickable ? this.onRowClick : null },
         index.h("td", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+        this.renderDragIcon(),
         this.renderRowSelection(),
         index.h("slot", null),
         this.renderExpandIcon(),
@@ -5908,7 +6760,10 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 (() => {
-  internalIconManager.VegaInternalIconManager.register({ 'chevron-down': chevronDown.chevronDown });
+  internalIconManager.VegaInternalIconManager.register({
+    'chevron-down': chevronDown.chevronDown,
+    'grip-dots-vertical': gripDotsVertical,
+  });
 })();
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
@@ -5934,12 +6789,18 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer.prototype, "expandable", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowRenderer.prototype, "hasExpandableRow", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaClick", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer.prototype, "selectionType", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowRenderer.prototype, "draggable", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowSelectionController", void 0);
@@ -6219,7 +7080,15 @@ class VegaTableRowStateController extends subStateObserverSlimmer.SubStateObserv
       subStates: [
         {
           subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          parentStateName: 'expandableRows',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            this.expandable = value.includes(this.rowKey);
+          },
+        },
+        {
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'clickable',
@@ -6258,6 +7127,10 @@ class VegaTableRowStateController extends subStateObserverSlimmer.SubStateObserv
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -6290,6 +7163,9 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "expandable", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "clickable", void 0);
@@ -6305,6 +7181,12 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "density", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "draggable", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowStateController.prototype, "rowKey", void 0);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectionType')
 ], VegaTableRowStateController.prototype, "watchSelectionType", null);
@@ -6312,7 +7194,7 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);
 
-const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}.vega-table-draggable-column{width:16px;min-width:16px;cursor:move}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -6347,6 +7229,14 @@ const VegaTableRow = class {
     this.stripedNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTableRow, 'striped', 'watchStriped');
     this.rowDividerNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTableRow, 'rowDivider', 'watchRowDivider');
     this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    /**
+     * Indicates whether the table has an expandable row.
+     */
+    this.hasExpandableRow = false;
+    /**
+     * Sync from {@link VegaTable.rowDraggable}
+     */
+    this.draggable = false;
   }
   watchSelectionType() {
   }