@quadrats/react 1.1.0 → 1.1.2

package/table/index.cjs.js

@@ -13,6 +13,8 @@ var react = require('@quadrats/react');
 var components = require('@quadrats/react/components');
 var clsx = require('clsx');
 var slate = require('slate');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
 
 const TableActionsContext = React.createContext(undefined);
 
@@ -44,6 +46,58 @@ function useTableStateContext() {
     return context;
 }
 
+/**
+ * 分配百分比寬度，確保總和為 100%
+ * 前 n-1 個欄位使用四捨五入的平均值，最後一個欄位使用剩餘寬度
+ * @param count - 欄位數量
+ * @returns 百分比陣列，總和為 100%
+ */
+function distributeEqualPercentages(count) {
+    if (count <= 0)
+        return [];
+    if (count === 1)
+        return [100];
+    const percentages = [];
+    const averagePercentage = Math.round((100 / count) * 10) / 10;
+    // 前 n-1 個欄位使用四捨五入的平均值
+    for (let i = 0; i < count - 1; i++) {
+        percentages.push(averagePercentage);
+    }
+    // 最後一個欄位使用剩餘寬度，確保總和為 100%
+    const sumOfFirst = percentages.reduce((sum, val) => sum + val, 0);
+    const lastPercentage = Math.round((100 - sumOfFirst) * 10) / 10;
+    percentages.push(lastPercentage);
+    return percentages;
+}
+/**
+ * 等比例縮減現有百分比並加入新欄位
+ * 前 n-1 個縮減後的欄位使用四捨五入，最後一個縮減欄位使用剩餘寬度
+ * @param currentPercentages - 當前的百分比陣列
+ * @param newColumnPercentage - 新欄位要佔的百分比
+ * @param insertIndex - 新欄位插入的位置（0-based）
+ * @returns 新的百分比陣列，總和為 100%
+ */
+function scalePercentagesWithNewColumn(currentPercentages, newColumnPercentage, insertIndex) {
+    if (currentPercentages.length === 0)
+        return [100];
+    const currentTotal = currentPercentages.reduce((sum, val) => sum + val, 0);
+    const targetTotal = 100 - newColumnPercentage;
+    const scaleFactor = targetTotal / currentTotal;
+    const scaledPercentages = [];
+    // 前 n-1 個欄位使用縮放後四捨五入的值
+    for (let i = 0; i < currentPercentages.length - 1; i++) {
+        const scaledValue = Math.round(currentPercentages[i] * scaleFactor * 10) / 10;
+        scaledPercentages.push(scaledValue);
+    }
+    // 最後一個現有欄位使用剩餘寬度，確保總和正確
+    const sumOfScaled = scaledPercentages.reduce((sum, val) => sum + val, 0);
+    const lastScaledValue = Math.round((targetTotal - sumOfScaled) * 10) / 10;
+    scaledPercentages.push(lastScaledValue);
+    // 在指定位置插入新欄位
+    const result = [...scaledPercentages];
+    result.splice(insertIndex, 0, newColumnPercentage);
+    return result;
+}
 /**
  * 提取表格的所有基本元素
  */
@@ -370,11 +424,9 @@ function getColumnWidths(tableElement, tableWidth) {
         }
         return widths;
     }
-    // 否則返回平均分配的 percentage（精確到小數點後一位）
-    const equalPercentage = Math.round((100 / columnCount) * 10) / 10;
-    return Array(columnCount)
-        .fill(null)
-        .map(() => ({ type: 'percentage', value: equalPercentage }));
+    // 否則返回平均分配的 percentage（總和為 100%）
+    const percentages = distributeEqualPercentages(columnCount);
+    return percentages.map((value) => ({ type: 'percentage', value }));
 }
 /**
  * 設定表格的欄位寬度
@@ -390,16 +442,17 @@ function setColumnWidths(editor, tableElement, columnWidths) {
  * 計算新增欄位後的欄位寬度
  * - 如果所有欄位都是 percentage：按比例縮減現有欄位，新欄位佔平均寬度
  * - 如果有混合模式（percentage + pixel）：
- *   * percentage 欄位（pinned）保持不變
- *   * 新欄位使用 pixel（與其他 pixel 欄位平均分配剩餘空間）
+ *   * 如果用戶操作的欄位是 pinned column：新欄位使用 percentage（需要調整 pinned columns 的百分比）
+ *   * 如果用戶操作的欄位是 unpinned column：新欄位使用 pixel（與其他 pixel 欄位相同寬度）
  *
  * @param currentWidths - 當前的欄位寬度陣列
  * @param insertIndex - 新欄位插入的位置（0-based）
+ * @param pinnedColumnIndices - 當前釘選欄位的索引陣列（插入前的索引）
+ * @param operatingColumnIndex - 用戶實際操作的欄位索引（用於判斷是在 pinned 還是 unpinned column 操作）
  * @returns 新的欄位寬度陣列
  */
-function calculateColumnWidthsAfterAdd(currentWidths, insertIndex) {
+function calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices = [], operatingColumnIndex) {
     const newColumnCount = currentWidths.length + 1;
-    const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
     // 分離 percentage 和 pixel 欄位
     const percentageColumns = [];
     const pixelColumns = [];
@@ -413,46 +466,68 @@ function calculateColumnWidthsAfterAdd(currentWidths, insertIndex) {
     });
     // 如果所有欄位都是 percentage（正常模式，無 pinned columns）
     if (percentageColumns.length === currentWidths.length) {
-        const currentTotal = percentageColumns.reduce((sum, col) => sum + col.value, 0);
-        const targetTotal = 100 - averagePercentage;
-        const scaleFactor = targetTotal / currentTotal;
-        const newWidths = [];
-        currentWidths.forEach((width, index) => {
-            if (index === insertIndex) {
-                newWidths.push({ type: 'percentage', value: averagePercentage });
-            }
-            // 按比例縮減現有欄位
-            const scaledValue = Math.round(width.value * scaleFactor * 10) / 10;
-            newWidths.push({ type: 'percentage', value: scaledValue });
-        });
-        if (insertIndex >= currentWidths.length) {
-            newWidths.push({ type: 'percentage', value: averagePercentage });
-        }
-        return newWidths;
+        // 計算新欄位的平均百分比
+        const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
+        // 提取當前的百分比值
+        const currentPercentages = currentWidths.map((w) => w.value);
+        // 等比例縮減現有欄位並插入新欄位
+        const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
+        return newPercentages.map((value) => ({ type: 'percentage', value }));
     }
     // 如果有混合的 pixel 和 percentage 欄位（有 pinned columns）
-    // percentage 欄位（pinned）保持不變
-    // 新欄位應維持 pixel（此時一般欄位必定是 pixel）
     if (percentageColumns.length && pixelColumns.length) {
-        const newWidths = [];
-        // 找到最後一個 pixel 欄位的寬度，新欄位將複製這個寬度
-        const lastPixelWidth = pixelColumns.length > 0 ? pixelColumns[pixelColumns.length - 1].value : 150;
-        currentWidths.forEach((width, index) => {
-            if (index === insertIndex) {
+        // 判斷新欄位是否應該是 pinned column
+        const isNewColumnPinned = typeof operatingColumnIndex === 'number' ? pinnedColumnIndices.includes(operatingColumnIndex) : false;
+        if (isNewColumnPinned) {
+            // 新欄位應該是 pinned column，使用 percentage
+            // 需要調整所有 pinned columns 的百分比
+            const newWidths = [];
+            const pinnedColumnCount = pinnedColumnIndices.length + 1; // 加上新欄位
+            const pinnedPercentagePerColumn = Math.min(Math.round((table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / pinnedColumnCount) * 10) / 10, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
+            currentWidths.forEach((width, index) => {
+                if (index === insertIndex) {
+                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+                }
+                if (pinnedColumnIndices.includes(index)) {
+                    // 調整現有 pinned column 的百分比
+                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+                }
+                else {
+                    // 保持非 pinned column (pixel) 不變
+                    newWidths.push(Object.assign({}, width));
+                }
+            });
+            // 如果插入位置在最後（但仍在 pinned 區域內）
+            if (insertIndex >= currentWidths.length) {
+                newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+            }
+            return newWidths;
+        }
+        else {
+            // 新欄位應該是 unpinned column，使用 pixel
+            const newWidths = [];
+            // 找到最後一個 pixel 欄位的寬度，新欄位將複製這個寬度
+            const lastPixelWidth = pixelColumns.length > 0 ? pixelColumns[pixelColumns.length - 1].value : 150;
+            currentWidths.forEach((width, index) => {
+                if (index === insertIndex) {
+                    newWidths.push({ type: 'pixel', value: lastPixelWidth });
+                }
+                newWidths.push(Object.assign({}, width));
+            });
+            // 如果插入位置在最後
+            if (insertIndex >= currentWidths.length) {
                 newWidths.push({ type: 'pixel', value: lastPixelWidth });
             }
-            newWidths.push(Object.assign({}, width));
-        });
-        // 如果插入位置在最後
-        if (insertIndex >= currentWidths.length) {
-            newWidths.push({ type: 'pixel', value: lastPixelWidth });
+            return newWidths;
         }
-        return newWidths;
     }
-    // Fallback: 返回原始寬度加一個平均 percentage 欄位
-    const newWidths = [...currentWidths];
-    newWidths.splice(insertIndex, 0, { type: 'percentage', value: averagePercentage });
-    return newWidths;
+    // Fallback: 等比例縮減並插入新欄位
+    const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
+    // 提取當前的百分比值（假設都是 percentage，否則轉為平均分配）
+    const currentPercentages = currentWidths.map((w) => (w.type === 'percentage' ? w.value : 100 / currentWidths.length));
+    // 等比例縮減現有欄位並插入新欄位
+    const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
+    return newPercentages.map((value) => ({ type: 'percentage', value }));
 }
 /**
  * 計算刪除欄位後的欄位寬度
@@ -647,19 +722,33 @@ function calculateResizedColumnWidths(currentWidths, columnIndex, deltaPercentag
     return newWidths;
 }
 /**
- * 移動 columnWidths 陣列中的元素位置
+ * 移動或交換欄位寬度設定
  * @param currentWidths - 當前的欄位寬度陣列
- * @param fromIndex - 來源索引
- * @param toIndex - 目標索引
- * @returns 新的欄位寬度陣列
+ * @param sourceIndex - 來源欄位的索引
+ * @param targetIndex - 目標欄位的索引
+ * @param mode - 'swap' 為交換兩個位置，'move' 為移動到目標位置
+ * @returns 處理後的欄位寬度陣列
  */
-function moveColumnWidth(currentWidths, fromIndex, toIndex) {
-    if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= currentWidths.length) {
+function moveOrSwapColumnWidth(currentWidths, sourceIndex, targetIndex, mode = 'move') {
+    if (sourceIndex === targetIndex ||
+        sourceIndex < 0 ||
+        targetIndex < 0 ||
+        sourceIndex >= currentWidths.length ||
+        targetIndex >= currentWidths.length) {
         return currentWidths;
     }
     const newWidths = [...currentWidths];
-    const [movedWidth] = newWidths.splice(fromIndex, 1);
-    newWidths.splice(toIndex, 0, movedWidth);
+    if (mode === 'swap') {
+        // swap 邏輯：直接交換兩個位置的值
+        const temp = newWidths[sourceIndex];
+        newWidths[sourceIndex] = newWidths[targetIndex];
+        newWidths[targetIndex] = temp;
+    }
+    else {
+        // move 邏輯：移除再插入
+        const [movedWidth] = newWidths.splice(sourceIndex, 1);
+        newWidths.splice(targetIndex, 0, movedWidth);
+    }
     return newWidths;
 }
 /**
@@ -690,28 +779,28 @@ function convertToMixedWidthMode(currentWidths, pinnedColumnIndices, tableWidth)
         }
     });
     // 確保釘選欄位總和不超過指定範圍
-    if (totalPinnedPercentage > table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE) {
-        const scaleFactor = table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage;
-        totalPinnedPercentage = table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE;
-        // 調整釘選欄位的百分比
-        currentWidths.forEach((width, index) => {
-            if (pinnedColumnIndices.includes(index)) {
-                if (width.type === 'percentage') {
-                    currentWidths[index] = {
-                        type: 'percentage',
-                        value: Math.round(width.value * scaleFactor * 10) / 10,
-                    };
-                }
-                else {
-                    const percentage = (width.value / tableWidth) * 100;
-                    currentWidths[index] = {
-                        type: 'percentage',
-                        value: Math.round(percentage * scaleFactor * 10) / 10,
-                    };
-                }
+    const scaleFactor = totalPinnedPercentage > table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE
+        ? table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage
+        : 1;
+    totalPinnedPercentage = Math.min(totalPinnedPercentage, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
+    // 調整釘選欄位的百分比
+    currentWidths.forEach((width, index) => {
+        if (pinnedColumnIndices.includes(index)) {
+            if (width.type === 'percentage') {
+                currentWidths[index] = {
+                    type: 'percentage',
+                    value: Math.round(width.value * scaleFactor * 10) / 10,
+                };
             }
-        });
-    }
+            else {
+                const percentage = (width.value / tableWidth) * 100;
+                currentWidths[index] = {
+                    type: 'percentage',
+                    value: Math.round(percentage * scaleFactor * 10) / 10,
+                };
+            }
+        }
+    });
     // 計算剩餘空間（用於未釘選欄位）
     const remainingPercentage = 100 - totalPinnedPercentage;
     const remainingPixelWidth = (tableWidth * remainingPercentage) / 100;
@@ -730,6 +819,25 @@ function convertToMixedWidthMode(currentWidths, pinnedColumnIndices, tableWidth)
     });
     return newWidths;
 }
+/**
+ * 將混合模式的欄位寬度轉換回純百分比模式
+ * 當所有 pinned columns 都被 unpin 後，需要將 pixel 欄位轉換回 percentage
+ * @param currentWidths - 當前的欄位寬度陣列（混合模式）
+ * @returns 轉換後的純百分比欄位寬度陣列，總和為 100%
+ */
+function convertToPercentageMode(currentWidths) {
+    if (currentWidths.length === 0)
+        return [];
+    // 檢查是否有 pixel 欄位
+    const hasPixelColumns = currentWidths.some((width) => width.type === 'pixel');
+    // 如果沒有 pixel 欄位，表示已經是純百分比模式，直接返回
+    if (!hasPixelColumns) {
+        return currentWidths;
+    }
+    // 使用 distributeEqualPercentages 重新分配百分比，確保總和為 100%
+    const percentages = distributeEqualPercentages(currentWidths.length);
+    return percentages.map((value) => ({ type: 'percentage', value }));
+}
 
 /** 檢查 table cell 是否在 focused 狀態 */
 function useTableCellFocused(element, editor) {
@@ -893,10 +1001,10 @@ function useTableCellAlignStatus(tableElement, editor) {
 function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }) {
     const editor = slateReact.useSlateStatic();
     const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
-    const { tableElement, isReachMaximumColumns, isReachMinimumNormalColumns, isReachMinimumBodyRows, isColumnPinned, isRowPinned, } = useTableMetadata();
+    const { tableElement, columnCount, rowCount, isReachMaximumColumns, isReachMinimumNormalColumns, isReachMinimumBodyRows, isColumnPinned, isRowPinned, } = useTableMetadata();
     const setAlign = useTableCellAlign(tableElement, editor);
     const getAlign = useTableCellAlignStatus(tableElement, editor);
-    const { deleteRow, deleteColumn, addRow, addColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, unpinColumn, pinRow, unpinRow, } = useTableActionsContext();
+    const { deleteRow, deleteColumn, addRow, addColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, unpinColumn, pinRow, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActionsContext();
     // 獲取當前 cell 內容的類型（用於顯示對應的 icon）
     const getCurrentContentType = React.useMemo(() => {
         // 檢查 cell 的第一個 child 的類型
@@ -1237,6 +1345,116 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
                 },
         ].filter((i) => i !== undefined);
     }, [tableSelectedOn, addColumn, setTableSelectedOn, isReachMaximumColumns]);
+    // Row move actions
+    const rowMoveActions = React.useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        const rowIndex = tableSelectedOn.index;
+        // 從 tableElement 獲取 header 和 body 的資訊
+        const tableMainElement = tableElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_main'));
+        if (!tableMainElement || !core.Element.isElement(tableMainElement)) {
+            return null;
+        }
+        const tableHeaderElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_header'));
+        const headerRowCount = tableHeaderElement && core.Element.isElement(tableHeaderElement) ? tableHeaderElement.children.length : 0;
+        // 判斷當前列是在 header 還是 body 中
+        const currentInHeader = rowIndex < headerRowCount;
+        // 判斷上方和下方是否可以互換
+        const canMoveUp = rowIndex > 0; // 不在第一列
+        const canMoveDown = rowIndex < rowCount - 1; // 不在最後一列
+        // 檢查目標位置是否在相同的容器中（header 或 body）
+        const targetUpInHeader = rowIndex - 1 < headerRowCount;
+        const targetDownInHeader = rowIndex + 1 < headerRowCount;
+        // 標題列只能與標題列互換，一般列只能與一般列互換
+        const canSwapUp = canMoveUp && currentInHeader === targetUpInHeader;
+        const canSwapDown = canMoveDown && currentInHeader === targetDownInHeader;
+        return [
+            canSwapDown
+                ? {
+                    icon: icons.TableMoveDown,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                }
+                : undefined,
+            canSwapUp
+                ? {
+                    icon: icons.TableMoveUp,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                }
+                : undefined,
+        ].filter((i) => i !== undefined);
+    }, [tableSelectedOn, setTableSelectedOn, rowCount, tableElement, moveOrSwapRow]);
+    // Column move actions
+    const columnMoveActions = React.useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        const columnIndex = tableSelectedOn.index;
+        // 檢查當前行是否為標題行
+        const currentIsTitle = !!element.treatAsTitle;
+        // 判斷左右是否可以移動
+        const canMoveLeft = columnIndex > 0;
+        const canMoveRight = columnIndex < columnCount - 1;
+        // 檢查相鄰行是否為相同類型（都是標題行或都不是標題行）
+        const checkAdjacentColumnType = (adjacentIndex) => {
+            // 從 tableElement 中獲取相鄰行的 treatAsTitle 狀態
+            const tableMainElement = tableElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_main'));
+            if (!tableMainElement || !core.Element.isElement(tableMainElement)) {
+                return false;
+            }
+            const tableBodyElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_body'));
+            if (!tableBodyElement || !core.Element.isElement(tableBodyElement)) {
+                return false;
+            }
+            // 從 body 的第一列獲取相鄰 cell 的 treatAsTitle 屬性
+            const firstRow = tableBodyElement.children[0];
+            if (!core.Element.isElement(firstRow)) {
+                return false;
+            }
+            const adjacentCell = firstRow.children[adjacentIndex];
+            if (!core.Element.isElement(adjacentCell)) {
+                return false;
+            }
+            return !!adjacentCell.treatAsTitle;
+        };
+        // 標題行只能與標題行互換，一般行只能與一般行互換
+        const canSwapLeft = canMoveLeft && currentIsTitle === checkAdjacentColumnType(columnIndex - 1);
+        const canSwapRight = canMoveRight && currentIsTitle === checkAdjacentColumnType(columnIndex + 1);
+        return [
+            canSwapRight
+                ? {
+                    icon: icons.TableMoveRight,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                }
+                : undefined,
+            canSwapLeft
+                ? {
+                    icon: icons.TableMoveLeft,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                }
+                : undefined,
+        ].filter((i) => i !== undefined);
+    }, [tableSelectedOn, setTableSelectedOn, columnCount, element.treatAsTitle, tableElement, moveOrSwapColumn]);
     // Delete actions
     const deleteActions = React.useMemo(() => {
         return [
@@ -1268,17 +1486,52 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
             {
                 icons: rowAddActions || columnAddActions || [],
             },
+            {
+                icons: rowMoveActions || columnMoveActions || [],
+            },
             {
                 icons: deleteActions,
             },
         ];
-    }, [rowActions, columnActions, columnAlignActions, rowAddActions, columnAddActions, deleteActions]);
+    }, [
+        rowActions,
+        columnActions,
+        columnAlignActions,
+        rowAddActions,
+        columnAddActions,
+        rowMoveActions,
+        columnMoveActions,
+        deleteActions,
+    ]);
     return {
         focusToolbarIconGroups,
         inlineToolbarIconGroups,
     };
 }
 
+const TableDragContext = React.createContext(null);
+const TableDragProvider = ({ children }) => {
+    const [dragState, setDragState] = React.useState(null);
+    const [dropTargetIndex, setDropTargetIndex] = React.useState(null);
+    const [dragDirection, setDragDirection] = React.useState(null);
+    const value = React.useMemo(() => ({
+        dragState,
+        setDragState,
+        dropTargetIndex,
+        setDropTargetIndex,
+        dragDirection,
+        setDragDirection,
+    }), [dragState, dropTargetIndex, dragDirection]);
+    return React.createElement(TableDragContext.Provider, { value: value }, children);
+};
+const useTableDragContext = () => {
+    const context = React.useContext(TableDragContext);
+    if (!context) {
+        throw new Error('useTableDragContext must be used within TableDragProvider');
+    }
+    return context;
+};
+
 function useTableActions(element) {
     const editor = react.useQuadrats();
     const isColumnPinned = React.useCallback((columnIndex) => {
@@ -1394,7 +1647,9 @@ function useTableActions(element) {
                 // 調整欄位寬度
                 const currentWidths = getColumnWidths(element);
                 if (currentWidths.length > 0) {
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex);
+                    // 獲取當前的 pinned columns 資訊
+                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
+                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices, columnIndex);
                     setColumnWidths(editor, element, newWidths);
                 }
             });
@@ -1530,7 +1785,9 @@ function useTableActions(element) {
                 if (currentWidths.length > 0) {
                     // 新欄位插入在最後（columnCount 位置）
                     const insertIndex = columnCount;
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex);
+                    // 獲取當前的 pinned columns 資訊
+                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
+                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices);
                     setColumnWidths(editor, element, newWidths);
                 }
             });
@@ -1795,7 +2052,7 @@ function useTableActions(element) {
                     // 調整 columnWidths：將 columnIndex 的寬度移動到 actualTargetIndex
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
-                        const movedWidths = moveColumnWidth(currentWidths, columnIndex, actualTargetIndex);
+                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, actualTargetIndex, 'move');
                         // 檢查移動後是否還有 pinned columns
                         const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
                         // 更新釘選欄位索引（移除當前欄位，並調整其他欄位的索引）
@@ -1853,7 +2110,7 @@ function useTableActions(element) {
             if (!tableStructure)
                 return;
             const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 檢查是否已有 pinned columns（一致性規則檢查）
+            // 檢查是否已有 pinned columns
             const hasExistingPinnedColumns = hasAnyPinnedColumns(tableStructure);
             // 如果有現有的 pinned columns 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
             const finalProps = customProps || (hasExistingPinnedColumns ? { pinned: true } : undefined);
@@ -1900,10 +2157,9 @@ function useTableActions(element) {
                         });
                     }
                 });
-                // 如果目標位置並不需要移動，則直接返回
-                if (columnIndex < targetColumnIndex)
-                    return;
-                if (columnIndex !== targetColumnIndex) {
+                // 檢查是否需要移動位置
+                const needsMove = columnIndex >= targetColumnIndex && columnIndex !== targetColumnIndex;
+                if (needsMove) {
                     for (let rowIndex = containerElement.children.length - 1; rowIndex >= 0; rowIndex--) {
                         const row = containerElement.children[rowIndex];
                         if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
@@ -1918,7 +2174,7 @@ function useTableActions(element) {
                     // 調整 columnWidths：將 columnIndex 的寬度移動到 targetColumnIndex
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
-                        const movedWidths = moveColumnWidth(currentWidths, columnIndex, targetColumnIndex);
+                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, targetColumnIndex, 'move');
                         // 如果設定了 pinned，需要轉換為混合模式
                         if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
                             const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
@@ -1947,7 +2203,23 @@ function useTableActions(element) {
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
                         const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        const updatedPinnedIndices = [...new Set([...pinnedColumnIndices, columnIndex])].sort((a, b) => a - b);
+                        // 找出所有已經是 title 的 columns
+                        const titleColumnIndices = new Set();
+                        const firstRow = containerElement.children[0];
+                        if (core.Element.isElement(firstRow) && firstRow.type.includes(table.TABLE_ROW_TYPE)) {
+                            firstRow.children.forEach((cell, colIndex) => {
+                                if (core.Element.isElement(cell) &&
+                                    cell.type.includes(table.TABLE_CELL_TYPE) &&
+                                    cell.treatAsTitle) {
+                                    titleColumnIndices.add(colIndex);
+                                }
+                            });
+                        }
+                        // 將當前 column 加入 title columns
+                        titleColumnIndices.add(columnIndex);
+                        // 合併所有 pinned columns 和 title columns
+                        const allPinnedIndices = new Set([...pinnedColumnIndices, ...Array.from(titleColumnIndices)]);
+                        const updatedPinnedIndices = Array.from(allPinnedIndices).sort((a, b) => a - b);
                         const mixedWidths = convertToMixedWidthMode(currentWidths, updatedPinnedIndices, tableWidth);
                         setColumnWidths(editor, element, mixedWidths);
                     }
@@ -2027,6 +2299,10 @@ function useTableActions(element) {
             if (tableBodyElement) {
                 processContainer(tableBodyElement);
             }
+            // 轉換回純百分比模式
+            const currentWidths = getColumnWidths(element);
+            const percentageWidths = convertToPercentageMode(currentWidths);
+            setColumnWidths(editor, element, percentageWidths);
         }
         catch (error) {
             console.warn('Failed to unpin column:', error);
@@ -2138,6 +2414,187 @@ function useTableActions(element) {
             console.warn('Failed to unpin row:', error);
         }
     }, [editor, element]);
+    /**
+     * 內部函數：移動或交換列的位置
+     * @param mode 'swap' 為交換相鄰位置（toolbar 按鈕），'move' 為移動到任意位置（拖曳）
+     */
+    const moveOrSwapRow = React.useCallback((sourceRowIndex, targetRowIndex, mode = 'move') => {
+        try {
+            const tableStructure = getTableStructure(editor, element);
+            if (!tableStructure)
+                return;
+            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
+            // 確定當前列和目標列所屬的容器
+            const sourceInHeader = sourceRowIndex < headerRowCount;
+            const targetInHeader = targetRowIndex < headerRowCount;
+            // 標題列只能與標題列互換/移動，一般列只能與一般列互換/移動
+            if (sourceInHeader !== targetInHeader) {
+                console.warn(`Cannot ${mode} row between header and body`);
+                return;
+            }
+            // 檢查邊界
+            if (sourceRowIndex === targetRowIndex) {
+                return;
+            }
+            let containerPath;
+            let sourceLocalIndex;
+            let targetLocalIndex;
+            if (sourceInHeader) {
+                // 在 header 中
+                if (!tableHeaderElement || !tableHeaderPath)
+                    return;
+                containerPath = tableHeaderPath;
+                sourceLocalIndex = sourceRowIndex;
+                targetLocalIndex = targetRowIndex;
+            }
+            else {
+                // 在 body 中
+                if (!tableBodyElement)
+                    return;
+                containerPath = tableBodyPath;
+                sourceLocalIndex = sourceRowIndex - headerRowCount;
+                targetLocalIndex = targetRowIndex - headerRowCount;
+            }
+            core.Editor.withoutNormalizing(editor, () => {
+                if (mode === 'swap') {
+                    // swap 邏輯：交換兩個相鄰位置
+                    if (sourceRowIndex < targetRowIndex) {
+                        // 向下移動：先將源列移到目標位置之後
+                        const sourcePath = [...containerPath, sourceLocalIndex];
+                        const afterTargetPath = [...containerPath, targetLocalIndex];
+                        core.Transforms.moveNodes(editor, {
+                            at: sourcePath,
+                            to: afterTargetPath,
+                        });
+                    }
+                    else {
+                        // 向上移動：先將目標列移到源位置之後
+                        const targetPath = [...containerPath, targetLocalIndex];
+                        const afterSourcePath = [...containerPath, sourceLocalIndex];
+                        core.Transforms.moveNodes(editor, {
+                            at: targetPath,
+                            to: afterSourcePath,
+                        });
+                    }
+                }
+                else {
+                    // move 邏輯：直接移動到目標位置
+                    const sourcePath = [...containerPath, sourceLocalIndex];
+                    const targetPath = [...containerPath, targetLocalIndex];
+                    core.Transforms.moveNodes(editor, {
+                        at: sourcePath,
+                        to: targetPath,
+                    });
+                }
+            });
+        }
+        catch (error) {
+            console.warn(`Failed to ${mode} row:`, error);
+        }
+    }, [editor, element]);
+    /**
+     * 內部函數：移動或交換行的位置
+     * @param mode 'swap' 為交換相鄰位置（toolbar 按鈕），'move' 為移動到任意位置（拖曳）
+     */
+    const moveOrSwapColumn = React.useCallback((sourceColumnIndex, targetColumnIndex, mode = 'move') => {
+        try {
+            const tableStructure = getTableStructure(editor, element);
+            if (!tableStructure)
+                return;
+            const { tableHeaderElement, tableBodyElement, columnCount } = tableStructure;
+            // 檢查邊界
+            if (targetColumnIndex < 0 || targetColumnIndex >= columnCount) {
+                console.warn('Target column index out of bounds');
+                return;
+            }
+            // 檢查是否為同一行
+            if (sourceColumnIndex === targetColumnIndex) {
+                return;
+            }
+            // 檢查當前行和目標行是否都是標題行或都是一般行
+            // 透過檢查第一個 cell 的 treatAsTitle 屬性來判斷
+            const checkIsTitleColumn = (container, colIndex) => {
+                if (!core.Element.isElement(container))
+                    return false;
+                for (const row of container.children) {
+                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
+                        const cell = row.children[colIndex];
+                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
+                            return !!cell.treatAsTitle;
+                        }
+                    }
+                }
+                return false;
+            };
+            // 檢查兩個 container 中的第一列來確定是否為標題行
+            let sourceIsTitle = false;
+            let targetIsTitle = false;
+            if (tableHeaderElement) {
+                sourceIsTitle = sourceIsTitle || checkIsTitleColumn(tableHeaderElement, sourceColumnIndex);
+                targetIsTitle = targetIsTitle || checkIsTitleColumn(tableHeaderElement, targetColumnIndex);
+            }
+            if (tableBodyElement) {
+                sourceIsTitle = sourceIsTitle || checkIsTitleColumn(tableBodyElement, sourceColumnIndex);
+                targetIsTitle = targetIsTitle || checkIsTitleColumn(tableBodyElement, targetColumnIndex);
+            }
+            // 標題行只能與標題行互換/移動，一般行只能與一般行互換/移動
+            if (sourceIsTitle !== targetIsTitle) {
+                console.warn(`Cannot ${mode} column between title and normal columns`);
+                return;
+            }
+            // 根據模式選擇不同的 columnWidths 處理方式
+            const currentWidths = getColumnWidths(element);
+            const newWidths = moveOrSwapColumnWidth(currentWidths, sourceColumnIndex, targetColumnIndex, mode);
+            setColumnWidths(editor, element, newWidths);
+            // 對 header 和 body 中的所有列進行操作
+            core.Editor.withoutNormalizing(editor, () => {
+                const containers = [tableHeaderElement, tableBodyElement].filter((c) => c && core.Element.isElement(c));
+                for (const container of containers) {
+                    // 對每一列進行操作
+                    for (let rowIndex = 0; rowIndex < container.children.length; rowIndex++) {
+                        const row = container.children[rowIndex];
+                        if (!core.Element.isElement(row) || !row.type.includes(table.TABLE_ROW_TYPE))
+                            continue;
+                        const containerPath = slateReact.ReactEditor.findPath(editor, container);
+                        const rowPath = [...containerPath, rowIndex];
+                        if (mode === 'swap') {
+                            // swap 邏輯：交換兩個相鄰位置
+                            if (sourceColumnIndex < targetColumnIndex) {
+                                // 向右移動：將源 cell 移到目標位置之後
+                                const sourceCellPath = [...rowPath, sourceColumnIndex];
+                                const afterTargetCellPath = [...rowPath, targetColumnIndex];
+                                core.Transforms.moveNodes(editor, {
+                                    at: sourceCellPath,
+                                    to: afterTargetCellPath,
+                                });
+                            }
+                            else {
+                                // 向左移動：將目標 cell 移到源位置之後
+                                const targetCellPath = [...rowPath, targetColumnIndex];
+                                const afterSourceCellPath = [...rowPath, sourceColumnIndex];
+                                core.Transforms.moveNodes(editor, {
+                                    at: targetCellPath,
+                                    to: afterSourceCellPath,
+                                });
+                            }
+                        }
+                        else {
+                            // move 邏輯：直接移動到目標位置
+                            const sourceCellPath = [...rowPath, sourceColumnIndex];
+                            const targetCellPath = [...rowPath, targetColumnIndex];
+                            core.Transforms.moveNodes(editor, {
+                                at: sourceCellPath,
+                                to: targetCellPath,
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.warn(`Failed to ${mode} column:`, error);
+        }
+    }, [editor, element]);
     return {
         addColumn,
         addRow,
@@ -2154,6 +2611,8 @@ function useTableActions(element) {
         unpinRow,
         isColumnPinned,
         isRowPinned,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     };
 }
 
@@ -2169,10 +2628,9 @@ function useTableStates() {
 }
 
 function Table({ attributes, children, element, }) {
-    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, } = useTableActions(element);
+    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActions(element);
     const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStates();
     const portalContainerRef = React.useRef(null);
-    // 優化表格結構計算 - 使用 getTableElements 重用邏輯
     const { columnCount, rowCount, normalCols, bodyCount, tableElements } = React.useMemo(() => {
         const elements = getTableElements(element);
         if (!elements.tableMainElement) {
@@ -2319,6 +2777,8 @@ function Table({ attributes, children, element, }) {
         pinRow,
         unpinColumn,
         unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     }), [
         addColumn,
         addRow,
@@ -2333,6 +2793,8 @@ function Table({ attributes, children, element, }) {
         pinRow,
         unpinColumn,
         unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     ]);
     const metadataValue = React.useMemo(() => ({
         tableElement: element,
@@ -2369,21 +2831,22 @@ function Table({ attributes, children, element, }) {
         tableHoveredOn,
         setTableHoveredOn,
     }), [tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn]);
-    return (React.createElement(TableActionsContext.Provider, { value: actionsValue },
-        React.createElement(TableMetadataContext.Provider, { value: metadataValue },
-            React.createElement(TableStateContext.Provider, { value: stateValue },
-                React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
-                    children,
-                    React.createElement("button", { type: "button", onClick: (evt) => {
-                            evt.preventDefault();
-                            evt.stopPropagation();
-                            setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
-                        }, onMouseDown: (evt) => {
-                            evt.preventDefault();
-                            evt.stopPropagation();
-                        }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
-                        React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })),
-                    React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false }))))));
+    return (React.createElement(TableDragProvider, null,
+        React.createElement(TableActionsContext.Provider, { value: actionsValue },
+            React.createElement(TableMetadataContext.Provider, { value: metadataValue },
+                React.createElement(TableStateContext.Provider, { value: stateValue },
+                    React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
+                        children,
+                        React.createElement("button", { type: "button", onClick: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
+                            }, onMouseDown: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                            }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
+                            React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })),
+                        React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false })))))));
 }
 
 function TableTitle(props) {
@@ -2405,6 +2868,90 @@ const TableScrollContext = React.createContext({
     scrollLeft: 0,
 });
 
+const TableDragLayer = ({ scrollRef }) => {
+    const { dragState } = useTableDragContext();
+    const [columnWidths, setColumnWidths] = React.useState([]);
+    const [rowHeights, setRowHeights] = React.useState([]);
+    const { isDragging, currentOffset } = reactDnd.useDragLayer((monitor) => ({
+        isDragging: monitor.isDragging(),
+        currentOffset: monitor.getClientOffset(),
+    }));
+    // 計算所有 column 的寬度和 row 的高度
+    React.useEffect(() => {
+        if (!scrollRef.current || !isDragging)
+            return;
+        const tableContainer = scrollRef.current;
+        const cells = tableContainer.querySelectorAll('.qdr-table__cell');
+        if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column') {
+            // 計算每個 column 的寬度
+            const widths = [];
+            const columnCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.columnIndex !== undefined;
+            });
+            const columnCount = Math.max(...columnCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.columnIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < columnCount; i++) {
+                const cellsInColumn = columnCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.columnIndex || '0', 10) === i;
+                });
+                if (cellsInColumn.length > 0) {
+                    const firstCell = cellsInColumn[0];
+                    widths[i] = firstCell.getBoundingClientRect().width;
+                }
+            }
+            setColumnWidths(widths);
+        }
+        else if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row') {
+            // 計算每個 row 的高度
+            const heights = [];
+            const rowCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.rowIndex !== undefined;
+            });
+            const rowCount = Math.max(...rowCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.rowIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < rowCount; i++) {
+                const cellsInRow = rowCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.rowIndex || '0', 10) === i;
+                });
+                if (cellsInRow.length > 0) {
+                    const firstCell = cellsInRow[0];
+                    heights[i] = firstCell.getBoundingClientRect().height;
+                }
+            }
+            setRowHeights(heights);
+        }
+    }, [isDragging, dragState, scrollRef]);
+    if (!isDragging || !dragState || !currentOffset || !scrollRef.current) {
+        return null;
+    }
+    const tableContainer = scrollRef.current;
+    const tableRect = tableContainer.getBoundingClientRect();
+    if (dragState.type) {
+        const sourceIndex = dragState.type === 'column' ? dragState.columnIndex : dragState.rowIndex;
+        const rowHeight = dragState.type === 'column' ? tableRect.height : rowHeights[sourceIndex];
+        const columnWidth = dragState.type === 'column' ? columnWidths[sourceIndex] : tableRect.width;
+        return (React.createElement("div", { className: "qdr-table__drag-overlay", style: {
+                left: tableRect.left,
+                top: tableRect.top,
+                width: columnWidth,
+                height: rowHeight,
+                transform: dragState.type === 'column'
+                    ? `translateX(${currentOffset.x - tableRect.left - columnWidth / 2}px)`
+                    : `translateY(${currentOffset.y - tableRect.top - rowHeight / 2}px)`,
+            } },
+            React.createElement("div", { className: "qdr-table__drag-overlay-content" })));
+    }
+    return null;
+};
+
 function TableMain(props) {
     const { attributes, children } = props;
     const { setConfirmModalConfig } = react.useModal();
@@ -2412,6 +2959,7 @@ function TableMain(props) {
     const { addColumn, addRow, addColumnAndRow } = useTableActionsContext();
     const { isReachMaximumColumns, isReachMaximumRows, tableElement } = useTableMetadata();
     const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
+    const { dragState } = useTableDragContext();
     // Table align functions
     const setAlign = useTableCellAlign(tableElement, editor);
     const getAlign = useTableCellAlignStatus(tableElement, editor);
@@ -2455,10 +3003,14 @@ function TableMain(props) {
         const handleScroll = () => {
             setScrollTop(scrollContainer.scrollTop);
             setScrollLeft(scrollContainer.scrollLeft);
-            // 如果正在程式化更新滾動位置，不要觸發 Slate 更新
+            // 如果正在更新滾動位置，不要觸發 Slate 更新
             if (isUpdatingScrollRef.current) {
                 return;
             }
+            // 如果正在拖曳，不要觸發 Slate 更新（避免 transform 導致事件遺失）
+            if (dragState) {
+                return;
+            }
             // 使用 debounce 來減少 Slate 更新頻率
             if (scrollUpdateTimerRef.current) {
                 clearTimeout(scrollUpdateTimerRef.current);
@@ -2481,7 +3033,7 @@ function TableMain(props) {
                 clearTimeout(scrollUpdateTimerRef.current);
             }
         };
-    }, [editor, tableElement]);
+    }, [editor, tableElement, dragState]);
     // 只在 columnWidths 改變時恢復滾動位置
     React.useEffect(() => {
         const { current: scrollContainer } = scrollRef;
@@ -2525,7 +3077,7 @@ function TableMain(props) {
     // 獲取當前 table 的 align 狀態
     const currentTableAlign = getAlign('table');
     // 根據當前 table align 狀態選擇對應的 icon
-    const getCurrentTableAlignIcon = () => {
+    const getCurrentTableAlignIcon = React.useCallback(() => {
         switch (currentTableAlign) {
             case 'left':
                 return icons.AlignLeft;
@@ -2536,7 +3088,7 @@ function TableMain(props) {
             default:
                 return icons.AlignLeft;
         }
-    };
+    }, [currentTableAlign]);
     return (React.createElement("div", { className: clsx('qdr-table__mainWrapper', {
             'qdr-table__mainWrapper--selected': (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table',
         }) },
@@ -2598,7 +3150,8 @@ function TableMain(props) {
                             width: table.columnWidthToCSS(width),
                             minWidth: table.columnWidthToCSS(width),
                         } })))),
-                    children))),
+                    children)),
+            React.createElement(TableDragLayer, { scrollRef: scrollRef })),
         React.createElement("div", { className: "qdr-table__size-indicators" }, firstRowCells === null || firstRowCells === void 0 ? void 0 : firstRowCells.map((cell, colIndex) => (React.createElement("div", { key: colIndex, className: "qdr-table__size-indicator", style: {
                 width: table.columnWidthToCSS(columnWidths[colIndex]),
                 minWidth: table.columnWidthToCSS(columnWidths[colIndex]),
@@ -2706,6 +3259,35 @@ function useColumnResize({ tableElement, columnIndex, cellRef }) {
                     }
                 });
             }
+            // 如果有 pinned columns，重新計算所有 pinned cells 的 left 位置
+            if (pinnedColumnIndices.length > 0) {
+                const allRows = tableDOMElement.querySelectorAll('tr');
+                const scrollContainer = tableDOMElement.closest('.qdr-table__scrollContainer');
+                const containerRect = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect();
+                const containerWidth = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || tableWidth;
+                // 為每個 pinned column 計算應該的絕對位置
+                pinnedColumnIndices.forEach((pinnedIndex) => {
+                    // 計算此 column 之前所有 pinned columns 的累積寬度
+                    let accumulatedLeft = 0;
+                    for (let i = 0; i < pinnedIndex; i++) {
+                        if (pinnedColumnIndices.includes(i)) {
+                            const width = newWidths[i];
+                            if (width.type === 'percentage') {
+                                const pixelWidth = (containerWidth * width.value) / 100;
+                                accumulatedLeft += pixelWidth;
+                            }
+                        }
+                    }
+                    // 更新該 column 所有 cells 的 left 位置
+                    allRows.forEach((row) => {
+                        const cells = row.querySelectorAll('td, th');
+                        const targetCell = cells[pinnedIndex];
+                        if (targetCell && targetCell.classList.contains('qdr-table__cell--pinned')) {
+                            targetCell.style.left = `${accumulatedLeft}px`;
+                        }
+                    });
+                });
+            }
             // 更新 size indicators
             const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
             if (sizeIndicatorsContainer) {
@@ -2762,11 +3344,78 @@ function useColumnResize({ tableElement, columnIndex, cellRef }) {
     };
 }
 
+const ROW_DRAG_TYPE = 'TABLE_ROW';
+const RowDragButton = ({ rowIndex, headerRowCount, style, onClick }) => {
+    const buttonRef = React.useRef(null);
+    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+    // 判斷當前 row 是否在 header 中
+    const isInHeader = rowIndex < headerRowCount;
+    const [{ isDragging }, drag, preview] = reactDnd.useDrag(() => ({
+        type: ROW_DRAG_TYPE,
+        item: () => {
+            const dragItem = { rowIndex, isInHeader };
+            setDragState({ type: 'row', rowIndex, isInHeader });
+            return dragItem;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end: () => {
+            setDragState(null);
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [rowIndex, isInHeader, setDragState, setDropTargetIndex, setDragDirection]);
+    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+    React.useEffect(() => {
+        preview(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: true });
+    }, [preview]);
+    drag(buttonRef);
+    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-row-action', {
+            'qdr-table__cell-row-action--dragging': isDragging,
+        }) },
+        React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })));
+};
+
+const COLUMN_DRAG_TYPE = 'TABLE_COLUMN';
+const ColumnDragButton = ({ columnIndex, style, onClick, checkIsTitleColumn, }) => {
+    const buttonRef = React.useRef(null);
+    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+    const isTitle = checkIsTitleColumn(columnIndex);
+    const [{ isDragging }, drag, preview] = reactDnd.useDrag(() => ({
+        type: COLUMN_DRAG_TYPE,
+        item: () => {
+            const dragItem = { columnIndex, isTitle };
+            setDragState({ type: 'column', columnIndex, isTitle });
+            return dragItem;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end: () => {
+            setDragState(null);
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [columnIndex, isTitle, setDragState, setDropTargetIndex, setDragDirection]);
+    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+    React.useEffect(() => {
+        preview(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: true });
+    }, [preview]);
+    drag(buttonRef);
+    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-column-action', {
+            'qdr-table__cell-column-action--dragging': isDragging,
+        }) },
+        React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })));
+};
+
 function TableCell(props) {
-    var _a;
+    var _a, _b;
     const { attributes, children, element } = props;
     const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
     const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+    const { moveOrSwapRow, moveOrSwapColumn } = useTableActionsContext();
+    const { dragState, dropTargetIndex, setDropTargetIndex, dragDirection, setDragDirection } = useTableDragContext();
     // Component context
     const { isHeader } = React.useContext(TableHeaderContext);
     const { scrollTop, scrollLeft, scrollRef } = React.useContext(TableScrollContext);
@@ -2775,6 +3424,20 @@ function TableCell(props) {
     const focused = useTableCellFocused(element, editor);
     const cellPosition = useTableCellPosition(element);
     const transformCellContent = useTableCellTransformContent(element, editor);
+    // Get header row count from table structure
+    const tableElements = getTableElements(tableElement);
+    const headerRowCount = ((_a = tableElements.tableHeaderElement) === null || _a === void 0 ? void 0 : _a.children.length) || 0;
+    // Helper to check if column is title column
+    const checkIsTitleColumn = React.useCallback((colIndex) => {
+        const elements = getTableElements(tableElement);
+        if (!elements.tableBodyElement)
+            return false;
+        const firstRow = elements.tableBodyElement.children[0];
+        if (!core.Element.isElement(firstRow))
+            return false;
+        const cell = firstRow.children[colIndex];
+        return core.Element.isElement(cell) && !!cell.treatAsTitle;
+    }, [tableElement]);
     // Toolbar actions
     const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
         element,
@@ -2784,10 +3447,13 @@ function TableCell(props) {
     });
     const isSelectedInSameRow = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.rowIndex;
     const isSelectedInSameColumn = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.columnIndex;
+    // 判斷是否為正在被拖曳的 row/column
+    const isDraggingThisRow = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' && dragState.rowIndex === cellPosition.rowIndex;
+    const isDraggingThisColumn = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' && dragState.columnIndex === cellPosition.columnIndex;
     const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
-    const showRowActionButton = React.useMemo(() => cellPosition.rowIndex === 0 &&
+    const showColumnActionButton = React.useMemo(() => cellPosition.rowIndex === 0 &&
         (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
-    const showColumnActionButton = React.useMemo(() => cellPosition.columnIndex === 0 &&
+    const showRowActionButton = React.useMemo(() => cellPosition.columnIndex === 0 &&
         (isSelectedInSameRow || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.rowIndex) === cellPosition.rowIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn]);
     // 用於定位 InlineToolbar 的 ref
     const cellRef = React.useRef(null);
@@ -2795,6 +3461,64 @@ function TableCell(props) {
     const [rowButtonPosition, setRowButtonPosition] = React.useState(null);
     const [columnButtonPosition, setColumnButtonPosition] = React.useState(null);
     const [cellStuckAtLeft, setCellStuckAtLeft] = React.useState(undefined);
+    const [, dropRow] = reactDnd.useDrop(() => ({
+        accept: ROW_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'row')
+                return false;
+            if (item.rowIndex === cellPosition.rowIndex)
+                return false;
+            const sourceInHeader = item.isInHeader;
+            const targetInHeader = cellPosition.rowIndex < headerRowCount;
+            return sourceInHeader === targetInHeader;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            const direction = item.rowIndex < cellPosition.rowIndex ? 'down' : 'up';
+            setDropTargetIndex(cellPosition.rowIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapRow(item.rowIndex, cellPosition.rowIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.rowIndex, headerRowCount, moveOrSwapRow, setDropTargetIndex, setDragDirection]);
+    // Drop target logic for columns
+    const [, dropColumn] = reactDnd.useDrop(() => ({
+        accept: COLUMN_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'column')
+                return false;
+            if (item.columnIndex === cellPosition.columnIndex)
+                return false;
+            const sourceIsTitle = item.isTitle;
+            const targetIsTitle = checkIsTitleColumn(cellPosition.columnIndex);
+            return sourceIsTitle === targetIsTitle;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            // 計算拖曳方向
+            const direction = item.columnIndex < cellPosition.columnIndex ? 'right' : 'left';
+            setDropTargetIndex(cellPosition.columnIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapColumn(item.columnIndex, cellPosition.columnIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.columnIndex, checkIsTitleColumn, moveOrSwapColumn, setDropTargetIndex, setDragDirection]);
+    // Combine refs
+    dropRow(dropColumn(cellRef));
     // Column resize
     const { isResizing, handleResizeStart } = useColumnResize({
         tableElement,
@@ -2874,12 +3598,40 @@ function TableCell(props) {
         }, className: clsx('qdr-table__cell', {
             'qdr-table__cell--header': isHeader || element.treatAsTitle,
             'qdr-table__cell--pinned': myColumnIsPinned,
-            'qdr-table__cell--top-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === 0),
-            'qdr-table__cell--right-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1),
-            'qdr-table__cell--bottom-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1),
-            'qdr-table__cell--left-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === 0),
+            'qdr-table__cell--top-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === 0) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === 0),
+            'qdr-table__cell--right-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === columnCount - 1),
+            'qdr-table__cell--bottom-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === rowCount - 1),
+            'qdr-table__cell--left-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === 0) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === 0),
             'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
-        }), style: myColumnIsPinned
+            'qdr-table__cell--drag-row-target-top': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'up',
+            'qdr-table__cell--drag-row-target-bottom': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'down',
+            'qdr-table__cell--drag-column-target-left': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'left',
+            'qdr-table__cell--drag-column-target-right': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'right',
+        }), "data-row-index": cellPosition.rowIndex, "data-column-index": cellPosition.columnIndex, style: myColumnIsPinned
             ? {
                 left: cellStuckAtLeft,
             }
@@ -2893,14 +3645,13 @@ function TableCell(props) {
                     top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
                     left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
                 }, iconGroups: focusToolbarIconGroups }))),
-        showColumnActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement("button", { type: "button", contentEditable: false, style: {
+        showRowActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(RowDragButton, { rowIndex: cellPosition.rowIndex, headerRowCount: headerRowCount, style: {
                     top: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.top,
                     left: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.left,
                 }, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    // Clear focus by removing selection
                     core.Transforms.deselect(editor);
                     setTableSelectedOn((prev) => {
                         if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'row' && prev.index === cellPosition.rowIndex) {
@@ -2908,17 +3659,15 @@ function TableCell(props) {
                         }
                         return { region: 'row', index: cellPosition.rowIndex };
                     });
-                }, className: "qdr-table__cell-row-action" },
-                React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })))),
-        showRowActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement("button", { type: "button", contentEditable: false, style: {
+                } }))),
+        showColumnActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(ColumnDragButton, { columnIndex: cellPosition.columnIndex, style: {
                     // pinned 時因為 sticky 所以要扣掉 scrollTop
-                    top: ((_a = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _a !== void 0 ? _a : 0) - (element.pinned ? scrollTop : 0),
+                    top: ((_b = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _b !== void 0 ? _b : 0) - (element.pinned ? scrollTop : 0),
                     left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
                 }, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    // Clear focus by removing selection
                     core.Transforms.deselect(editor);
                     setTableSelectedOn((prev) => {
                         if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'column' && prev.index === cellPosition.columnIndex) {
@@ -2926,8 +3675,7 @@ function TableCell(props) {
                         }
                         return { region: 'column', index: cellPosition.columnIndex };
                     });
-                }, className: "qdr-table__cell-column-action" },
-                React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })))),
+                }, checkIsTitleColumn: checkIsTitleColumn }))),
         isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
             React.createElement(toolbar.InlineToolbar, { className: "qdr-table__cell__inline-table-toolbar", style: {
                     top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,