@uzum-tech/ui 2.0.4 → 2.0.6

package/es/data-table/src/TableParts/BodyRow.mjs

@@ -0,0 +1,257 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { pxfy, repeat } from 'seemly';
+import { h } from 'vue';
+import { DragHandleRound } from "../../../_internal/icons/index.mjs";
+import { resolveSlot } from "../../../_utils/index.mjs";
+import { createRowClassName, getColKey, isColumnSorting } from "../utils/index.mjs";
+import RenderSafeCheckbox from "./BodyCheckbox.mjs";
+import RenderSafeRadio from "./BodyRadio.mjs";
+import Cell from "./Cell.mjs";
+import ExpandTrigger from "./ExpandTrigger.mjs";
+function renderExpandedRow(context, rowInfo, displayedRowIndex) {
+  const {
+    mergedClsPrefix,
+    colCount,
+    rowCount,
+    stickyExpandedRows,
+    bodyWidthPx,
+    renderExpand
+  } = context;
+  const {
+    index: actualRowIndex
+  } = rowInfo;
+  const {
+    tmNode: {
+      key,
+      rawNode
+    }
+  } = rowInfo;
+  return h("tr", {
+    class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
+    key: `${key}__expand`
+  }, h("td", {
+    class: [`${mergedClsPrefix}-data-table-td`, `${mergedClsPrefix}-data-table-td--last-col`, displayedRowIndex + 1 === rowCount && `${mergedClsPrefix}-data-table-td--last-row`],
+    colspan: colCount
+  }, stickyExpandedRows ? h("div", {
+    class: `${mergedClsPrefix}-data-table-expand`,
+    style: {
+      width: bodyWidthPx
+    }
+  }, renderExpand(rawNode, actualRowIndex)) : renderExpand(rawNode, actualRowIndex)));
+}
+export function renderBodyRow(context, rowInfo, displayedRowIndex, isVirtual) {
+  if ('isExpandedRow' in rowInfo) {
+    return renderExpandedRow(context, rowInfo, displayedRowIndex);
+  }
+  const {
+    mergedClsPrefix,
+    cols,
+    colCount,
+    rowCount,
+    hasChildren,
+    childTriggerColIndex,
+    indentStyle,
+    rowClassName,
+    rowProps,
+    mergedSortState,
+    mergedExpandedRowKeySet,
+    fixedColumnLeftMap,
+    fixedColumnRightMap,
+    currentPage,
+    loadingKeySet,
+    renderExpandIcon,
+    renderCell,
+    defaultEmptyValue,
+    mergedTheme,
+    rowIndexToKey,
+    cordToPass,
+    cordKey,
+    draggableColumn,
+    droppingRowKey,
+    droppingPosition,
+    draggingRowKeySet,
+    hoverKey,
+    dataTableSlots,
+    setHoverKey,
+    handleCheckboxUpdateChecked,
+    handleRadioUpdateChecked,
+    handleUpdateExpanded,
+    handleRowDragStart,
+    handleRowDragOver,
+    handleRowDragLeave,
+    handleRowDragEnd,
+    handleRowDrop,
+    emitEdit
+  } = context;
+  const {
+    index: actualRowIndex
+  } = rowInfo;
+  const isSummary = 'isSummaryRow' in rowInfo;
+  const striped = !isSummary && rowInfo.striped;
+  const {
+    tmNode,
+    key: rowKey
+  } = rowInfo;
+  const {
+    rawNode: rowData
+  } = tmNode;
+  const expanded = mergedExpandedRowKeySet.has(rowKey);
+  const props = rowProps ? rowProps(rowData, actualRowIndex) : undefined;
+  const mergedRowClassName = typeof rowClassName === 'string' ? rowClassName : createRowClassName(rowData, actualRowIndex, rowClassName);
+  const _a = props || {},
+    {
+      class: _class
+    } = _a,
+    restProps = __rest(_a, ["class"]);
+  const isRowDraggable = !isSummary && !!draggableColumn && (typeof draggableColumn.draggable === 'function' ? draggableColumn.draggable(rowData) : true);
+  const isDropTarget = !!draggableColumn && droppingRowKey === rowKey;
+  const dropPosition = isDropTarget ? droppingPosition : null;
+  const isBeingDragged = !!draggableColumn && draggingRowKeySet.has(rowKey);
+  const row = h("tr", Object.assign({
+    onMouseenter: () => {
+      setHoverKey(rowKey);
+    },
+    key: rowKey,
+    "data-row-key": String(rowKey),
+    onDragover: draggableColumn && !isSummary ? event => handleRowDragOver(event, rowKey) : undefined,
+    onDragleave: draggableColumn && !isSummary ? event => handleRowDragLeave(event, rowKey) : undefined,
+    onDrop: draggableColumn && !isSummary ? event => handleRowDrop(event, rowKey) : undefined,
+    class: [`${mergedClsPrefix}-data-table-tr`, rowInfo.tmNode.disabled && `${mergedClsPrefix}-data-table-tr--disabled`, isSummary && `${mergedClsPrefix}-data-table-tr--summary`, striped && `${mergedClsPrefix}-data-table-tr--striped`, expanded && `${mergedClsPrefix}-data-table-tr--expanded`, isBeingDragged && `${mergedClsPrefix}-data-table-tr--dragging`, isDropTarget && dropPosition === 'before' && `${mergedClsPrefix}-data-table-tr--drop-before`, isDropTarget && dropPosition === 'after' && `${mergedClsPrefix}-data-table-tr--drop-after`, mergedRowClassName, _class]
+  }, restProps), cols.map((col, colIndex) => {
+    var _a, _b, _c, _d, _e;
+    if (displayedRowIndex in cordToPass) {
+      const cordOfRowToPass = cordToPass[displayedRowIndex];
+      const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
+      if (~indexInCordOfRowToPass) {
+        cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
+        return null;
+      }
+    }
+    // TODO: Simplify row calculation
+    const {
+      column
+    } = col;
+    const colKey = getColKey(col);
+    const {
+      rowSpan,
+      colSpan
+    } = column;
+    const mergedColSpan = isSummary ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
+    : colSpan ? colSpan(rowData, actualRowIndex) : 1;
+    const mergedRowSpan = isSummary ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
+    : rowSpan ? rowSpan(rowData, actualRowIndex) : 1;
+    const isLastCol = colIndex + mergedColSpan === colCount;
+    const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
+    const isCrossRowTd = mergedRowSpan > 1;
+    if (isCrossRowTd) {
+      cordKey[displayedRowIndex] = {
+        [colIndex]: []
+      };
+    }
+    if (mergedColSpan > 1 || isCrossRowTd) {
+      for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
+        if (isCrossRowTd) {
+          cordKey[displayedRowIndex][colIndex].push(rowIndexToKey[i]);
+        }
+        for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
+          if (i === displayedRowIndex && j === colIndex) {
+            continue;
+          }
+          if (!(i in cordToPass)) {
+            cordToPass[i] = [j];
+          } else {
+            cordToPass[i].push(j);
+          }
+        }
+      }
+    }
+    const cellHoverKey = isCrossRowTd ? hoverKey : null;
+    const {
+      cellProps
+    } = column;
+    const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
+    const indentOffsetStyle = {
+      '--indent-offset': ''
+    };
+    const isDraggableHandleCell = column.type === 'draggable' && !isSummary && isRowDraggable;
+    return h("td", Object.assign({}, resolvedCellProps, {
+      key: colKey,
+      draggable: isDraggableHandleCell || undefined,
+      onDragstart: isDraggableHandleCell ? event => handleRowDragStart(event, rowKey) : undefined,
+      onDragend: isDraggableHandleCell ? () => handleRowDragEnd() : undefined,
+      style: [{
+        textAlign: column.align || undefined,
+        left: pxfy((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
+        right: pxfy((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
+      }, indentOffsetStyle, (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''],
+      colspan: mergedColSpan,
+      rowspan: isVirtual ? undefined : mergedRowSpan,
+      "data-col-key": colKey,
+      class: [`${mergedClsPrefix}-data-table-td`, column.className, resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class, isSummary && `${mergedClsPrefix}-data-table-td--summary`, (cellHoverKey !== null && cordKey[displayedRowIndex][colIndex].includes(cellHoverKey) || isColumnSorting(column, mergedSortState)) && `${mergedClsPrefix}-data-table-td--hover`, column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`, column.align && `${mergedClsPrefix}-data-table-td--${column.align}-align`, column.type === 'selection' && `${mergedClsPrefix}-data-table-td--selection`, column.type === 'expand' && `${mergedClsPrefix}-data-table-td--expand`, column.type === 'draggable' && `${mergedClsPrefix}-data-table-td--draggable`, isLastCol && `${mergedClsPrefix}-data-table-td--last-col`, isLastRow && `${mergedClsPrefix}-data-table-td--last-row`, 'editable' in column && (typeof column.editable === 'function' ? column.editable(rowData) : column.editable) && !isSummary && `${mergedClsPrefix}-data-table-td--editable`]
+    }), column.fixed && h("div", {
+      class: `${mergedClsPrefix}-data-table-td__shadow-holder`
+    }), hasChildren && colIndex === childTriggerColIndex ? [repeat(indentOffsetStyle['--indent-offset'] = isSummary ? 0 : rowInfo.tmNode.level, h("div", {
+      class: `${mergedClsPrefix}-data-table-indent`,
+      style: indentStyle
+    })), isSummary || rowInfo.tmNode.isLeaf ? h("div", {
+      class: `${mergedClsPrefix}-data-table-expand-placeholder`
+    }) : h(ExpandTrigger, {
+      class: `${mergedClsPrefix}-data-table-expand-trigger`,
+      clsPrefix: mergedClsPrefix,
+      expanded: expanded,
+      renderExpandIcon: renderExpandIcon,
+      loading: loadingKeySet.has(rowInfo.key),
+      onClick: () => {
+        handleUpdateExpanded(rowKey, rowInfo.tmNode);
+      }
+    })] : null, column.type === 'selection' ? !isSummary ? column.multiple === false ? h(RenderSafeRadio, {
+      key: currentPage,
+      rowKey: rowKey,
+      disabled: rowInfo.tmNode.disabled,
+      onClick: event => {
+        event.stopPropagation();
+      },
+      onUpdateChecked: () => {
+        handleRadioUpdateChecked(rowInfo.tmNode);
+      }
+    }) : h(RenderSafeCheckbox, {
+      key: currentPage,
+      rowKey: rowKey,
+      disabled: rowInfo.tmNode.disabled,
+      onUpdateChecked: (checked, event) => {
+        event.stopPropagation();
+        handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
+      }
+    }) : null : column.type === 'expand' ? !isSummary ? !column.expandable || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? h(ExpandTrigger, {
+      clsPrefix: mergedClsPrefix,
+      expanded: expanded,
+      renderExpandIcon: renderExpandIcon,
+      onClick: () => {
+        handleUpdateExpanded(rowKey, null);
+      }
+    }) : null : null : column.type === 'draggable' ? isDraggableHandleCell ? h("span", {
+      class: `${mergedClsPrefix}-data-table-td__drag-handle`,
+      "aria-label": "Drag to reorder"
+    }, resolveSlot(dataTableSlots['drag-handle'], () => [h(DragHandleRound, null)])) : null : h(Cell, {
+      clsPrefix: mergedClsPrefix,
+      index: actualRowIndex,
+      row: rowData,
+      column: column,
+      isSummary: isSummary,
+      mergedTheme: mergedTheme,
+      renderCell: renderCell,
+      defaultEmptyValue: defaultEmptyValue,
+      onEdit: (value, row, key) => {
+        emitEdit(value, row, key);
+      }
+    }));
+  }));
+  return row;
+}

package/es/data-table/src/TableParts/BodySkeleton.mjs

@@ -1,6 +1,9 @@
 import { computed, defineComponent, h, inject } from 'vue';
 import { USkeleton } from "../../../skeleton/index.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
+const ICON_COLUMN_SKELETON_WIDTH = '16px';
+const DEFAULT_COLUMN_SKELETON_WIDTH = '85%';
+const SKELETON_BORDER_RADIUS = '16px';
 export default defineComponent({
   name: 'DataTableBodySkeleton',
   props: {
@@ -49,10 +52,10 @@ export default defineComponent({
       class: `${mergedClsPrefix}-data-table-td__shadow-holder`
     }), h(USkeleton, {
       height: "var(--u-line-height)",
-      width: col.column.type === 'selection' ? '16px' : '85%',
+      width: col.column.type === 'selection' || col.column.type === 'draggable' ? ICON_COLUMN_SKELETON_WIDTH : DEFAULT_COLUMN_SKELETON_WIDTH,
       animated: true,
       style: {
-        borderRadius: '16px'
+        borderRadius: SKELETON_BORDER_RADIUS
       }
     })))));
     return h("tbody", {

package/es/data-table/src/TableParts/Header.d.ts

@@ -73,6 +73,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -1467,6 +1470,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;

package/es/data-table/src/TableParts/Header.mjs

@@ -10,6 +10,7 @@ import { dataTableInjectionKey } from "../interface.mjs";
 import { clampValueFollowCSSRules, createNextSorter, getColKey, getNumberColWidth, isColumnEllipsisEnabled, isColumnFilterable, isColumnResizable, isColumnSortable, isColumnSorting, resolveColumnWidthConstraint } from "../utils/index.mjs";
 import SelectionMenu from "./SelectionMenu.mjs";
 function renderTitle(column) {
+  if (column.type === 'draggable') return null;
   return typeof column.title === 'function' ? column.title(column) : column.title;
 }
 export default defineComponent({
@@ -201,6 +202,9 @@ export default defineComponent({
         } = column;
         const ellipsisEnabled = isColumnEllipsisEnabled(column);
         const createColumnVNode = () => {
+          if (column.type === 'draggable') {
+            return null;
+          }
           if (column.type === 'selection') {
             return column.multiple !== false ? h(Fragment, null, h(UCheckbox, {
               key: currentPage,
@@ -261,7 +265,7 @@ export default defineComponent({
             [`${mergedClsPrefix}-data-table-th--selection`]: column.type === 'selection',
             [`${mergedClsPrefix}-data-table-th--last`]: isLast
           }, column.className],
-          onClick: column.type !== 'selection' && column.type !== 'expand' && !('children' in column) ? e => {
+          onClick: column.type !== 'selection' && column.type !== 'expand' && column.type !== 'draggable' && !('children' in column) ? e => {
             handleColHeaderClick(e, column);
           } : undefined
         }, (leftFixed || rightFixed) && h("div", {

package/es/data-table/src/TableParts/VirtualListItemWrapper.d.ts

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { ColItem } from '../use-group-header';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    cols: {
+        type: PropType<ColItem[]>;
+        required: true;
+    };
+    tableWidth: StringConstructor;
+    onMouseenter: PropType<(e: MouseEvent) => void>;
+    onMouseleave: PropType<(e: MouseEvent) => void>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    cols: {
+        type: PropType<ColItem[]>;
+        required: true;
+    };
+    tableWidth: StringConstructor;
+    onMouseenter: PropType<(e: MouseEvent) => void>;
+    onMouseleave: PropType<(e: MouseEvent) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/data-table/src/TableParts/VirtualListItemWrapper.mjs

@@ -0,0 +1,46 @@
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+  name: 'VirtualListItemWrapper',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    cols: {
+      type: Array,
+      required: true
+    },
+    tableWidth: String,
+    onMouseenter: Function,
+    onMouseleave: Function
+  },
+  render() {
+    const {
+      clsPrefix,
+      id,
+      cols,
+      tableWidth,
+      onMouseenter,
+      onMouseleave
+    } = this;
+    return h("table", {
+      style: {
+        tableLayout: 'fixed',
+        width: tableWidth
+      },
+      class: `${clsPrefix}-data-table-table`,
+      onMouseenter: onMouseenter,
+      onMouseleave: onMouseleave
+    }, h("colgroup", null, cols.map(col => h("col", {
+      key: col.key,
+      style: col.style
+    }))), h("tbody", {
+      "data-u-id": id,
+      class: `${clsPrefix}-data-table-tbody`
+    }, this.$slots));
+  }
+});

package/es/data-table/src/interface.d.ts

@@ -1,5 +1,5 @@
 import type { TreeMate, TreeNode } from 'treemate';
-import type { CSSProperties, ExtractPropTypes, HTMLAttributes, PropType, Ref, Slots, VNode, VNodeChild } from 'vue';
+import type { ComputedRef, CSSProperties, ExtractPropTypes, HTMLAttributes, PropType, Ref, Slots, VNode, VNodeChild } from 'vue';
 import type { BaseLoadingExposedProps } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
@@ -178,6 +178,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -1133,6 +1136,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -2088,6 +2094,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -3016,6 +3025,7 @@ export interface DataTableSlots {
     default?: () => VNode[];
     empty?: () => VNode[];
     loading?: () => VNode[];
+    'drag-handle'?: () => VNode[];
 }
 export type RowData = Record<string, any>;
 export type InternalRowData = Record<string, unknown>;
@@ -3134,8 +3144,123 @@ export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelect
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
-export type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
+export interface RowDragEndOptions {
+    index: number;
+    oldOrder: number;
+    newOrder: number;
+}
+export interface UseTableDataDeps {
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
+}
+export interface UseSorterDeps {
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
+    filteredDataRef: ComputedRef<TmNode[]>;
+}
+export interface UseRowDragDeps {
+    paginatedDataRef: ComputedRef<TmNode[]>;
+    mergedCheckedRowKeySetRef: Ref<Set<RowKey>>;
+    mergedClsPrefixRef: Ref<string>;
+}
+export interface UseRowDragReturn {
+    draggableColumnRef: Ref<TableDraggableColumn | null>;
+    draggingRowKeySetRef: Ref<Set<RowKey>>;
+    droppingRowKeyRef: Ref<RowKey | null>;
+    droppingPositionRef: Ref<RowDropPosition | null>;
+    handleRowDragStart: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragOver: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragLeave: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragEnd: () => void;
+    handleRowDrop: (event: DragEvent, rowKey: RowKey) => void;
+}
+export interface BodyRowRenderContext {
+    mergedClsPrefix: string;
+    cols: ColItem[];
+    colCount: number;
+    rowCount: number;
+    hasChildren: boolean;
+    childTriggerColIndex: number;
+    indentStyle: {
+        width: string;
+    } | undefined;
+    rowClassName: string | CreateRowClassName | undefined;
+    rowProps: CreateRowProps | undefined;
+    mergedSortState: SortState[];
+    mergedExpandedRowKeySet: Set<RowKey>;
+    fixedColumnLeftMap: Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>;
+    fixedColumnRightMap: Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>;
+    currentPage: number;
+    loadingKeySet: Set<RowKey>;
+    stickyExpandedRows: boolean;
+    bodyWidthPx: string | undefined;
+    renderExpand: RenderExpand | undefined;
+    renderExpandIcon: RenderExpandIcon | undefined;
+    renderCell: ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild) | undefined;
+    defaultEmptyValue: string | (() => VNodeChild) | undefined;
+    mergedTheme: MergedTheme<DataTableTheme>;
+    rowIndexToKey: Record<number, RowKey>;
+    cordToPass: Record<number, number[]>;
+    cordKey: Record<number, Record<number, RowKey[]>>;
+    draggableColumn: TableDraggableColumn | null;
+    droppingRowKey: RowKey | null;
+    droppingPosition: RowDropPosition | null;
+    draggingRowKeySet: Set<RowKey>;
+    hoverKey: RowKey | null;
+    dataTableSlots: Slots;
+    setHoverKey: (key: RowKey) => void;
+    handleCheckboxUpdateChecked: (tmNode: {
+        key: RowKey;
+    }, checked: boolean, shiftKey: boolean) => void;
+    handleRadioUpdateChecked: (tmNode: {
+        key: RowKey;
+    }) => void;
+    handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
+    handleRowDragStart: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragOver: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragLeave: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragEnd: () => void;
+    handleRowDrop: (event: DragEvent, rowKey: RowKey) => void;
+    emitEdit: (value: any, row: any, key: any) => void;
+}
+export interface BodyEmptyDeps {
+    clsPrefix: string;
+    loading: boolean;
+    bodyStyle: CSSProperties | undefined;
+    dataTableSlots: Slots;
+    mergedTheme: MergedTheme<DataTableTheme>;
+    emptyProps: Partial<EmptyProps> | undefined;
+}
+export interface FixedShadowStyleProps {
+    leftActiveFixedColKey: ColumnKey | null;
+    leftActiveFixedChildrenColKeys: ColumnKey[];
+    rightActiveFixedColKey: ColumnKey | null;
+    rightActiveFixedChildrenColKeys: ColumnKey[];
+    componentId: string;
+}
+export type RowDropPosition = 'before' | 'after';
+export type TableDraggableColumn<T = InternalRowData> = {
+    type: 'draggable';
+    key: ColumnKey;
+    draggable?: (row: T) => boolean;
+    onDragEnd?: (row: T, options: RowDragEndOptions) => void;
+    sortByKey?: boolean;
+    sorter?: never;
+    filter?: never;
+    filterOptions?: never;
+    filterOptionValues?: never;
+    filterOptionValue?: never;
+    resizable?: never;
+    colSpan?: never;
+    rowSpan?: never;
+} & CommonColumnInfo<T>;
+export type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T> | TableDraggableColumn<T>;
 export type TableColumns<T = InternalRowData> = Array<TableColumn<T>>;
+export type DataRelatedColumn<T = InternalRowData> = TableSelectionColumn<T> | TableBaseColumn<T> | TableExpandColumn<T> | TableDraggableColumn<T>;
 export type DataTableSelectionOptions<T = InternalRowData> = Array<DataTableSelectionOption | {
     label: string;
     key: string | number;
@@ -3226,6 +3351,15 @@ export interface DataTableInjection {
     defaultEmptyValueRef: Ref<string | (() => VNodeChild) | undefined>;
     emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
+    draggableColumnRef: UseRowDragReturn['draggableColumnRef'];
+    draggingRowKeySetRef: UseRowDragReturn['draggingRowKeySetRef'];
+    droppingRowKeyRef: UseRowDragReturn['droppingRowKeyRef'];
+    droppingPositionRef: UseRowDragReturn['droppingPositionRef'];
+    handleRowDragStart: UseRowDragReturn['handleRowDragStart'];
+    handleRowDragOver: UseRowDragReturn['handleRowDragOver'];
+    handleRowDragLeave: UseRowDragReturn['handleRowDragLeave'];
+    handleRowDragEnd: UseRowDragReturn['handleRowDragEnd'];
+    handleRowDrop: UseRowDragReturn['handleRowDrop'];
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {
@@ -3314,5 +3448,30 @@ export interface CsvOptionsType {
     fileName?: string;
     keepOriginalData?: boolean;
 }
+export interface NormalRowRenderInfo {
+    striped: boolean;
+    tmNode: TmNode;
+    key: RowKey;
+    index: number;
+}
+export interface WidthConstraintSignal {
+    systemMinWidth: number | string;
+    systemMaxWidth?: number | string;
+}
+export type RowRenderInfo = {
+    isSummaryRow: true;
+    key: RowKey;
+    tmNode: {
+        rawNode: SummaryRowData;
+        disabled: boolean;
+    };
+    index: number;
+} | NormalRowRenderInfo | {
+    isExpandedRow: true;
+    tmNode: TmNode;
+    key: RowKey;
+    index: number;
+};
+export type ResizeReconcileReason = 'topology/capability' | 'mode' | 'environment' | 'width-state';
 export type DataTableProps = ExtractPublicPropTypes<typeof dataTableProps>;
 export type DataTableSetupProps = ExtractPropTypes<typeof dataTableProps>;

package/es/data-table/src/styles/index.cssr.mjs

@@ -140,7 +140,11 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  margin: calc(var(--u-th-padding) * -1);
  padding: var(--u-th-padding);
  box-sizing: border-box;
- `), cM('disabled', null, [cB('data-table-td', 'color: var(--u-td-opacity-disabled);')]), cM('striped', 'background-color: var(--u-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), c('&:hover', 'background-color: var(--u-merged-td-color-hover);', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), c('&:has(.u-data-table-td--editable:hover)', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color);', [cM('editable', [c('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), cB('data-table-th', `
+ `), cM('disabled', null, [cB('data-table-td', 'color: var(--u-td-opacity-disabled);')]), cM('dragging', 'opacity: 0.4;'), cM('drop-before', null, [c('>', [cB('data-table-td', `
+ box-shadow: inset 0 2px 0 0 var(--u-drop-mark-color);
+ `)])]), cM('drop-after', null, [c('>', [cB('data-table-td', `
+ box-shadow: inset 0 -2px 0 0 var(--u-drop-mark-color);
+ `)])]), cM('striped', 'background-color: var(--u-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), c('&:hover', 'background-color: var(--u-merged-td-color-hover);', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), c('&:has(.u-data-table-td--editable:hover)', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color);', [cM('editable', [c('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), cB('data-table-th', `
  padding: var(--u-th-padding);
  position: relative;
  height: var(--u-th-height);
@@ -293,7 +297,22 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  `), cM('selection, expand', `
  text-align: center;
  line-height: 0;
- `), cM('editable', `
+ `), cM('draggable', `
+ text-align: center;
+ line-height: 0;
+ cursor: grab;
+ `, [c('&:active', `
+ cursor: grabbing;
+ `), c('&:hover', [cE('drag-handle', `
+ color: var(--u-th-icon-color-active);
+ `)]), cE('drag-handle', `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--u-th-icon-color);
+ line-height: 0;
+ pointer-events: none;
+ `)]), cM('editable', `
  cursor: pointer;
  position: relative;
  padding: 0;
@@ -312,7 +331,11 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  height: 100%;
  width: 100%;
  }
- `), fixedColumnStyle]), cB('data-table-empty', `
+ `), fixedColumnStyle]), cB('data-table-drag-ghost', `
+ opacity: var(--u-drag-ghost-opacity);
+ filter: var(--u-drag-ghost-filter);
+ pointer-events: none;
+ `), cB('data-table-empty', `
  box-sizing: border-box;
  padding: var(--u-empty-padding);
  flex-grow: 1;