Fix column resizing

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/index.js": {
-    "bundled": 96601,
-    "minified": 46726,
-    "gzipped": 12271
+    "bundled": 96769,
+    "minified": 46778,
+    "gzipped": 12295
   },
   "dist/index.es.js": {
-    "bundled": 96036,
-    "minified": 46234,
-    "gzipped": 12155,
+    "bundled": 96204,
+    "minified": 46286,
+    "gzipped": 12179,
     "treeshaked": {
       "rollup": {
         "code": 78,
         "import_statements": 21
       },
       "webpack": {
-        "code": 11109
+        "code": 11136
       }
     }
   }

examples/column-resizing/src/App.js

@@ -59,9 +59,9 @@ const Styles = styled.div`
 function Table({ columns, data }) {
   const defaultColumn = React.useMemo(
     () => ({
-      minWidth: 20,
+      minWidth: 30,
       width: 150,
-      maxWidth: 500,
+      maxWidth: 400,
     }),
     []
   )
@@ -102,21 +102,20 @@ function Table({ columns, data }) {
       </div>
 
       <div {...getTableBodyProps()}>
-        {rows.map(
-          (row, i) => {
-            prepareRow(row);
-            return (
-              <div {...row.getRowProps()} className="tr">
-                {row.cells.map(cell => {
-                  return (
-                    <div {...cell.getCellProps()} className="td">
-                      {cell.render('Cell')}
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-        )}
+        {rows.map((row, i) => {
+          prepareRow(row)
+          return (
+            <div {...row.getRowProps()} className="tr">
+              {row.cells.map(cell => {
+                return (
+                  <div {...cell.getCellProps()} className="td">
+                    {cell.render('Cell')}
+                  </div>
+                )
+              })}
+            </div>
+          )
+        })}
       </div>
     </div>
   )

src/plugin-hooks/useResizeColumns.js

@@ -30,14 +30,15 @@ reducerHandlers[pluginName] = (state, action) => {
   }
 
   if (action.type === actions.columnStartResizing) {
-    const { startX, columnId, headerIdWidths } = action
+    const { clientX, columnId, columnWidth, headerIdWidths } = action
 
     return {
       ...state,
       columnResizing: {
         ...state.columnResizing,
-        startX,
+        startX: clientX,
         headerIdWidths,
+        columnWidth,
         isResizingColumn: columnId,
       },
     }
@@ -45,14 +46,18 @@ reducerHandlers[pluginName] = (state, action) => {
 
   if (action.type === actions.columnResizing) {
     const { clientX } = action
-    const { startX, headerIdWidths } = state.columnResizing
+    const { startX, columnWidth, headerIdWidths } = state.columnResizing
 
     const deltaX = clientX - startX
-    const percentageDeltaX = deltaX / headerIdWidths.length
+    const percentageDeltaX = deltaX / columnWidth
 
     const newColumnWidths = {}
-    headerIdWidths.forEach(([headerId, headerWidth], index) => {
-      newColumnWidths[headerId] = Math.max(headerWidth + percentageDeltaX, 0)
+
+    headerIdWidths.forEach(([headerId, headerWidth]) => {
+      newColumnWidths[headerId] = Math.max(
+        headerWidth + headerWidth * percentageDeltaX,
+        0
+      )
     })
 
     return {
@@ -61,7 +66,7 @@ reducerHandlers[pluginName] = (state, action) => {
         ...state.columnResizing,
         columnWidths: {
           ...state.columnResizing.columnWidths,
-          ...action.columnWidths,
+          ...newColumnWidths,
         },
       },
     }
@@ -129,6 +134,7 @@ const useInstanceBeforeDimensions = instance => {
     dispatch({
       type: actions.columnStartResizing,
       columnId: header.id,
+      columnWidth: header.totalWidth,
       headerIdWidths,
       clientX,
     })