v7.0.0-beta.24

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/index.js": {
-    "bundled": 96409,
-    "minified": 46532,
-    "gzipped": 12274
+    "bundled": 96769,
+    "minified": 46778,
+    "gzipped": 12295
   },
   "dist/index.es.js": {
-    "bundled": 95844,
-    "minified": 46040,
-    "gzipped": 12164,
+    "bundled": 96204,
+    "minified": 46286,
+    "gzipped": 12179,
     "treeshaked": {
       "rollup": {
         "code": 78,
         "import_statements": 21
       },
       "webpack": {
-        "code": 11105
+        "code": 11136
       }
     }
   }

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 7.0.0-beta.23
+
+- The internal `useMain` hook has been renamed to `useInstance`
+- The internal `useBeforeDimensions` hook has been renamed to `useInstanceBeforeDimensions`
+- Fixed an issue where `useResizeColumns` wasn't working properly
+
+## 7.0.0-beta.22
+
+- Fixed an issue where `useRowState` would crash due to invalid initial state attempting to spread into the new state
+
 ## 7.0.0-beta.21
 
 - Removed deprecated `defaultState` export

README.md

@@ -198,7 +198,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
 
 #### I'm still using v6, what should I do?
 
-v6 is a great library and is still the default install for `react-table`, however, I do not intend on offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.
+v6 is a great library and while it is still available for use, I do not intend on offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.
 
 #### Where are the docs for the older v6 version?
 

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>
   )

index.d.ts

@@ -75,7 +75,7 @@ export interface UseTableHooks<D extends object> {
   columnsBeforeHeaderGroupsDeps: Array<
     (deps: any[], instance: TableInstance<D>) => any[]
   >
-  useMain: Array<(instance: TableInstance<D>) => TableInstance<D>>
+  useInstance: Array<(instance: TableInstance<D>) => TableInstance<D>>
   useRows: Array<
     (rows: Array<Row<D>>, instance: TableInstance<D>) => Array<Row<D>>
   >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-beta.21",
+  "version": "7.0.0-beta.24",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -94,7 +94,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-terser": "^5.1.2",
-    "snapshot-diff": "^0.6.1"
+    "snapshot-diff": "^0.6.1",
+    "typescript": "^3.7.2"
   },
   "config": {
     "commitizen": {

src/hooks/useTable.js

@@ -84,8 +84,8 @@ export const useTable = (props, ...plugins) => {
     hooks: {
       columnsBeforeHeaderGroups: [],
       columnsBeforeHeaderGroupsDeps: [],
-      useBeforeDimensions: [],
-      useMain: [],
+      useInstanceBeforeDimensions: [],
+      useInstance: [],
       useRows: [],
       prepareRow: [],
       getTableProps: [],
@@ -230,24 +230,24 @@ export const useTable = (props, ...plugins) => {
   )
 
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.time('hooks.useBeforeDimensions')
+    console.time('hooks.useInstanceBeforeDimensions')
   instanceRef.current = applyHooks(
-    instanceRef.current.hooks.useBeforeDimensions,
+    instanceRef.current.hooks.useInstanceBeforeDimensions,
     instanceRef.current
   )
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.timeEnd('hooks.useBeforeDimensions')
+    console.timeEnd('hooks.useInstanceBeforeDimensions')
 
   calculateDimensions(instanceRef.current)
 
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.time('hooks.useMain')
+    console.time('hooks.useInstance')
   instanceRef.current = applyHooks(
-    instanceRef.current.hooks.useMain,
+    instanceRef.current.hooks.useInstance,
     instanceRef.current
   )
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.timeEnd('hooks.useMain')
+    console.timeEnd('hooks.useInstance')
 
   // Each materialized header needs to be assigned a render function and other
   // prop getter properties here.

src/plugin-hooks/useAbsoluteLayout.js

@@ -1,10 +1,10 @@
 export const useAbsoluteLayout = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useAbsoluteLayout.pluginName = 'useAbsoluteLayout'
 
-const useMain = instance => {
+const useInstance = instance => {
   const {
     totalColumnsWidth,
     hooks: {

src/plugin-hooks/useBlockLayout.js

@@ -1,10 +1,10 @@
 export const useBlockLayout = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useBlockLayout.pluginName = 'useBlockLayout'
 
-const useMain = instance => {
+const useInstance = instance => {
   const {
     totalColumnsWidth,
     hooks: { getRowProps, getHeaderGroupProps, getHeaderProps, getCellProps },

src/plugin-hooks/useColumnOrder.js

@@ -38,7 +38,7 @@ export const useColumnOrder = hooks => {
     return [...deps, instance.state.columnOrder]
   })
   hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useColumnOrder.pluginName = pluginName
@@ -74,7 +74,7 @@ function columnsBeforeHeaderGroups(columns, instance) {
   return [...columnsInOrder, ...columnsCopy]
 }
 
-function useMain(instance) {
+function useInstance(instance) {
   const { dispatch } = instance
 
   const setColumnOrder = React.useCallback(

src/plugin-hooks/useExpanded.js

@@ -54,14 +54,14 @@ reducerHandlers[pluginName] = (state, action) => {
 
 export const useExpanded = hooks => {
   hooks.getExpandedToggleProps = []
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useExpanded.pluginName = pluginName
 
 const defaultGetResetExpandedDeps = ({ data }) => [data]
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     debug,
     rows,

src/plugin-hooks/useFilters.js

@@ -109,12 +109,12 @@ reducerHandlers[pluginName] = (state, action) => {
 }
 
 export const useFilters = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useFilters.pluginName = pluginName
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     debug,
     rows,

src/plugin-hooks/useGroupBy.js

@@ -58,7 +58,7 @@ export const useGroupBy = hooks => {
     deps.push(instance.state.groupBy)
     return deps
   })
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useGroupBy.pluginName = pluginName
@@ -83,7 +83,7 @@ function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) {
 
 const defaultUserAggregations = {}
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     debug,
     rows,

src/plugin-hooks/usePagination.js

@@ -61,7 +61,7 @@ reducerHandlers[pluginName] = (state, action) => {
 }
 
 export const usePagination = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 usePagination.pluginName = pluginName
@@ -72,7 +72,7 @@ const defaultGetResetPageDeps = ({
   state: { filters, groupBy, sortBy },
 }) => [manualPagination ? null : data, filters, groupBy, sortBy]
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     rows,
     manualPagination,

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,
         },
       },
     }
@@ -80,12 +85,12 @@ reducerHandlers[pluginName] = (state, action) => {
 }
 
 export const useResizeColumns = hooks => {
-  hooks.useBeforeDimensions.push(useBeforeDimensions)
+  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
 }
 
 useResizeColumns.pluginName = pluginName
 
-const useBeforeDimensions = instance => {
+const useInstanceBeforeDimensions = instance => {
   instance.hooks.getResizerProps = []
 
   const {
@@ -129,6 +134,7 @@ const useBeforeDimensions = instance => {
     dispatch({
       type: actions.columnStartResizing,
       columnId: header.id,
+      columnWidth: header.totalWidth,
       headerIdWidths,
       clientX,
     })

src/plugin-hooks/useRowSelect.js

@@ -118,7 +118,7 @@ export const useRowSelect = hooks => {
   hooks.getToggleRowSelectedProps = []
   hooks.getToggleAllRowsSelectedProps = []
   hooks.useRows.push(useRows)
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useRowSelect.pluginName = pluginName
@@ -147,7 +147,7 @@ function useRows(rows, instance) {
 
 const defaultGetResetSelectedRowPathsDeps = ({ data }) => [data]
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     hooks,
     manualRowSelectedKey = 'isSelected',

src/plugin-hooks/useRowState.js

@@ -36,21 +36,21 @@ reducerHandlers[pluginName] = (state, action) => {
       ...state,
       rowState: {
         ...state.rowState,
-        [pathKey]: functionalUpdate(value, state.rowState[pathKey]),
+        [pathKey]: functionalUpdate(value, state.rowState[pathKey] || {}),
       },
     }
   }
 }
 
 export const useRowState = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useRowState.pluginName = pluginName
 
 const defaultGetResetRowStateDeps = ({ data }) => [data]
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     hooks,
     initialRowStateAccessor,
@@ -71,7 +71,7 @@ function useMain(instance) {
   )
 
   const setCellState = React.useCallback(
-    (rowPath, columnId, updater) => {
+    (rowPath, columnId, value) => {
       return setRowState(
         rowPath,
         old => {
@@ -79,10 +79,10 @@ function useMain(instance) {
             ...old,
             cellState: {
               ...old.cellState,
-              [columnId]:
-                typeof updater === 'function'
-                  ? updater(old.cellState[columnId])
-                  : updater,
+              [columnId]: functionalUpdate(
+                value,
+                old.cellState[columnId] || {}
+              ),
             },
           }
         },

src/plugin-hooks/useSortBy.js

@@ -149,12 +149,12 @@ defaultColumn.sortType = 'alphanumeric'
 defaultColumn.sortDescFirst = false
 
 export const useSortBy = hooks => {
-  hooks.useMain.push(useMain)
+  hooks.useInstance.push(useInstance)
 }
 
 useSortBy.pluginName = pluginName
 
-function useMain(instance) {
+function useInstance(instance) {
   const {
     debug,
     rows,