@heartlandone/vega 2.84.0 → 2.86.0

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

@@ -9,8 +9,8 @@ import { O as Observer } from './observer-3959f9dd.js';
 import { f as findParent, a as arrayToClassString, n as extractNumberFromString } from './ui-b7600a48.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-aca0116e.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { S as VegaInternalTableRowExpand, T as VegaInternalTableRowSelect, U as VegaInternalTableRowSelectAll, W as VegaInternalVegaTableRenderInputChange, X as VegaInternalColumnHeadRowRenderInputRIC, Y as VegaInternalColumnHeadCellRenderInputRIC, Z as VegaInternalColumnBodyCellRenderInputRIC, _ as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-194bac82.js';
-import { a as VegaClick, i as VegaChange, U as VegaPageSizeChange, d as VegaExpand, Z as VegaSelectChange, _ as VegaSelectAllChange, $ as VegaRowClick, a0 as VegaRowExpand, a1 as VegaRowSelect, a2 as VegaRowSelectAll } from './vega-event-id-5841d1d3.js';
+import { S as VegaInternalTableRowExpand, T as VegaInternalTableRowSelect, U as VegaInternalTableRowSelectAll, W as VegaInternalVegaTableRenderInputChange, X as VegaInternalColumnHeadRowRenderInputRIC, Y as VegaInternalColumnHeadCellRenderInputRIC, Z as VegaInternalColumnBodyCellRenderInputRIC, _ as VegaInternalTableHeadCellSortEvent } from './vega-internal-event-id-db974a0d.js';
+import { a as VegaClick, i as VegaChange, U as VegaPageSizeChange, d as VegaExpand, Z as VegaSelectChange, _ as VegaSelectAllChange, $ as VegaRowClick, a0 as VegaRowExpand, a1 as VegaRowDragDrop, a2 as VegaRowSelect, a3 as VegaRowSelectAll } from './vega-event-id-a6ccca66.js';
 import { R as ResponsiveFormatFacade } from './responsive-format-facade-456a9f16.js';
 import { i as isNonNullable, p as isBreakpointsTokenType, ao as isVegaTableColumnGroupingModelType } from './type-guard-adc244fd.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
@@ -19,16 +19,17 @@ import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-1f907173.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-f65e2452.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-18711776.js';
-import { I as ImmutableMap } from './immutable-map-612922a2.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-63ecb465.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-75f93d85.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-1c57093d.js';
+import { I as ImmutableMap } from './immutable-map-4fe22b11.js';
 import { T as TranslationSlimmer } from './translation-slimmer-5e2bff5f.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-090c500a.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
+import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-2adbbe00.js';
 import { F as FeatureFlag } from './feature-flag-controller-30f7b625.js';
 import { B as Breakpoints } from './breakpoints-d9faf11c.js';
-import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-524cabd2.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
@@ -40,8 +41,7 @@ import './array-7888f339.js';
 import './typography-396de03f.js';
 import './internal-translation-controller-d7dee4a0.js';
 import './try-get-document-bef0f526.js';
-import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-bed71930.js';
+import './internal-vega-event-manager-7cdf3c28.js';
 import './vega-env-manager-8f8dc473.js';
 import './index-bfc6dfa2.js';
 import './icon-manager-539d7cf7.js';
@@ -157,7 +157,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;
@@ -258,23 +258,23 @@ class VegaTableCellRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "columns", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$S([
+__decorate$U([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
-__decorate$S([
+__decorate$U([
   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;
@@ -292,7 +292,7 @@ class VegaTableExpandRowController extends 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
@@ -300,7 +300,7 @@ class VegaTableExpandRowController extends 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
@@ -308,13 +308,22 @@ class VegaTableExpandRowController extends 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
@@ -425,6 +434,12 @@ class VegaTableExpandRowController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.setExpandableRows();
+  }
   /**
    * Component lifecycle - componentDidLoad
    */
@@ -435,8 +450,16 @@ class VegaTableExpandRowController extends 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
    */
@@ -467,49 +490,110 @@ class VegaTableExpandRowController extends VegaSlimmer {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
       this.host === 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([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$R([
+__decorate$T([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "expandableRows", void 0);
+__decorate$T([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
+__decorate$T([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$R([
+__decorate$T([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "currentData", void 0);
+__decorate$T([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$R([
+__decorate$T([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowController.prototype, "componentWillLoad", null);
+__decorate$T([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$R([
+__decorate$T([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+__decorate$T([
+  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;
@@ -848,68 +932,68 @@ class VegaTableRowSelectionController$1 extends VegaSlimmer {
       this.host === findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$Q([
+__decorate$S([
   MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$Q([
+__decorate$S([
   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;
@@ -1049,41 +1133,41 @@ class VegaTableDataSourceController extends VegaSlimmer {
     }
   }
 }
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$P([
+__decorate$R([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$P([
+__decorate$R([
   MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$P([
+__decorate$R([
   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;
@@ -1094,7 +1178,7 @@ class VegaTableBodyRenderer extends VegaSlimmer {
     super(...arguments);
     this.renderTableBody = (editable) => {
       const currentData = this.vegaTableDataSourceController.getCurrentData();
-      return (h("vega-table-body", null, currentData.map((record, index) => {
+      return (h("vega-table-body", { ref: (ref) => (this.tableBodyRef = ref) }, currentData.map((record, index) => {
         const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
         const isVisibleInCurrentPage = this.vegaTablePaginationController.isRowVisible(index);
         const isLastRow = index === currentData.length - 1;
@@ -1106,7 +1190,7 @@ class VegaTableBodyRenderer extends VegaSlimmer {
             isVisibleInCurrentPage,
             isLastRow: isLastRow,
           }, editable),
-          this.rowExpandable && (h("vega-table-expand-row", { class: {
+          this.vegaTableExpandRowController.isExpandableRow(record) && (h("vega-table-expand-row", { class: {
               'v-hidden': !isVisibleInCurrentPage,
             }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index % 2 === 1 },
             h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
@@ -1116,6 +1200,9 @@ class VegaTableBodyRenderer extends VegaSlimmer {
   getTableFormRef() {
     return this.tableFormRef;
   }
+  getTableBodyRef() {
+    return this.tableBodyRef;
+  }
   render() {
     const editable = this.columnStructureModel
       .generateColumnConfigByLeaves(this.columns)
@@ -1123,41 +1210,41 @@ class VegaTableBodyRenderer extends VegaSlimmer {
     return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$O([
-  MapToComponentField()
-], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
-__decorate$O([
+__decorate$Q([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
+__decorate$Q([
+  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;
@@ -1220,32 +1307,32 @@ class VegaTableHeaderRenderer extends VegaSlimmer {
     return this.showHeader && h("vega-table-head", null, this.renderHeaderRows());
   }
 }
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$N([
+__decorate$P([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$N([
+__decorate$P([
   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;
@@ -1311,19 +1398,19 @@ class VegaTablePaginationRenderer extends VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$M([
+__decorate$O([
   MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
@@ -1350,7 +1437,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;
@@ -1383,20 +1470,20 @@ class VegaTableScrollContainerRenderer extends VegaSlimmer {
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$L([
+__decorate$N([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$L([
+__decorate$N([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "host", void 0);
-__decorate$L([
+__decorate$N([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$L([
+__decorate$N([
   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;
@@ -1441,65 +1528,65 @@ class VegaTableRenderer extends VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnStructureModel", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "translationSlimmer", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$K([
+__decorate$M([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$K([
+__decorate$M([
   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;
@@ -1563,23 +1650,23 @@ class VegaTablePaginationController extends VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$J([
+__decorate$L([
   MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$J([
+__decorate$L([
   MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$J([
+__decorate$L([
   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;
@@ -1808,55 +1895,55 @@ class VegaTableEditableController extends VegaSlimmer {
   }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "columns", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$I([
+__decorate$K([
   MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
@@ -1902,7 +1989,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;
@@ -1912,6 +1999,20 @@ var __decorate$H = (undefined && undefined.__decorate) || function (decorators,
  * The sort controller for the vega-table
  */
 class VegaTableSortController extends 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}
    */
@@ -1972,26 +2073,26 @@ class VegaTableSortController extends VegaSlimmer {
     });
   }
 }
-__decorate$H([
+__decorate$J([
   MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$H([
+__decorate$J([
   MapToComponentField()
 ], VegaTableSortController.prototype, "sortConfig", void 0);
-__decorate$H([
+__decorate$J([
   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;
@@ -2009,6 +2110,7 @@ class VegaTableColGroupRenderer extends VegaSlimmer {
   render() {
     return (h("colgroup", null,
       h("col", { style: { minWidth: this.paddingX[0], width: this.paddingX[0] } }),
+      this.rowDraggable && h("col", { class: "draggable-col" }),
       this.vegaTableRowSelectionController.getRowSelectionType() === 'multiple' && (h("col", { style: { minWidth: '40px', width: '40px' } })),
       this.columnStructureModel
         .generateColumnConfigByLeaves(this.columns)
@@ -2021,27 +2123,30 @@ class VegaTableColGroupRenderer extends VegaSlimmer {
           return h("col", null);
         }
       }),
-      this.rowExpandable && h("col", { style: { minWidth: '40px', width: '40px' } }),
+      this.hasExpandableRow && h("col", { style: { minWidth: '40px', width: '40px' } }),
       h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$G([
+__decorate$I([
   MapToComponentField()
-], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
-__decorate$G([
+], VegaTableColGroupRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$I([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "rowDraggable", void 0);
+__decorate$I([
   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;
@@ -2226,68 +2331,68 @@ class VegaTableChildrenController extends VegaSlimmer {
     }
   }
 }
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowDivider", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$F([
+__decorate$H([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$F([
+__decorate$H([
   InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('watchCurrentData')
 ], VegaTableChildrenController.prototype, "watchCurrentData", null);
-__decorate$F([
+__decorate$H([
   MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
-__decorate$F([
+__decorate$H([
   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;
@@ -2317,26 +2422,26 @@ class VegaTableRowRenderer$1 extends VegaSlimmer {
     return editable ? (h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
-__decorate$E([
+__decorate$G([
   MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowDivider", void 0);
-__decorate$E([
+__decorate$G([
   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;
@@ -2392,25 +2497,25 @@ class VegaTableRenderModeController extends VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$D([
+__decorate$F([
   MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$D([
+__decorate$F([
   InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$D([
+__decorate$F([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
@@ -2679,7 +2784,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;
@@ -2722,25 +2827,25 @@ class VegaTableColumnStructureModelController extends VegaSlimmer {
     this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
   }
 }
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "columns", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentField({ writable: true })
 ], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('watchColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
-__decorate$C([
+__decorate$E([
   MapToComponentMethod('watchGroupColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
 
@@ -2961,7 +3066,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;
@@ -3124,32 +3229,32 @@ class VegaTableRenderInputController extends VegaSlimmer {
     this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
   }
 }
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "host", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderInputController.prototype, "componentWillLoad", null);
-__decorate$B([
+__decorate$D([
   MapToComponentMethod('componentDidRender')
 ], VegaTableRenderInputController.prototype, "componentDidRender", null);
-__decorate$B([
+__decorate$D([
   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;
@@ -3216,11 +3321,14 @@ class VegaTablePinnedRenderer extends 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];
     }
@@ -3279,8 +3387,11 @@ class VegaTablePinnedRenderer extends 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');
@@ -3288,65 +3399,699 @@ class VegaTablePinnedRenderer extends 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([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate$C([
+  InjectVegaSlimmer()
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$C([
+  MapToComponentMethod('componentDidLoad')
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate$C([
+  MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+__decorate$C([
+  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 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.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.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([
+  MapToComponentMethod('connectedCallback')
+], DraggableElementSlimmer.prototype, "connectedCallback", null);
+__decorate$B([
+  MapToComponentMethod('disconnectedCallback')
+], DraggableElementSlimmer.prototype, "disconnectedCallback", null);
+__decorate$B([
+  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 VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.draggableElementSlimmer = 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([
   MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "host", void 0);
+], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
 __decorate$A([
   MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+], VegaTableRowDraggableController.prototype, "host", void 0);
 __decorate$A([
   MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
 __decorate$A([
   MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
 __decorate$A([
   InjectVegaSlimmer()
-], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
 __decorate$A([
-  MapToComponentMethod('componentDidLoad')
-], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowDraggableController.prototype, "connectedCallback", null);
 __decorate$A([
-  MapToComponentMethod('componentDidRender')
-], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
 __decorate$A([
-  MapToComponentMethod('watchColumnStructureModel')
-], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
+__decorate$A([
+  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;
@@ -3375,6 +4120,8 @@ const VegaTable = class {
     this.rowSelect = createEvent(this, "rowSelect", 7);
     this.vegaRowSelectAll = createEvent(this, "vegaRowSelectAll", 7);
     this.rowSelectAll = createEvent(this, "rowSelectAll", 7);
+    this.vegaRowDragDrop = createEvent(this, "vegaRowDragDrop", 7);
+    this.rowDragDrop = createEvent(this, "rowDragDrop", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
@@ -3388,7 +4135,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();
@@ -3396,13 +4142,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();
     this.rowSelectionNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
-    this.rowExpandableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
+    this.expandableRowsNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'expandableRows', 'watchExpandableRows');
+    this.hasExpandableRowNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'hasExpandableRow', 'watchHasExpandableRow');
     this.paddingXNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
     this.rowClickableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
     this.scrollConfigNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
@@ -3412,11 +4165,13 @@ const VegaTable = class {
     this.selectAllChangeEventEmitter = createEventEmitSlimmer(VegaTable, VegaSelectAllChange);
     this.rowClickEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowClick);
     this.rowExpandEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowExpand);
+    this.rowDragDropEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowDragDrop);
     this.rowDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
     this.columnDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
     this.densityNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
     this.isTemplateRenderModeNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
     this.currentDataNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
+    this.rowDraggableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowDraggable', 'watchRowDraggable');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTableRuntimeMetricsPayloadDefinition);
     this.rowSelectEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowSelect);
     this.rowSelectAllEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowSelectAll);
@@ -3443,6 +4198,8 @@ const VegaTable = class {
       this.editingRows = newSet;
     });
     this.isSelectedAll = false;
+    this.expandableRows = [];
+    this.hasExpandableRow = false;
     /**
      * Defines the columns of the table.
      *
@@ -3486,6 +4243,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.
@@ -3567,6 +4330,10 @@ const VegaTable = class {
   }
   watchColumnStructureModel() {
   }
+  watchExpandableRows() {
+  }
+  watchHasExpandableRow() {
+  }
   watchColumns() {
   }
   watchGroupColumns() {
@@ -3579,6 +4346,8 @@ const VegaTable = class {
   }
   watchRowClickable() {
   }
+  watchRowDraggable() {
+  }
   watchRowDivider() {
   }
   watchColumnDivider() {
@@ -3802,12 +4571,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"],
@@ -3856,9 +4628,6 @@ __decorate$z([
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$z([
-  InjectVegaSlimmer()
-], VegaTable.prototype, "vegaTableExpandRowController", void 0);
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
@@ -3880,6 +4649,12 @@ __decorate$z([
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
+__decorate$z([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowDraggableController", void 0);
+__decorate$z([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableExpandRowController", void 0);
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
@@ -3888,7 +4663,10 @@ __decorate$z([
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
 __decorate$z([
   InjectVegaSlimmer()
-], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
+], VegaTable.prototype, "expandableRowsNotifySlimmer", void 0);
+__decorate$z([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "hasExpandableRowNotifySlimmer", void 0);
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
@@ -3916,6 +4694,9 @@ __decorate$z([
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandEventEmitter", void 0);
+__decorate$z([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowDragDropEventEmitter", void 0);
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
@@ -3931,6 +4712,9 @@ __decorate$z([
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
+__decorate$z([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowDraggableNotifySlimmer", void 0);
 __decorate$z([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
@@ -4015,10 +4799,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) {
@@ -4496,6 +5281,10 @@ class VegaTableExpandRowStateController extends SubStateObserverSlimmer {
             }
           },
         },
+        {
+          subStateName: 'withRowDraggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -4506,6 +5295,9 @@ __decorate$q([
 __decorate$q([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
+__decorate$q([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowStateController.prototype, "withRowDraggable", void 0);
 __decorate$q([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
@@ -4532,7 +5324,7 @@ class VegaTableExpandRowColSpanController extends VegaSlimmer {
      * Update state colSpan
      */
     this.updateColSpan = () => {
-      this.colSpan = generateColSpan(this.getVisibleColumnsNumber(), this.withMultipleSelection);
+      this.colSpan = generateColSpan(this.getVisibleColumnsNumber(), this.withMultipleSelection, this.withRowDraggable);
     };
   }
   /**
@@ -4553,6 +5345,12 @@ class VegaTableExpandRowColSpanController extends VegaSlimmer {
   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
    *
@@ -4584,6 +5382,9 @@ __decorate$p([
 __decorate$p([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaTableExpandRowColSpanController.prototype, "withRowDraggable", void 0);
 __decorate$p([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
@@ -4593,6 +5394,9 @@ __decorate$p([
 __decorate$p([
   MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
+__decorate$p([
+  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}";
 
@@ -4636,6 +5440,8 @@ const VegaTableExpandRow = class {
   }
   watchWithMultipleSelection() {
   }
+  watchWithRowDraggable() {
+  }
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.vegaTableExpandRowRenderer.render()), this.host);
@@ -4643,7 +5449,8 @@ const VegaTableExpandRow = class {
   get host() { return getElement(this); }
   static get watchers() { return {
     "currentBreakpoint": ["watchCurrentBreakpoint"],
-    "withMultipleSelection": ["watchWithMultipleSelection"]
+    "withMultipleSelection": ["watchWithMultipleSelection"],
+    "withRowDraggable": ["watchWithRowDraggable"]
   }; }
 };
 __decorate$o([
@@ -4919,12 +5726,16 @@ class VegaTableFootRowRenderer extends VegaSlimmer {
       return h("td", { class: "vega-table-selection-column" });
     };
     this.renderFooterExpandableCell = () => {
-      return this.expandable && h("td", { class: "vega-table-expand-action-column" });
+      return this.hasExpandableRow && h("td", { class: "vega-table-expand-action-column" });
+    };
+    this.renderFooterDraggableCell = () => {
+      return this.draggable && h("td", { class: "vega-table-draggable-column" });
     };
   }
   render() {
     return (h("tr", null,
       h("td", { style: { width: this.paddingX[0] } }),
+      this.renderFooterDraggableCell(),
       this.renderFooterSelectionCell(),
       h("slot", null),
       this.renderFooterExpandableCell(),
@@ -4942,7 +5753,10 @@ __decorate$i([
 ], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
 __decorate$i([
   MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "expandable", void 0);
+], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$i([
+  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;
@@ -4960,8 +5774,8 @@ class VegaTableFootRowStateController extends SubStateObserverSlimmer {
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -4983,6 +5797,10 @@ class VegaTableFootRowStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -5018,7 +5836,10 @@ __decorate$h([
 ], VegaTableFootRowStateController.prototype, "density", void 0);
 __decorate$h([
   MapToComponentField({ writable: true })
-], VegaTableFootRowStateController.prototype, "expandable", void 0);
+], VegaTableFootRowStateController.prototype, "hasExpandableRow", void 0);
+__decorate$h([
+  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}";
 
@@ -5042,9 +5863,9 @@ const VegaTableFootRow = class {
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
-     * Indicates whether the row is expandable.
+     * Indicates whether the table has a expandable row.
      */
-    this.expandable = false;
+    this.hasExpandableRow = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
@@ -5140,6 +5961,11 @@ const VegaTableHead = class {
       this.tableHeadRef = ref;
     };
   }
+  connectedCallback() {
+    if (this.tableHeadRef && this.fixed) {
+      InternalVegaZIndexManager.setZIndex(this.tableHeadRef, 'base');
+    }
+  }
   disconnectedCallback() {
     InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }
@@ -5482,8 +6308,14 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
         }
       }
     };
+    this.renderHeaderDraggableCell = (renderInput) => {
+      return (this.draggable && (h("th", { rowSpan: renderInput.startRowSpan, class: {
+          'vega-table-draggable-column': true,
+          'hidden': renderInput.isStartHidden,
+        } })));
+    };
     this.renderHeaderExpandableCell = (renderInput) => {
-      return (this.expandable && (h("th", { rowSpan: renderInput.endRowSpan, class: {
+      return (this.hasExpandableRow && (h("th", { rowSpan: renderInput.endRowSpan, class: {
           'vega-table-expand-action-column': true,
           'hidden': renderInput.isEndHidden,
         } })));
@@ -5526,6 +6358,7 @@ class VegaTableHeadRowRenderer extends VegaSlimmer {
         }, rowSpan: renderInput.startRowSpan, class: {
           hidden: renderInput.isStartHidden,
         } }),
+      this.renderHeaderDraggableCell(renderInput),
       this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
       this.renderHeaderExpandableCell(renderInput),
@@ -5579,7 +6412,10 @@ __decorate$9([
 ], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
 __decorate$9([
   MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "expandable", void 0);
+], VegaTableHeadRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "draggable", void 0);
 __decorate$9([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);
@@ -5665,8 +6501,8 @@ class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -5707,6 +6543,10 @@ class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
             this.isEmptyTable = currentData.length === 0;
           },
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -5730,7 +6570,7 @@ __decorate$7([
 ], VegaTableHeadRowStateController.prototype, "host", void 0);
 __decorate$7([
   MapToComponentField({ writable: true })
-], VegaTableHeadRowStateController.prototype, "expandable", void 0);
+], VegaTableHeadRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate$7([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "selectionType", void 0);
@@ -5749,6 +6589,9 @@ __decorate$7([
 __decorate$7([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "draggable", void 0);
 
 const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}:host tr.is-group-row th{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host tr.is-group-row th.hidden{display:none}:host tr.is-group-row th.vega-table-selection-column{border-right-width:1px;border-right-style:solid}:host tr.is-group-row th:first-of-type{border-top-left-radius:0px;border-bottom-left-radius:0px}:host tr.is-group-row th:last-of-type{border-top-right-radius:0px;border-bottom-right-radius:0px}:host tr.is-pinned-row th{position:sticky;z-index:1}:host tr.is-pinned-row th:first-of-type{left:0px}:host tr.is-pinned-row th.vega-table-selection-column{left:8px}:host tr.is-pinned-row th.vega-table-expand-action-column{right:8px}:host tr.is-pinned-row th:last-of-type{right:0px}";
 
@@ -5775,9 +6618,9 @@ const VegaTableHeadRow = class {
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnHeadRowRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
-     * Indicates whether the row is expandable.
+     * Indicates whether the table has an expandable row.
      */
-    this.expandable = false;
+    this.hasExpandableRow = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
@@ -5814,6 +6657,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);
@@ -5823,6 +6670,11 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
 class VegaTableRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.renderDragIcon = () => {
+      return (this.draggable && (h("td", { class: "vega-table-draggable-column" },
+        h("vega-flex", { alignItems: "center" },
+          h("vega-icon", { icon: VegaInternalIconManager.getIconKey('grip-dots-vertical'), color: "text-link" })))));
+    };
     this.renderRowSelection = () => {
       if (this.selectionType !== 'multiple')
         return;
@@ -5837,9 +6689,8 @@ class VegaTableRowRenderer extends VegaSlimmer {
             } }))));
     };
     this.renderExpandIcon = () => {
-      return (this.expandable && (h("td", { class: "vega-table-expand-action-column" },
-        h("div", { class: "vega-table-expand-icon-wrapper" },
-          h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
+      return ((this.expandable || this.hasExpandableRow) && (h("td", { class: "vega-table-expand-action-column" },
+        h("div", { class: "vega-table-expand-icon-wrapper" }, this.expandable && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick }))))));
     };
     this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
@@ -5891,6 +6742,7 @@ class VegaTableRowRenderer extends VegaSlimmer {
         /* eslint-disable-next-line react/jsx-no-bind */
         onClick: this.clickable ? this.onRowClick : null },
         h("td", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+        this.renderDragIcon(),
         this.renderRowSelection(),
         h("slot", null),
         this.renderExpandIcon(),
@@ -5904,7 +6756,10 @@ class VegaTableRowRenderer extends VegaSlimmer {
   }
 }
 (() => {
-  VegaInternalIconManager.register({ 'chevron-down': chevronDown });
+  VegaInternalIconManager.register({
+    'chevron-down': chevronDown,
+    'grip-dots-vertical': gripDotsVertical,
+  });
 })();
 __decorate$5([
   MapToComponentField()
@@ -5930,12 +6785,18 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "expandable", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "hasExpandableRow", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaClick", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "selectionType", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "draggable", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowSelectionController", void 0);
@@ -6215,7 +7076,15 @@ class VegaTableRowStateController extends SubStateObserverSlimmer {
       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',
@@ -6254,6 +7123,10 @@ class VegaTableRowStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -6286,6 +7159,9 @@ __decorate$1([
 __decorate$1([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "expandable", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate$1([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "clickable", void 0);
@@ -6301,6 +7177,12 @@ __decorate$1([
 __decorate$1([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "density", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "draggable", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTableRowStateController.prototype, "rowKey", void 0);
 __decorate$1([
   MapToComponentMethod('watchSelectionType')
 ], VegaTableRowStateController.prototype, "watchSelectionType", null);
@@ -6308,7 +7190,7 @@ __decorate$1([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);
 
-const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+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;
@@ -6343,6 +7225,14 @@ const VegaTableRow = class {
     this.stripedNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'striped', 'watchStriped');
     this.rowDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'rowDivider', 'watchRowDivider');
     this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Indicates whether the table has an expandable row.
+     */
+    this.hasExpandableRow = false;
+    /**
+     * Sync from {@link VegaTable.rowDraggable}
+     */
+    this.draggable = false;
   }
   watchSelectionType() {
   }