@kdcloudjs/table 1.2.2-canary.13 → 1.2.2-canary.14

package/es/table/pipeline/features/columnDrag.js

@@ -4,6 +4,7 @@ import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode, isSelectColumn } from '../../utils';
 import { FILL_COLUMN_CODE } from './autoFill';
+import { getEventCoordinates, hasMovedEnough, addPointerEventListeners, removePointerEventListeners } from './utils/touchEventUtils';
 var stateKey = 'columnDrag';
 var SCROLL_SIZE = 30;
 function disableSelect(event) {
@@ -61,251 +62,237 @@ export function columnDrag() {
             style: style
           });
         },
-        headerCellProps: mergeCellProps(col.headerCellProps, {
-          onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
+        headerCellProps: mergeCellProps(col.headerCellProps, _extends(_extends({}, isLeaf && path.length === 1 ? {
+          onMouseDown: function onMouseDown(e) {
             if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
               return;
             }
-            window.addEventListener('selectstart', disableSelect);
-            // const cx = e.clientX
-            // const width = col.width
-            // const a = startIndex
-            // const b = endIndex
-            // const newColumnDragData = [...columnDragData]
-            // let newColumn = [...columns]
-            // let newStartIndex = startIndex
-            // let endIdx = endIndex
-            var columnMoved = false;
-            var columns = pipeline.getColumns();
-            var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
-              cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
-            var cloumnsSortData = {};
-            columns.forEach(function (item, index) {
-              cloumnsSortData[item.code] = index;
-            });
-            var currentTarget = e.currentTarget;
-            var rect = e.currentTarget.parentElement.getClientRects()[0];
-            var startX = direction === 'rtl' ? rect.right : rect.left;
-            var mouseDownClientX = e.clientX;
-            var mouseDownClientY = e.clientY;
-            var moveData = [];
-            var allColumns = collectNodes(columns);
-            var tableBodyClientRect = tableBody.getBoundingClientRect();
-            var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
-            var updateScrollPosition = function updateScrollPosition(client) {
-              var clientX = client.clientX;
-              var left = tableBodyClientRect.left,
-                width = tableBodyClientRect.width;
-              if (clientX + SCROLL_SIZE >= left + width) {
-                pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
-              }
-              if (clientX - SCROLL_SIZE <= left) {
-                pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
-              }
-            };
-            function handleMouseMove(e) {
-              var client = {
-                clientX: e.clientX,
-                clientY: e.clientY
-              };
-              var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
-              var startPosition = startX - scrollDistance; // 表头最左边起点
-              var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
-              updateScrollPosition(client);
-              if (offsetDistance < 20) {
-                return;
-              } else {
-                e.stopPropagation();
-              }
-              document.body.style.userSelect = 'none';
-              currentTarget.style.cursor = 'move';
-              // 循环计算每一个的位置
-              // if (startIndex !== replaceIndex) {
-              //   const optionColumn = columns[startIndex]
-              //   const move = startIndex > replaceIndex ? 1 : -1
-              //   let index = Math.min(startIndex, replaceIndex)
-              //   while (index < Math.max(startIndex, replaceIndex)) {
-              //     const code = columns[index].code
-              //     cloumnsTranslateData[code] += move * optionColumn.width
-              //     cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
-              //     index += move
-              //   }
-              // }
-              // const opColumn = columns[startIndex]
-              // let index = Math.min(startIndex, replaceIndex)
-              // while (index <= Math.max(startIndex, replaceIndex)) {
-              //   const code = columns[index].code
-              //   if (index !== startIndex && index !== replaceIndex) {
-              //     cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
-              //     cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
-              //   }
-              //   index++
-              // }
-              // 重置位置信息
-              cloumnsTranslateData = {};
-              allColumns.forEach(function (item) {
-                cloumnsTranslateData[item.code] = 0;
-              });
-              // 计算平移位置
-              var replaceIndex = 0;
-              var totalWitdth = getColumnWidth(columns[replaceIndex]);
-              while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
-                replaceIndex++;
-                totalWitdth += getColumnWidth(columns[replaceIndex]);
-              }
-              // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
-              var startIndex;
-              columns.forEach(function (column, index) {
-                if (column.code === col.code) {
-                  startIndex = index;
-                }
-              });
-              var optionColumn = columns[startIndex];
-              var index = replaceIndex;
-              if (startIndex > replaceIndex) {
-                // 左移
-                while (index < startIndex) {
-                  var _columns$index = columns[index],
-                    code = _columns$index.code,
-                    lock = _columns$index.lock,
-                    width = _columns$index.width,
-                    children = _columns$index.children;
-                  if (enableMove({
-                    code: code,
-                    lock: lock
-                  })) {
-                    cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
-                    if (isLeafNode(columns[index])) {
-                      cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
-                    } else {
-                      cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
-                      moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
-                    }
-                    columnMoved = true;
-                  }
-                  index++;
-                }
-              } else if (startIndex < replaceIndex) {
-                // 右移
-                while (startIndex < index) {
-                  var _columns$index2 = columns[index],
-                    _code = _columns$index2.code,
-                    _lock = _columns$index2.lock,
-                    _width = _columns$index2.width,
-                    _children = _columns$index2.children;
-                  if (enableMove({
-                    code: _code,
-                    lock: _lock
-                  })) {
-                    cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
-                    if (isLeafNode(columns[index])) {
-                      cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
-                    } else {
-                      cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
-                      moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
-                    }
-                    columnMoved = true;
-                  }
-                  index--;
+            handlePointerDown(e.nativeEvent, false, e.currentTarget);
+          },
+          onTouchStart: function onTouchStart(e) {
+            // 阻止触摸事件的默认行为
+            if (e.cancelable) {
+              e.preventDefault();
+            }
+            handlePointerDown(e.nativeEvent, true, e.currentTarget);
+          }
+        } : {}), {
+          style: style
+        }))
+      });
+      // 统一的拖拽处理函数
+      function handlePointerDown(startEvent, isTouch, currentTarget) {
+        var _a;
+        window.addEventListener('selectstart', disableSelect);
+        var columnMoved = false;
+        var columns = pipeline.getColumns();
+        var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
+          cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
+        var cloumnsSortData = {};
+        columns.forEach(function (item, index) {
+          cloumnsSortData[item.code] = index;
+        });
+        var rect = (_a = currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getClientRects()[0];
+        if (!rect) return;
+        var startX = direction === 'rtl' ? rect.right : rect.left;
+        var startCoordinates = getEventCoordinates(startEvent);
+        var mouseDownClientX = startCoordinates.clientX;
+        var mouseDownClientY = startCoordinates.clientY;
+        var moveData = [];
+        var allColumns = collectNodes(columns);
+        var tableBodyClientRect = tableBody.getBoundingClientRect();
+        var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
+        var updateScrollPosition = function updateScrollPosition(client) {
+          var clientX = client.clientX;
+          var left = tableBodyClientRect.left,
+            width = tableBodyClientRect.width;
+          if (clientX + SCROLL_SIZE >= left + width) {
+            pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
+          }
+          if (clientX - SCROLL_SIZE <= left) {
+            pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
+          }
+        };
+        function handlePointerMove(e) {
+          // 触摸事件需要阻止默认行为，防止页面滚动
+          if (isTouch && e.cancelable) {
+            e.preventDefault();
+          }
+          var coordinates = getEventCoordinates(e);
+          var client = {
+            clientX: coordinates.clientX,
+            clientY: coordinates.clientY
+          };
+          var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
+          var startPosition = startX - scrollDistance; // 表头最左边起点
+          var offsetDistance = direction === 'rtl' ? startPosition - coordinates.clientX : coordinates.clientX - startPosition;
+          updateScrollPosition(client);
+          if (offsetDistance < 20) {
+            return;
+          } else {
+            e.stopPropagation();
+          }
+          document.body.style.userSelect = 'none';
+          currentTarget.style.cursor = 'move';
+          // 重置位置信息
+          cloumnsTranslateData = {};
+          allColumns.forEach(function (item) {
+            cloumnsTranslateData[item.code] = 0;
+          });
+          // 计算平移位置
+          var replaceIndex = 0;
+          var totalWitdth = getColumnWidth(columns[replaceIndex]);
+          while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
+            replaceIndex++;
+            totalWitdth += getColumnWidth(columns[replaceIndex]);
+          }
+          // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
+          var startIndex;
+          columns.forEach(function (column, index) {
+            if (column.code === col.code) {
+              startIndex = index;
+            }
+          });
+          var optionColumn = columns[startIndex];
+          var index = replaceIndex;
+          if (startIndex > replaceIndex) {
+            // 左移
+            while (index < startIndex) {
+              var _columns$index = columns[index],
+                code = _columns$index.code,
+                lock = _columns$index.lock,
+                width = _columns$index.width,
+                children = _columns$index.children;
+              if (enableMove({
+                code: code,
+                lock: lock
+              })) {
+                cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
+                if (isLeafNode(columns[index])) {
+                  cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
+                } else {
+                  cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
+                  moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
                 }
+                columnMoved = true;
               }
-              window.requestAnimationFrame(function () {
-                pipeline.setStateAtKey(stateKey, {
-                  cloumnsTranslateData: cloumnsTranslateData
-                });
-                moveData = [startIndex, replaceIndex];
-              });
+              index++;
             }
-            function handleMouseUp(e) {
-              document.body.removeEventListener('mousemove', handleMouseMove);
-              document.body.removeEventListener('mouseup', handleMouseUp);
-              window.removeEventListener('selectstart', disableSelect);
-              if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
-                e.stopPropagation(); // 存在移动就阻止冒泡
-                currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
+          } else if (startIndex < replaceIndex) {
+            // 右移
+            while (startIndex < index) {
+              var _columns$index2 = columns[index],
+                _code = _columns$index2.code,
+                _lock = _columns$index2.lock,
+                _width = _columns$index2.width,
+                _children = _columns$index2.children;
+              if (enableMove({
+                code: _code,
+                lock: _lock
+              })) {
+                cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
+                if (isLeafNode(columns[index])) {
+                  cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
+                } else {
+                  cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
+                  moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
+                }
+                columnMoved = true;
               }
+              index--;
+            }
+          }
+          window.requestAnimationFrame(function () {
+            pipeline.setStateAtKey(stateKey, {
+              cloumnsTranslateData: cloumnsTranslateData
+            });
+            moveData = [startIndex, replaceIndex];
+          });
+        }
+        function handlePointerUp(e) {
+          removePointerEventListeners(document.body, {
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp
+          }, isTouch);
+          window.removeEventListener('selectstart', disableSelect);
+          var endCoordinates = getEventCoordinates(e);
+          if (hasMovedEnough(mouseDownClientX, mouseDownClientY, endCoordinates.clientX, endCoordinates.clientY)) {
+            e.stopPropagation(); // 存在移动就阻止冒泡
+            currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
+          }
 
-              window.requestAnimationFrame(function () {
-                // 取消阻止列头点击事件
-                currentTarget.removeEventListener('click', stopClickPropagation);
-                currentTarget = null;
-                var _moveData = moveData,
-                  _moveData2 = _slicedToArray(_moveData, 2),
-                  startIndex = _moveData2[0],
-                  replaceIndex = _moveData2[1];
-                var optionColumn = columns[startIndex];
-                // const move = startIndex > replaceIndex ? 1 : -1
-                // let index = Math.min(startIndex, replaceIndex)
-                // while (index < Math.max(startIndex, replaceIndex) && index > 0) {
-                //   const code = columns[index].code
-                //   cloumnsSortData[optionColumn.code] -= move
-                //   cloumnsSortData[code] += move
-                //   index += move
-                // }
-                var index = replaceIndex;
-                if (startIndex > replaceIndex) {
-                  // 左移
-                  while (index < startIndex) {
-                    var _columns$index3 = columns[index],
-                      code = _columns$index3.code,
-                      lock = _columns$index3.lock;
-                    if (enableMove({
-                      code: code,
-                      lock: lock
-                    })) {
-                      cloumnsSortData[code] += 1;
-                      cloumnsSortData[optionColumn.code] -= 1;
-                      columnMoved = true;
-                    }
-                    index++;
-                  }
-                } else if (startIndex < replaceIndex) {
-                  // 右移
-                  while (index > startIndex) {
-                    var _columns$index4 = columns[index],
-                      _code2 = _columns$index4.code,
-                      _lock2 = _columns$index4.lock;
-                    if (enableMove({
-                      code: _code2,
-                      lock: _lock2
-                    })) {
-                      cloumnsSortData[_code2] -= 1;
-                      cloumnsSortData[optionColumn.code] += 1;
-                      columnMoved = true;
-                    }
-                    index--;
-                  }
+          window.requestAnimationFrame(function () {
+            // 取消阻止列头点击事件
+            currentTarget.removeEventListener('click', stopClickPropagation);
+            currentTarget = null;
+            var _moveData = moveData,
+              _moveData2 = _slicedToArray(_moveData, 2),
+              startIndex = _moveData2[0],
+              replaceIndex = _moveData2[1];
+            var optionColumn = columns[startIndex];
+            var index = replaceIndex;
+            if (startIndex > replaceIndex) {
+              // 左移
+              while (index < startIndex) {
+                var _columns$index3 = columns[index],
+                  code = _columns$index3.code,
+                  lock = _columns$index3.lock;
+                if (enableMove({
+                  code: code,
+                  lock: lock
+                })) {
+                  cloumnsSortData[code] += 1;
+                  cloumnsSortData[optionColumn.code] -= 1;
+                  columnMoved = true;
                 }
-                var onColumnDragStopped = opts.onColumnDragStopped;
-                // 拖拽结束返回列顺序
-                if (onColumnDragStopped) {
-                  var _context;
-                  var isRowDragColumn = function isRowDragColumn(code) {
-                    var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
-                    return code === rowDragColumnKey;
-                  };
-                  var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (column) {
-                    return column.code !== FILL_COLUMN_CODE && !isRowDragColumn(column.code) && !isSelectColumn(column);
-                  });
-                  // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
-                  onColumnDragStopped(columnMoved, newColumns);
+                index++;
+              }
+            } else if (startIndex < replaceIndex) {
+              // 右移
+              while (index > startIndex) {
+                var _columns$index4 = columns[index],
+                  _code2 = _columns$index4.code,
+                  _lock2 = _columns$index4.lock;
+                if (enableMove({
+                  code: _code2,
+                  lock: _lock2
+                })) {
+                  cloumnsSortData[_code2] -= 1;
+                  cloumnsSortData[optionColumn.code] += 1;
+                  columnMoved = true;
                 }
-                pipeline.setStateAtKey(stateKey, {
-                  cloumnsTranslateData: null
-                });
+                index--;
+              }
+            }
+            var onColumnDragStopped = opts.onColumnDragStopped;
+            // 拖拽结束返回列顺序
+            if (onColumnDragStopped) {
+              var _context;
+              var isRowDragColumn = function isRowDragColumn(code) {
+                var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
+                return code === rowDragColumnKey;
+              };
+              var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (column) {
+                return column.code !== FILL_COLUMN_CODE && !isRowDragColumn(column.code) && !isSelectColumn(column);
               });
-              document.body.style.userSelect = '';
-              currentTarget.style.opacity = '';
-              currentTarget.style.cursor = '';
+              // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
+              onColumnDragStopped(columnMoved, newColumns);
             }
-            var onColumnDragStart = opts.onColumnDragStart;
-            onColumnDragStart && onColumnDragStart(col);
-            document.body.addEventListener('mousemove', handleMouseMove);
-            document.body.addEventListener('mouseup', handleMouseUp);
-          },
-          style: style
-        })
-      });
+            pipeline.setStateAtKey(stateKey, {
+              cloumnsTranslateData: null
+            });
+          });
+          document.body.style.userSelect = '';
+          currentTarget.style.opacity = '';
+          currentTarget.style.cursor = '';
+        }
+        var onColumnDragStart = opts.onColumnDragStart;
+        onColumnDragStart && onColumnDragStart(col);
+        addPointerEventListeners(document.body, {
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerUp
+        }, isTouch);
+      }
     }));
   };
 }
@@ -333,13 +320,4 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
       moveAllChildren(children, cloumnsTranslateData, width);
     }
   });
-}
-function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
-  var xDiff = mouseUpClientX - mouseDownClientX;
-  var yDiff = mouseUpClientY - mouseDownClientY;
-  // 鼠标点按和松开的偏移量大于5px，认为存在移动
-  if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
-    return true;
-  }
-  return false;
 }

package/es/table/pipeline/features/columnResizeWidth.js

@@ -12,6 +12,7 @@ import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from
 import { internals } from '../../internals';
 import { Classes } from '../../base/styles';
 import { swapRTLDirection } from '../../base/utils';
+import { getEventCoordinates } from './utils/touchEventUtils';
 var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  ", ": -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    ", ": calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])), function (props) {
   return swapRTLDirection(props.direction, 'right');
 }, function (props) {
@@ -65,10 +66,12 @@ export function columnResize() {
       var _a;
       (_a = opts.doubleClickCallback) === null || _a === void 0 ? void 0 : _a.call(opts, e, col);
     };
-    var handleMouseDown = function handleMouseDown(e, col) {
+    // 通用的拖拽处理逻辑
+    var handleResize = function handleResize(startEvent, col, eventType) {
       window.addEventListener('selectstart', disableSelect);
       var changedColumnSize = {};
-      var startX = e.clientX;
+      var startCoordinates = getEventCoordinates(startEvent);
+      var startX = startCoordinates.clientX;
       var children = col.children,
         code = col.code,
         _col$features = col.features,
@@ -79,9 +82,22 @@ export function columnResize() {
       var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
       var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
       var recordColumnSize = columnSize;
-      e.stopPropagation();
-      var nextSize$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
-        var movingX = e.clientX;
+      // 根据事件类型选择不同的事件监听器
+      var moveEventName = eventType === 'mouse' ? 'mousemove' : 'touchmove';
+      var endEventName = eventType === 'mouse' ? 'mouseup' : 'touchend';
+      var moveEventOptions = eventType === 'touch' ? {
+        passive: false
+      } : undefined;
+      var endEventOptions = eventType === 'touch' ? {
+        passive: false
+      } : undefined;
+      var nextSize$ = fromEvent(window, moveEventName, moveEventOptions).pipe(op.takeUntil(fromEvent(window, endEventName, endEventOptions)), op.map(function (e) {
+        // 触摸事件需要阻止默认行为，防止页面滚动
+        if (eventType === 'touch' && e.cancelable) {
+          e.preventDefault();
+        }
+        var coordinates = getEventCoordinates(e);
+        var movingX = coordinates.clientX;
         var nextColumnSize = _extends({}, columnSize);
         var deltaSum = pipeline.ctx.direction === 'rtl' ? startX - movingX : movingX - startX;
         var deltaRemaining = deltaSum;
@@ -139,6 +155,19 @@ export function columnResize() {
         }
       });
     };
+    var handleMouseDown = function handleMouseDown(e, col) {
+      e.stopPropagation();
+      handleResize(e.nativeEvent, col, 'mouse');
+    };
+    // 触摸事件处理函数
+    var handleTouchStart = function handleTouchStart(e, col) {
+      // 阻止触摸事件的默认行为
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+      handleResize(e.nativeEvent, col, 'touch');
+    };
     var isGroup = isGroupColumn(pipeline.getColumns());
     return pipeline.mapColumns(makeRecursiveMapper(function (col) {
       var _a;
@@ -156,6 +185,9 @@ export function columnResize() {
           },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
+          },
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, col);
           }
         }) : /*#__PURE__*/React.createElement(TableHeaderCellResize, {
           direction: pipeline.ctx.direction,
@@ -165,6 +197,9 @@ export function columnResize() {
           },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
+          },
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, col);
           }
         }))),
         headerCellProps: mergeCellProps(col.headerCellProps, {