@heartlandone/vega 2.83.0 → 2.85.0

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);

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

@@ -42,8 +42,14 @@ export 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,
         } })));
@@ -89,6 +95,7 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
         }, rowSpan: renderInput.startRowSpan, class: {
           hidden: renderInput.isStartHidden,
         } }),
+      this.renderHeaderDraggableCell(renderInput),
       this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
       this.renderHeaderExpandableCell(renderInput),
@@ -142,7 +149,10 @@ __decorate([
 ], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
 __decorate([
   MapToComponentField()
-], VegaTableHeadRowRenderer.prototype, "expandable", void 0);
+], VegaTableHeadRowRenderer.prototype, "hasExpandableRow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "draggable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);

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

@@ -33,9 +33,9 @@ export class VegaTableHeadRow {
     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));
@@ -96,7 +96,7 @@ export class VegaTableHeadRow {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "expandable": {},
+    "hasExpandableRow": {},
     "selectionType": {},
     "paddingX": {},
     "checkedAll": {},
@@ -104,7 +104,8 @@ export class VegaTableHeadRow {
     "density": {},
     "isEmptyTable": {},
     "isTemplateRenderMode": {},
-    "renderInput": {}
+    "renderInput": {},
+    "draggable": {}
   }; }
   static get elementRef() { return "host"; }
 }

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

@@ -18,7 +18,15 @@ export 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',
@@ -57,6 +65,10 @@ export class VegaTableRowStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'draggable',
+          parentStateName: 'rowDraggable',
+        },
       ],
     });
   }
@@ -89,6 +101,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "expandable", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "clickable", void 0);
@@ -104,6 +119,12 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "density", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "draggable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowStateController.prototype, "rowKey", void 0);
 __decorate([
   MapToComponentMethod('watchSelectionType')
 ], VegaTableRowStateController.prototype, "watchSelectionType", null);

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

@@ -10,6 +10,7 @@ import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-man
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import chevronDown from '../../../../../global/icons/chevron-down';
+import gripDotsVertical from '../../../../../global/icons/grip-dots-vertical';
 import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalTableRowSelect } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
@@ -17,6 +18,11 @@ import { findParent } from '../../../../../utils/ui';
 export 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;
@@ -31,9 +37,8 @@ export 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();
@@ -85,6 +90,7 @@ export 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(),
@@ -98,7 +104,10 @@ export class VegaTableRowRenderer extends VegaSlimmer {
   }
 }
 (() => {
-  VegaInternalIconManager.register({ 'chevron-down': chevronDown });
+  VegaInternalIconManager.register({
+    'chevron-down': chevronDown,
+    'grip-dots-vertical': gripDotsVertical,
+  });
 })();
 __decorate([
   MapToComponentField()
@@ -124,12 +133,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "expandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaClick", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "selectionType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "draggable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowSelectionController", void 0);

package/dist/collection/components/vega-table/vega-table-row/vega-table-row.css

@@ -142,4 +142,10 @@ tr.expand-row-space {
 .vega-table-selection-column {
   width: 40px;
   min-width: 40px;
+}
+
+.vega-table-draggable-column {
+  width: 16px;
+  min-width: 16px;
+  cursor: move;
 }

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

@@ -41,6 +41,14 @@ export class VegaTableRow {
     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() {
     methodPlaceholder();
@@ -139,6 +147,7 @@ export class VegaTableRow {
   static get states() { return {
     "currentBreakpoint": {},
     "clicked": {},
+    "hasExpandableRow": {},
     "expandable": {},
     "clickable": {},
     "paddingX": {},
@@ -146,7 +155,8 @@ export class VegaTableRow {
     "checked": {},
     "expanded": {},
     "columnDivider": {},
-    "density": {}
+    "density": {},
+    "draggable": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",

package/dist/collection/components/vega-table/vega-table.css

@@ -144,4 +144,9 @@ col.v-hidden {
 
 :host(.is-pinned-table) table {
   min-width: max-content;
+}
+
+.draggable-col {
+  min-width: 16px;
+  width: 16px;
 }