Merge branch 'master' of https://github.com/react-tools/react-table

.size-snapshot.json

@@ -17,5 +17,24 @@
         "code": 8904
       }
     }
+  },
+  "dist\\index.js": {
+    "bundled": 105386,
+    "minified": 49565,
+    "gzipped": 13008
+  },
+  "dist\\index.es.js": {
+    "bundled": 104543,
+    "minified": 48815,
+    "gzipped": 12856,
+    "treeshaked": {
+      "rollup": {
+        "code": 80,
+        "import_statements": 21
+      },
+      "webpack": {
+        "code": 8444
+      }
+    }
   }
 }

examples/column-resizing/src/App.js

@@ -35,18 +35,18 @@ const Styles = styled.div`
         border-right: 0;
       }
 
-      ${'' /* The resizer styles! */}
-
       .resizer {
         display: inline-block;
         background: blue;
-        width: 5px;
+        width: 10px;
         height: 100%;
         position: absolute;
         right: 0;
         top: 0;
         transform: translateX(50%);
         z-index: 1;
+        ${'' /* prevents from scrolling while dragging on touch devices */}
+        touch-action:none;
 
         &.isResizing {
           background: red;

sizes-cjs.json

@@ -1,4 +1,14 @@
 [
+  {
+    "timestamp": 1575985310396,
+    "files": [
+      {
+        "filename": "index.js",
+        "size": 21968,
+        "delta": 323
+      }
+    ]
+  },
   {
     "timestamp": 1575910923566,
     "files": [

sizes-es.json

@@ -1,4 +1,14 @@
 [
+  {
+    "timestamp": 1575985317929,
+    "files": [
+      {
+        "filename": "index.es.js",
+        "size": 21782,
+        "delta": 324
+      }
+    ]
+  },
   {
     "timestamp": 1575910931774,
     "files": [

src/plugin-hooks/useResizeColumns.js

@@ -24,27 +24,76 @@ export const useResizeColumns = hooks => {
 const defaultGetResizerProps = (props, instance, header) => {
   const { dispatch } = instance
 
-  const onMouseDown = (e, header) => {
+  const onResizeStart = (e, header) => {
+    let isTouchEvent = false
+    if (e.type === 'touchstart') {
+      // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (e.touches && e.touches.length > 1) {
+        return
+      }
+      isTouchEvent = true
+    }
     const headersToResize = getLeafHeaders(header)
     const headerIdWidths = headersToResize.map(d => [d.id, d.totalWidth])
 
-    const clientX = e.clientX
+    const clientX = isTouchEvent ? Math.round(e.touches[0].clientX) : e.clientX
 
-    const onMouseMove = e => {
-      const clientX = e.clientX
+    const dispatchMove = clientXPos => {
+      dispatch({ type: actions.columnResizing, clientX: clientXPos })
+    }
+    const dispatchEnd = () => dispatch({ type: actions.columnDoneResizing })
 
-      dispatch({ type: actions.columnResizing, clientX })
+    const handlersAndEvents = {
+      mouse: {
+        moveEvent: 'mousemove',
+        moveHandler: e => dispatchMove(e.clientX),
+        upEvent: 'mouseup',
+        upHandler: e => {
+          document.removeEventListener(
+            'mousemove',
+            handlersAndEvents.mouse.moveHandler
+          )
+          document.removeEventListener(
+            'mouseup',
+            handlersAndEvents.mouse.upHandler
+          )
+          dispatchEnd()
+        },
+      },
+      touch: {
+        moveEvent: 'touchmove',
+        moveHandler: e => {
+          if (e.cancelable) {
+            e.preventDefault()
+            e.stopPropagation()
+          }
+          dispatchMove(e.touches[0].clientX)
+          return false
+        },
+        upEvent: 'touchend',
+        upHandler: e => {
+          document.removeEventListener(
+            handlersAndEvents.touch.moveEvent,
+            handlersAndEvents.touch.moveHandler
+          )
+          document.removeEventListener(
+            handlersAndEvents.touch.upEvent,
+            handlersAndEvents.touch.moveHandler
+          )
+          dispatchEnd()
+        },
+      },
     }
 
-    const onMouseUp = e => {
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup', onMouseUp)
-
-      dispatch({ type: actions.columnDoneResizing })
-    }
-
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
+    const events = isTouchEvent
+      ? handlersAndEvents.touch
+      : handlersAndEvents.mouse
+    document.addEventListener(events.moveEvent, events.moveHandler, {
+      passive: false,
+    })
+    document.addEventListener(events.upEvent, events.upHandler, {
+      passive: false,
+    })
 
     dispatch({
       type: actions.columnStartResizing,
@@ -58,7 +107,8 @@ const defaultGetResizerProps = (props, instance, header) => {
   return [
     props,
     {
-      onMouseDown: e => e.persist() || onMouseDown(e, header),
+      onMouseDown: e => e.persist() || onResizeStart(e, header),
+      onTouchStart: e => e.persist() || onResizeStart(e, header),
       style: {
         cursor: 'ew-resize',
       },