v7.0.0-beta.22

.size-snapshot.json

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

CHANGELOG.md

@@ -1,13 +1,3 @@
-## 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 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.
+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.
 
 #### 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: 30,
+      minWidth: 20,
       width: 150,
-      maxWidth: 400,
+      maxWidth: 500,
     }),
     []
   )
@@ -102,20 +102,21 @@ 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[]
   >
-  useInstance: Array<(instance: TableInstance<D>) => TableInstance<D>>
+  useMain: 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.24",
+  "version": "7.0.0-beta.22",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -94,8 +94,7 @@
     "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",
-    "typescript": "^3.7.2"
+    "snapshot-diff": "^0.6.1"
   },
   "config": {
     "commitizen": {

src/hooks/useTable.js

@@ -84,8 +84,8 @@ export const useTable = (props, ...plugins) => {
     hooks: {
       columnsBeforeHeaderGroups: [],
       columnsBeforeHeaderGroupsDeps: [],
-      useInstanceBeforeDimensions: [],
-      useInstance: [],
+      useBeforeDimensions: [],
+      useMain: [],
       useRows: [],
       prepareRow: [],
       getTableProps: [],
@@ -230,24 +230,24 @@ export const useTable = (props, ...plugins) => {
   )
 
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.time('hooks.useInstanceBeforeDimensions')
+    console.time('hooks.useBeforeDimensions')
   instanceRef.current = applyHooks(
-    instanceRef.current.hooks.useInstanceBeforeDimensions,
+    instanceRef.current.hooks.useBeforeDimensions,
     instanceRef.current
   )
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.timeEnd('hooks.useInstanceBeforeDimensions')
+    console.timeEnd('hooks.useBeforeDimensions')
 
   calculateDimensions(instanceRef.current)
 
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.time('hooks.useInstance')
+    console.time('hooks.useMain')
   instanceRef.current = applyHooks(
-    instanceRef.current.hooks.useInstance,
+    instanceRef.current.hooks.useMain,
     instanceRef.current
   )
   if (process.env.NODE_ENV !== 'production' && debug)
-    console.timeEnd('hooks.useInstance')
+    console.timeEnd('hooks.useMain')
 
   // 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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useAbsoluteLayout.pluginName = 'useAbsoluteLayout'
 
-const useInstance = instance => {
+const useMain = instance => {
   const {
     totalColumnsWidth,
     hooks: {

src/plugin-hooks/useBlockLayout.js

@@ -1,10 +1,10 @@
 export const useBlockLayout = hooks => {
-  hooks.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useBlockLayout.pluginName = 'useBlockLayout'
 
-const useInstance = instance => {
+const useMain = 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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useColumnOrder.pluginName = pluginName
@@ -74,7 +74,7 @@ function columnsBeforeHeaderGroups(columns, instance) {
   return [...columnsInOrder, ...columnsCopy]
 }
 
-function useInstance(instance) {
+function useMain(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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useExpanded.pluginName = pluginName
 
 const defaultGetResetExpandedDeps = ({ data }) => [data]
 
-function useInstance(instance) {
+function useMain(instance) {
   const {
     debug,
     rows,

src/plugin-hooks/useFilters.js

@@ -109,12 +109,12 @@ reducerHandlers[pluginName] = (state, action) => {
 }
 
 export const useFilters = hooks => {
-  hooks.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useFilters.pluginName = pluginName
 
-function useInstance(instance) {
+function useMain(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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useGroupBy.pluginName = pluginName
@@ -83,7 +83,7 @@ function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) {
 
 const defaultUserAggregations = {}
 
-function useInstance(instance) {
+function useMain(instance) {
   const {
     debug,
     rows,

src/plugin-hooks/usePagination.js

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

src/plugin-hooks/useResizeColumns.js

@@ -30,15 +30,14 @@ reducerHandlers[pluginName] = (state, action) => {
   }
 
   if (action.type === actions.columnStartResizing) {
-    const { clientX, columnId, columnWidth, headerIdWidths } = action
+    const { startX, columnId, headerIdWidths } = action
 
     return {
       ...state,
       columnResizing: {
         ...state.columnResizing,
-        startX: clientX,
+        startX,
         headerIdWidths,
-        columnWidth,
         isResizingColumn: columnId,
       },
     }
@@ -46,18 +45,14 @@ reducerHandlers[pluginName] = (state, action) => {
 
   if (action.type === actions.columnResizing) {
     const { clientX } = action
-    const { startX, columnWidth, headerIdWidths } = state.columnResizing
+    const { startX, headerIdWidths } = state.columnResizing
 
     const deltaX = clientX - startX
-    const percentageDeltaX = deltaX / columnWidth
+    const percentageDeltaX = deltaX / headerIdWidths.length
 
     const newColumnWidths = {}
-
-    headerIdWidths.forEach(([headerId, headerWidth]) => {
-      newColumnWidths[headerId] = Math.max(
-        headerWidth + headerWidth * percentageDeltaX,
-        0
-      )
+    headerIdWidths.forEach(([headerId, headerWidth], index) => {
+      newColumnWidths[headerId] = Math.max(headerWidth + percentageDeltaX, 0)
     })
 
     return {
@@ -66,7 +61,7 @@ reducerHandlers[pluginName] = (state, action) => {
         ...state.columnResizing,
         columnWidths: {
           ...state.columnResizing.columnWidths,
-          ...newColumnWidths,
+          ...action.columnWidths,
         },
       },
     }
@@ -85,12 +80,12 @@ reducerHandlers[pluginName] = (state, action) => {
 }
 
 export const useResizeColumns = hooks => {
-  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
+  hooks.useBeforeDimensions.push(useBeforeDimensions)
 }
 
 useResizeColumns.pluginName = pluginName
 
-const useInstanceBeforeDimensions = instance => {
+const useBeforeDimensions = instance => {
   instance.hooks.getResizerProps = []
 
   const {
@@ -134,7 +129,6 @@ const useInstanceBeforeDimensions = 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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useRowSelect.pluginName = pluginName
@@ -147,7 +147,7 @@ function useRows(rows, instance) {
 
 const defaultGetResetSelectedRowPathsDeps = ({ data }) => [data]
 
-function useInstance(instance) {
+function useMain(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.useInstance.push(useInstance)
+  hooks.useMain.push(useMain)
 }
 
 useRowState.pluginName = pluginName
 
 const defaultGetResetRowStateDeps = ({ data }) => [data]
 
-function useInstance(instance) {
+function useMain(instance) {
   const {
     hooks,
     initialRowStateAccessor,
@@ -71,7 +71,7 @@ function useInstance(instance) {
   )
 
   const setCellState = React.useCallback(
-    (rowPath, columnId, value) => {
+    (rowPath, columnId, updater) => {
       return setRowState(
         rowPath,
         old => {
@@ -79,10 +79,10 @@ function useInstance(instance) {
             ...old,
             cellState: {
               ...old.cellState,
-              [columnId]: functionalUpdate(
-                value,
-                old.cellState[columnId] || {}
-              ),
+              [columnId]:
+                typeof updater === 'function'
+                  ? updater(old.cellState[columnId])
+                  : updater,
             },
           }
         },

src/plugin-hooks/useSortBy.js

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