Add colspan prop support out of the box, fix useTableState to be immutable, fix sorting and pagination performance,

src/hooks/usePagination.js

@@ -45,7 +45,7 @@ export const usePagination = props => {
       }),
       actions.pageChange
     )
-  }, [filters, groupBy, sortBy])
+  }, [rows, filters, groupBy, sortBy])
 
   const { pages, pageCount } = useMemo(() => {
     if (manualPagination) {

src/hooks/useSortBy.js

@@ -52,10 +52,10 @@ export const useSortBy = props => {
     const { accessor, canSortBy } = column
     column.canSortBy = accessor
       ? getFirstDefined(
-        canSortBy,
-        disableSorting === true ? false : undefined,
-        true
-      )
+          canSortBy,
+          disableSorting === true ? false : undefined,
+          true
+        )
       : false
   })
 
@@ -168,12 +168,12 @@ export const useSortBy = props => {
           {
             onClick: canSortBy
               ? e => {
-                e.persist()
-                column.toggleSortBy(
-                  undefined,
-                  !api.disableMultiSort && e.shiftKey
-                )
-              }
+                  e.persist()
+                  column.toggleSortBy(
+                    undefined,
+                    !api.disableMultiSort && e.shiftKey
+                  )
+                }
               : undefined,
             style: {
               cursor: canSortBy ? 'pointer' : undefined
@@ -247,7 +247,7 @@ export const useSortBy = props => {
     }
 
     return sortData(rows)
-  }, [rows, columns, sortBy, manualSorting])
+  }, [manualSorting, sortBy, debug, columns, rows, orderByFn, sortByFn])
 
   return {
     ...props,

src/hooks/useTable.js

@@ -91,7 +91,8 @@ export const useTable = (props, ...plugins) => {
     column.getHeaderProps = props =>
       mergeProps(
         {
-          key: ['header', column.id].join('_')
+          key: ['header', column.id].join('_'),
+          colSpan: column.columns ? column.columns.length : 1
         },
         applyPropHooks(api.hooks.getHeaderProps, column, api),
         props

src/hooks/useTableState.js

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react'
+import React from 'react'
 
 export const defaultState = {}
 
@@ -6,29 +6,38 @@ const defaultReducer = (old, newState) => newState
 
 export const useTableState = (
   initialState = {},
-  overrides = {},
-  { reducer = defaultReducer, useState: userUseState = useState } = {}
+  overrides,
+  { reducer = defaultReducer, useState: userUseState = React.useState } = {}
 ) => {
   let [state, setState] = userUseState({
     ...defaultState,
     ...initialState
   })
 
-  const overriddenState = useMemo(() => {
+  const overriddenState = React.useMemo(() => {
     const newState = {
       ...state
     }
-    Object.keys(overrides).forEach(key => {
-      newState[key] = overrides[key]
-    })
+    if (overrides) {
+      Object.keys(overrides).forEach(key => {
+        newState[key] = overrides[key]
+      })
+    }
     return newState
-  }, [state, ...Object.values(overrides)])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrides, state])
 
-  const reducedSetState = (updater, type) =>
-    setState(old => {
-      const newState = updater(old)
-      return reducer(old, newState, type)
-    })
+  const reducedSetState = React.useCallback(
+    (updater, type) =>
+      setState(old => {
+        const newState = updater(old)
+        return reducer(old, newState, type)
+      }),
+    [reducer, setState]
+  )
 
-  return [overriddenState, reducedSetState]
+  return React.useMemo(() => [overriddenState, reducedSetState], [
+    overriddenState,
+    reducedSetState
+  ])
 }