@heartlandone/vega 2.84.0 → 2.86.0

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -26,7 +26,7 @@ export 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
@@ -34,7 +34,7 @@ export 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
@@ -42,13 +42,22 @@ export 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
@@ -159,6 +168,12 @@ export 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
    */
@@ -169,8 +184,16 @@ export 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
    */
@@ -201,6 +224,52 @@ export 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([
@@ -209,9 +278,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "expandableRows", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "currentData", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
@@ -224,6 +302,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
@@ -242,3 +323,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+__decorate([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableExpandRowController.prototype, "watchCurrentData", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-draggable-controller.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
+import { DraggableElementSlimmer } from '../../../../helpers/slimmers/draggable-element-slimmer';
+/**
+ * The row draggable controller for the vega-table
+ */
+export 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() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.componentDidLoad}
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /**
+   * 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() {
+    methodPlaceholder();
+  }
+  /**
+   * 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([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowDraggableController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchRowDraggable')
+], VegaTableRowDraggableController.prototype, "watchRowDraggable", null);

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

@@ -11,6 +11,20 @@ import { VegaTableSorter } from './vega-table-sorter';
  * The sort controller for the vega-table
  */
 export 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}
    */

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

@@ -12,7 +12,7 @@ export 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;
@@ -24,7 +24,7 @@ export 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}` })))));
@@ -34,6 +34,9 @@ export class VegaTableBodyRenderer extends VegaSlimmer {
   getTableFormRef() {
     return this.tableFormRef;
   }
+  getTableBodyRef() {
+    return this.tableBodyRef;
+  }
   render() {
     const editable = this.columnStructureModel
       .generateColumnConfigByLeaves(this.columns)
@@ -53,9 +56,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
@@ -74,3 +74,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableExpandRowController", void 0);

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

@@ -19,6 +19,7 @@ export 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)
@@ -31,7 +32,7 @@ export 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] } })));
   }
 }
@@ -46,7 +47,10 @@ __decorate([
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
-], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
+], VegaTableColGroupRenderer.prototype, "hasExpandableRow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "rowDraggable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);

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

@@ -71,11 +71,14 @@ export 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];
     }
@@ -134,8 +137,11 @@ export 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');

package/dist/collection/components/vega-table/utils.js

@@ -37,8 +37,9 @@ export 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.
  */
-export const generateColSpan = (columnLength, withMultipleSelection) => {
-  return columnLength + (withMultipleSelection ? 2 : 1);
+export const generateColSpan = (columnLength, withMultipleSelection, withRowDraggable) => {
+  return columnLength + (withMultipleSelection ? 2 : 1) + (withRowDraggable ? 1 : 0);
 };

package/dist/collection/components/vega-table/vega-table-expand-row/slimmers/controllers/vega-table-expand-row-col-span-controller.js

@@ -25,7 +25,7 @@ export 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);
     };
   }
   /**
@@ -46,6 +46,12 @@ export 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
    *
@@ -77,6 +83,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowColSpanController.prototype, "withRowDraggable", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
@@ -86,3 +95,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
+__decorate([
+  MapToComponentMethod('watchWithRowDraggable')
+], VegaTableExpandRowColSpanController.prototype, "watchWithRowDraggable", null);

package/dist/collection/components/vega-table/vega-table-expand-row/slimmers/controllers/vega-table-expand-row-state-controller.js

@@ -29,6 +29,10 @@ export class VegaTableExpandRowStateController extends SubStateObserverSlimmer {
             }
           },
         },
+        {
+          subStateName: 'withRowDraggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -39,6 +43,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowStateController.prototype, "withRowDraggable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.js

@@ -49,6 +49,9 @@ export class VegaTableExpandRow {
   watchWithMultipleSelection() {
     methodPlaceholder();
   }
+  watchWithRowDraggable() {
+    methodPlaceholder();
+  }
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.vegaTableExpandRowRenderer.render()), this.host);
@@ -106,6 +109,7 @@ export class VegaTableExpandRow {
   static get states() { return {
     "currentBreakpoint": {},
     "withMultipleSelection": {},
+    "withRowDraggable": {},
     "expanded": {},
     "checked": {},
     "colSpan": {}
@@ -117,6 +121,9 @@ export class VegaTableExpandRow {
     }, {
       "propName": "withMultipleSelection",
       "methodName": "watchWithMultipleSelection"
+    }, {
+      "propName": "withRowDraggable",
+      "methodName": "watchWithRowDraggable"
     }]; }
 }
 __decorate([

package/dist/collection/components/vega-table/vega-table-foot-row/slimmers/controllers/vega-table-foot-row-state-controller.js

@@ -16,8 +16,8 @@ export class VegaTableFootRowStateController extends SubStateObserverSlimmer {
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -39,6 +39,10 @@ export class VegaTableFootRowStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -74,4 +78,7 @@ __decorate([
 ], VegaTableFootRowStateController.prototype, "density", void 0);
 __decorate([
   MapToComponentField({ writable: true })
-], VegaTableFootRowStateController.prototype, "expandable", void 0);
+], VegaTableFootRowStateController.prototype, "hasExpandableRow", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableFootRowStateController.prototype, "draggable", void 0);

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

@@ -15,12 +15,16 @@ export 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(),
@@ -38,4 +42,7 @@ __decorate([
 ], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
 __decorate([
   MapToComponentField()
-], VegaTableFootRowRenderer.prototype, "expandable", void 0);
+], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableFootRowRenderer.prototype, "draggable", void 0);

package/dist/collection/components/vega-table/vega-table-foot-row/vega-table-foot-row.js

@@ -25,9 +25,9 @@ export class VegaTableFootRow {
     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));
@@ -46,10 +46,11 @@ export class VegaTableFootRow {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "expandable": {},
+    "hasExpandableRow": {},
     "selectionType": {},
     "paddingX": {},
     "columnDivider": {},
+    "draggable": {},
     "density": {}
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/vega-table/vega-table-head/vega-table-head.js

@@ -35,6 +35,11 @@ export class VegaTableHead {
       this.tableHeadRef = ref;
     };
   }
+  connectedCallback() {
+    if (this.tableHeadRef && this.fixed) {
+      InternalVegaZIndexManager.setZIndex(this.tableHeadRef, 'base');
+    }
+  }
   disconnectedCallback() {
     InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }

package/dist/collection/components/vega-table/vega-table-head-row/slimmers/controllers/vega-table-head-row-state-controller.js

@@ -17,8 +17,8 @@ export class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
       parent: 'vega-table',
       subStates: [
         {
-          subStateName: 'expandable',
-          parentStateName: 'rowExpandable',
+          subStateName: 'hasExpandableRow',
+          parentStateName: 'hasExpandableRow',
         },
         {
           subStateName: 'paddingX',
@@ -59,6 +59,10 @@ export class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
             this.isEmptyTable = currentData.length === 0;
           },
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
     /**
@@ -82,7 +86,7 @@ __decorate([
 ], VegaTableHeadRowStateController.prototype, "host", void 0);
 __decorate([
   MapToComponentField({ writable: true })
-], VegaTableHeadRowStateController.prototype, "expandable", void 0);
+], VegaTableHeadRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "selectionType", void 0);
@@ -101,3 +105,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "draggable", void 0);