v7.0.0-rc.14

.size-snapshot.json

@@ -1,39 +1,39 @@
 {
   "dist/index.js": {
-    "bundled": 107213,
-    "minified": 49659,
-    "gzipped": 13264
+    "bundled": 108756,
+    "minified": 50398,
+    "gzipped": 13421
   },
   "dist/index.es.js": {
-    "bundled": 106302,
-    "minified": 48847,
-    "gzipped": 13099,
+    "bundled": 107845,
+    "minified": 49586,
+    "gzipped": 13253,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8249
+        "code": 8168
       }
     }
   },
   "dist\\index.js": {
-    "bundled": 105386,
-    "minified": 49565,
-    "gzipped": 13008
+    "bundled": 104977,
+    "minified": 48560,
+    "gzipped": 13057
   },
   "dist\\index.es.js": {
-    "bundled": 104543,
-    "minified": 48815,
-    "gzipped": 12856,
+    "bundled": 104090,
+    "minified": 47770,
+    "gzipped": 12900,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8444
+        "code": 8227
       }
     }
   }

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 7.0.0-rc.14
+
+- Changed the function signature for all propGetter hooks to accept a single object of named meta properties instead of a variable length of meta arguments. The user props object has also been added as a property to all prop getters. For example, `hooks.getRowProps.push((props, instance, row) => [...])` is now written `hooks.getRowProps.push((props, { instance, row, userProps }) => [...])`
+- Changed the function signature for all reduceHooks accept a single object of named meta properties instead of a variable length of meta arguments. For example, `hooks.flatColumns.push((flatColumns, instance) => flatColumns)` is now written `hooks.flatColumns.push((flatColumns, { instance }) => flatColumns)`
+- Changed the function signature for all loopHooks accept a single object of named meta properties instead of a variable length of meta arguments. For example, `hooks.prepareRow.push((row, instance) => void)` is now written `hooks.prepareRow.push((row { instance }) => void)`
+
+## 7.0.0-rc.13
+
+- Added the `useControlledState` hook for plugins to manipulate the final state of the table similar to how users can
+- Fixed an issue where column hiding wasn't working properly.
+
+## 7.0.0-rc.12
+
+- Fixed an issue where removing a grouped column would result in a crash
+
 ## 7.0.0-rc.11
 
 - Fixed an issue where plugins using the `columns` hook were not getting decorated properly

docs/api/useTable.md

@@ -25,7 +25,7 @@ The following options are supported via the main options object passed to `useTa
   - Optional
   - The initial state object for hidden columns
   - If a column's ID is contained in this array, it will be hidden
-- `reducer: Function(newState, action, prevState) => newState`
+- `stateReducer: Function(newState, action, prevState) => newState`
   - Optional
   - With every action that is dispatched to the table's internal `React.useReducer` instance, this reducer is called and is allowed to modify the final state object for updating.
   - It is passed the `newState`, `action`, and `prevState` and is expected to either return the `newState` or a modified version of the `newState`

examples/column-hiding/src/App.js

@@ -71,8 +71,10 @@ function Table({ columns, data }) {
         </div>
         {flatColumns.map(column => (
           <div key={column.id}>
-            <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
-            {column.id}
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
+              {column.id}
+            </label>
           </div>
         ))}
         <br />

examples/grouping-column/src/App.js

@@ -33,6 +33,20 @@ const Styles = styled.div`
   }
 `
 
+function useControlledState(state, { instance }) {
+  return React.useMemo(() => {
+    if (state.groupBy.length) {
+      return {
+        ...state,
+        hiddenColumns: [...state.hiddenColumns, ...state.groupBy].filter(
+          (d, i, all) => all.indexOf(d) === i
+        ),
+      }
+    }
+    return state
+  }, [state])
+}
+
 function Table({ columns, data }) {
   const {
     getTableProps,
@@ -40,7 +54,7 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
-    state: { groupBy, expanded },
+    state,
   } = useTable(
     {
       columns,
@@ -50,7 +64,8 @@ function Table({ columns, data }) {
     useExpanded,
     // Our custom plugin to add the expander column
     hooks => {
-      hooks.flatColumns.push((columns, instance) => {
+      hooks.useControlledState.push(useControlledState)
+      hooks.flatColumns.push((columns, { instance }) => {
         if (!instance.state.groupBy.length) {
           return columns
         }
@@ -100,7 +115,7 @@ function Table({ columns, data }) {
               return null
             },
           },
-          ...columns.map(d => ({ ...d, isVisible: !d.isGrouped })),
+          ...columns,
         ]
       })
     }
@@ -113,7 +128,7 @@ function Table({ columns, data }) {
   return (
     <>
       <pre>
-        <code>{JSON.stringify({ groupBy, expanded: expanded }, null, 2)}</code>
+        <code>{JSON.stringify({ state }, null, 2)}</code>
       </pre>
       <Legend />
       <table {...getTableProps()}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-rc.11",
+  "version": "7.0.0-rc.14",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

sizes-cjs.json

@@ -1,11 +1,11 @@
 [
   {
-    "timestamp": 1576640592762,
+    "timestamp": 1576690899177,
     "files": [
       {
         "filename": "index.js",
-        "size": 22354,
-        "delta": 312
+        "size": 22438,
+        "delta": 35
       }
     ]
   }

sizes-es.json

@@ -1,11 +1,11 @@
 [
   {
-    "timestamp": 1576640599046,
+    "timestamp": 1576690906689,
     "files": [
       {
         "filename": "index.es.js",
-        "size": 22153,
-        "delta": 305
+        "size": 22235,
+        "delta": 33
       }
     ]
   }

src/hooks/useColumnVisibility.js

@@ -19,7 +19,7 @@ export const useColumnVisibility = hooks => {
 
   hooks.stateReducers.push(reducer)
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
-  hooks.headerGroupsDeps.push((deps, instance) => [
+  hooks.headerGroupsDeps.push((deps, { instance }) => [
     ...deps,
     instance.state.hiddenColumns,
   ])
@@ -28,7 +28,7 @@ export const useColumnVisibility = hooks => {
 
 useColumnVisibility.pluginName = 'useColumnVisibility'
 
-const defaultGetToggleHiddenProps = (props, instance, column) => [
+const defaultGetToggleHiddenProps = (props, { column }) => [
   props,
   {
     onChange: e => {
@@ -42,7 +42,7 @@ const defaultGetToggleHiddenProps = (props, instance, column) => [
   },
 ]
 
-const defaultGetToggleHideAllColumnsProps = (props, instance) => [
+const defaultGetToggleHideAllColumnsProps = (props, { instance }) => [
   props,
   {
     onChange: e => {
@@ -79,6 +79,8 @@ function reducer(state, action, previousState, instance) {
         ? action.value
         : !state.hiddenColumns.includes(action.columnId)
 
+    console.log(action, should)
+
     const hiddenColumns = should
       ? [...state.hiddenColumns, action.columnId]
       : state.hiddenColumns.filter(d => d !== action.columnId)
@@ -121,10 +123,7 @@ function useInstanceBeforeDimensions(instance) {
   }
 
   const handleColumn = (column, parentVisible) => {
-    column.isVisible =
-      typeof column.isVisible !== 'undefined'
-        ? column.isVisible
-        : parentVisible && !hiddenColumns.includes(column.id)
+    column.isVisible = parentVisible && !hiddenColumns.includes(column.id)
 
     let totalVisibleHeaderCount = 0
 
@@ -185,7 +184,7 @@ function useInstance(instance) {
 
   const getToggleHideAllColumnsProps = makePropGetter(
     getToggleHideAllColumnsPropsHooks(),
-    getInstance()
+    { instance: getInstance() }
   )
 
   // Snapshot hook and disallow more from being added
@@ -203,11 +202,10 @@ function useInstance(instance) {
       })
     }
 
-    column.getToggleHiddenProps = makePropGetter(
-      getToggleHiddenPropsHooks(),
-      getInstance(),
-      column
-    )
+    column.getToggleHiddenProps = makePropGetter(getToggleHiddenPropsHooks(), {
+      instance: getInstance(),
+      column,
+    })
   })
 
   Object.assign(instance, {

src/hooks/useTable.js

@@ -133,8 +133,18 @@ export const useTable = (props, ...plugins) => {
     reducer(initialState, { type: actions.init })
   )
 
+  // Snapshot hook and disallow more from being added
+  const getUseControlledStateHooks = useConsumeHookGetter(
+    getInstance().hooks,
+    'useControlledState'
+  )
+
   // Allow the user to control the final state with hooks
-  const state = useControlledState(reducerState)
+  const state = reduceHooks(
+    [...getUseControlledStateHooks(), useControlledState],
+    reducerState,
+    { instance: getInstance() }
+  )
 
   Object.assign(getInstance(), {
     state,
@@ -154,7 +164,9 @@ export const useTable = (props, ...plugins) => {
   let columns = React.useMemo(
     () =>
       decorateColumnTree(
-        reduceHooks(getColumnsHooks(), userColumns, getInstance()),
+        reduceHooks(getColumnsHooks(), userColumns, {
+          instance: getInstance(),
+        }),
         defaultColumn
       ),
     [
@@ -163,7 +175,7 @@ export const useTable = (props, ...plugins) => {
       getInstance,
       userColumns,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getColumnsDepsHooks(), [], getInstance()),
+      ...reduceHooks(getColumnsDepsHooks(), [], { instance: getInstance() }),
     ]
   )
 
@@ -253,13 +265,14 @@ export const useTable = (props, ...plugins) => {
   // have been access, and allow hooks to decorate
   // those columns (and trigger this memoization via deps)
   flatColumns = React.useMemo(
-    () => reduceHooks(flatColumnsHooks(), flatColumns, getInstance()),
+    () =>
+      reduceHooks(flatColumnsHooks(), flatColumns, { instance: getInstance() }),
     [
       flatColumns,
       flatColumnsHooks,
       getInstance,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(flatColumnsDepsHooks(), [], getInstance()),
+      ...reduceHooks(flatColumnsDepsHooks(), [], { instance: getInstance() }),
     ]
   )
 
@@ -291,7 +304,7 @@ export const useTable = (props, ...plugins) => {
       getHeaderGroups,
       getInstance,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHeaderGroupsDeps(), [], getInstance()),
+      ...reduceHooks(getHeaderGroupsDeps(), [], { instance: getInstance() }),
     ]
   )
 
@@ -357,18 +370,16 @@ export const useTable = (props, ...plugins) => {
       column.render = makeRenderer(getInstance(), column)
 
       // Give columns/headers a default getHeaderProps
-      column.getHeaderProps = makePropGetter(
-        getHeaderPropsHooks(),
-        getInstance(),
-        column
-      )
+      column.getHeaderProps = makePropGetter(getHeaderPropsHooks(), {
+        instance: getInstance(),
+        column,
+      })
 
       // Give columns/headers a default getFooterProps
-      column.getFooterProps = makePropGetter(
-        getFooterPropsHooks(),
-        getInstance(),
-        column
-      )
+      column.getFooterProps = makePropGetter(getFooterPropsHooks(), {
+        instance: getInstance(),
+        column,
+      })
     }
   )
 
@@ -405,16 +416,12 @@ export const useTable = (props, ...plugins) => {
       if (headerGroup.headers.length) {
         headerGroup.getHeaderGroupProps = makePropGetter(
           getHeaderGroupPropsHooks(),
-          getInstance(),
-          headerGroup,
-          i
+          { instance: getInstance(), headerGroup, index: i }
         )
 
         headerGroup.getFooterGroupProps = makePropGetter(
           getFooterGroupPropsHooks(),
-          getInstance(),
-          headerGroup,
-          i
+          { instance: getInstance(), headerGroup, index: i }
         )
 
         return true
@@ -431,11 +438,9 @@ export const useTable = (props, ...plugins) => {
   // Snapshot hook and disallow more from being added
   const getUseRowsHooks = useConsumeHookGetter(getInstance().hooks, 'useRows')
 
-  getInstance().rows = reduceHooks(
-    getUseRowsHooks(),
-    getInstance().rows,
-    getInstance()
-  )
+  getInstance().rows = reduceHooks(getUseRowsHooks(), getInstance().rows, {
+    instance: getInstance(),
+  })
 
   // The prepareRow function is absolutely necessary and MUST be called on
   // any rows the user wishes to be displayed.
@@ -463,7 +468,10 @@ export const useTable = (props, ...plugins) => {
 
   getInstance().prepareRow = React.useCallback(
     row => {
-      row.getRowProps = makePropGetter(getRowPropsHooks(), getInstance(), row)
+      row.getRowProps = makePropGetter(getRowPropsHooks(), {
+        instance: getInstance(),
+        row,
+      })
 
       // Build the visible cells for each row
       row.allCells = flatColumns.map(column => {
@@ -474,11 +482,10 @@ export const useTable = (props, ...plugins) => {
         }
 
         // Give each cell a getCellProps base
-        cell.getCellProps = makePropGetter(
-          getCellPropsHooks(),
-          getInstance(),
-          cell
-        )
+        cell.getCellProps = makePropGetter(getCellPropsHooks(), {
+          instance: getInstance(),
+          cell,
+        })
 
         // Give each cell a renderer function (supports multiple renderers)
         cell.render = makeRenderer(getInstance(), column, {
@@ -489,10 +496,12 @@ export const useTable = (props, ...plugins) => {
         return cell
       })
 
-      row.cells = reduceHooks(cellsHooks(), row.allCells, getInstance())
+      row.cells = reduceHooks(cellsHooks(), row.allCells, {
+        instance: getInstance(),
+      })
 
       // need to apply any row specific hooks (useExpanded requires this)
-      loopHooks(getPrepareRowHooks(), row, getInstance())
+      loopHooks(getPrepareRowHooks(), row, { instance: getInstance() })
     },
     [
       getRowPropsHooks,
@@ -510,10 +519,9 @@ export const useTable = (props, ...plugins) => {
     'getTableProps'
   )
 
-  getInstance().getTableProps = makePropGetter(
-    getTablePropsHooks(),
-    getInstance()
-  )
+  getInstance().getTableProps = makePropGetter(getTablePropsHooks(), {
+    instance: getInstance(),
+  })
 
   // Snapshot hook and disallow more from being added
   const getTableBodyPropsHooks = useConsumeHookGetter(
@@ -521,10 +529,9 @@ export const useTable = (props, ...plugins) => {
     'getTableBodyProps'
   )
 
-  getInstance().getTableBodyProps = makePropGetter(
-    getTableBodyPropsHooks(),
-    getInstance()
-  )
+  getInstance().getTableBodyProps = makePropGetter(getTableBodyPropsHooks(), {
+    instance: getInstance(),
+  })
 
   // Snapshot hook and disallow more from being added
   const getUseFinalInstanceHooks = useConsumeHookGetter(

src/makeDefaultPluginHooks.js

@@ -1,33 +1,33 @@
 const defaultCells = cell => cell.filter(d => d.column.isVisible)
 
-const defaultGetHeaderProps = (props, instance, column) => ({
+const defaultGetHeaderProps = (props, { column }) => ({
   key: `header_${column.id}`,
   colSpan: column.totalVisibleHeaderCount,
   ...props,
 })
 
-const defaultGetFooterProps = (props, instance, column) => ({
+const defaultGetFooterProps = (props, { column }) => ({
   key: `footer_${column.id}`,
   colSpan: column.totalVisibleHeaderCount,
   ...props,
 })
 
-const defaultGetHeaderGroupProps = (props, instance, headerGroup, index) => ({
+const defaultGetHeaderGroupProps = (props, { index }) => ({
   key: `headerGroup_${index}`,
   ...props,
 })
 
-const defaultGetFooterGroupProps = (props, instance, headerGroup, index) => ({
+const defaultGetFooterGroupProps = (props, { index }) => ({
   key: `footerGroup_${index}`,
   ...props,
 })
 
-const defaultGetRowProps = (props, instance, row) => ({
+const defaultGetRowProps = (props, { row }) => ({
   key: `row_${row.id}`,
   ...props,
 })
 
-const defaultGetCellProps = (props, instance, cell) => ({
+const defaultGetCellProps = (props, { cell }) => ({
   ...props,
   key: `cell_${cell.row.id}_${cell.column.id}`,
 })
@@ -36,6 +36,7 @@ export default function makeDefaultPluginHooks() {
   return {
     useOptions: [],
     stateReducers: [],
+    useControlledState: [],
     columns: [],
     columnsDeps: [],
     flatColumns: [],

src/plugin-hooks/tests/useGroupBy.test.js

@@ -64,6 +64,9 @@ function Table({ columns, data }) {
       columns,
       data,
       defaultColumn,
+      initialState: {
+        groupBy: ["Column Doesn't Exist"],
+      },
     },
     useGroupBy,
     useExpanded

src/plugin-hooks/useAbsoluteLayout.js

@@ -11,18 +11,18 @@ export const useAbsoluteLayout = hooks => {
   hooks.getHeaderGroupProps.push(getRowStyles)
   hooks.useInstance.push(useInstance)
 
-  hooks.getHeaderProps.push((props, instance, header) => [
+  hooks.getHeaderProps.push((props, { column }) => [
     props,
     {
       style: {
         ...cellStyles,
-        left: `${header.totalLeft}px`,
-        width: `${header.totalWidth}px`,
+        left: `${column.totalLeft}px`,
+        width: `${column.totalWidth}px`,
       },
     },
   ])
 
-  hooks.getCellProps.push((props, instance, cell) => [
+  hooks.getCellProps.push((props, { cell }) => [
     props,
     {
       style: {
@@ -36,7 +36,7 @@ export const useAbsoluteLayout = hooks => {
 
 useAbsoluteLayout.pluginName = 'useAbsoluteLayout'
 
-const getRowStyles = (props, instance) => [
+const getRowStyles = (props, { instance }) => [
   props,
   {
     style: {

src/plugin-hooks/useBlockLayout.js

@@ -3,7 +3,7 @@ const cellStyles = {
   boxSizing: 'border-box',
 }
 
-const getRowStyles = (props, instance) => [
+const getRowStyles = (props, { instance }) => [
   props,
   {
     style: {
@@ -17,17 +17,17 @@ export const useBlockLayout = hooks => {
   hooks.getRowProps.push(getRowStyles)
   hooks.getHeaderGroupProps.push(getRowStyles)
 
-  hooks.getHeaderProps.push((props, instance, header) => [
+  hooks.getHeaderProps.push((props, { column }) => [
     props,
     {
       style: {
         ...cellStyles,
-        width: `${header.totalWidth}px`,
+        width: `${column.totalWidth}px`,
       },
     },
   ])
 
-  hooks.getCellProps.push((props, instance, cell) => [
+  hooks.getCellProps.push((props, { cell }) => [
     props,
     {
       style: {

src/plugin-hooks/useColumnOrder.js

@@ -8,7 +8,7 @@ actions.setColumnOrder = 'setColumnOrder'
 
 export const useColumnOrder = hooks => {
   hooks.stateReducers.push(reducer)
-  hooks.flatColumnsDeps.push((deps, instance) => {
+  hooks.flatColumnsDeps.push((deps, { instance }) => {
     return [...deps, instance.state.columnOrder]
   })
   hooks.flatColumns.push(flatColumns)
@@ -40,11 +40,14 @@ function reducer(state, action, previousState, instance) {
   }
 }
 
-function flatColumns(columns, instance) {
-  const {
-    state: { columnOrder },
-  } = instance
-
+function flatColumns(
+  columns,
+  {
+    instance: {
+      state: { columnOrder },
+    },
+  }
+) {
   // If there is no order, return the normal columns
   if (!columnOrder || !columnOrder.length) {
     return columns

src/plugin-hooks/useExpanded.js

@@ -23,7 +23,7 @@ export const useExpanded = hooks => {
 
 useExpanded.pluginName = 'useExpanded'
 
-const defaultGetExpandedToggleProps = (props, instance, row) => [
+const defaultGetExpandedToggleProps = (props, { row }) => [
   props,
   {
     onClick: e => {
@@ -124,11 +124,10 @@ function useInstance(instance) {
   hooks.prepareRow.push(row => {
     row.toggleExpanded = set => instance.toggleExpanded(row.id, set)
 
-    row.getExpandedToggleProps = makePropGetter(
-      getExpandedTogglePropsHooks(),
-      getInstance(),
-      row
-    )
+    row.getExpandedToggleProps = makePropGetter(getExpandedTogglePropsHooks(), {
+      instance: getInstance(),
+      row,
+    })
   })
 
   const expandedRows = React.useMemo(() => {

src/plugin-hooks/useFlexLayout.js

@@ -1,50 +1,53 @@
 export function useFlexLayout(hooks) {
-  hooks.getTableBodyProps.push((props, instance) => [
-    props,
-    {
-      style: {
-        minWidth: `${instance.totalColumnsWidth}px`,
-      },
-    },
-  ])
-
-  const getRowStyles = (props, instance) => [
-    props,
-    {
-      style: {
-        display: 'flex',
-        flex: '1 0 auto',
-        minWidth: `${instance.totalColumnsMinWidth}px`,
-      },
-    },
-  ]
-
+  hooks.getTableBodyProps.push(getTableBodyProps)
   hooks.getRowProps.push(getRowStyles)
   hooks.getHeaderGroupProps.push(getRowStyles)
-
-  hooks.getHeaderProps.push((props, instance, header) => [
-    props,
-    {
-      style: {
-        boxSizing: 'border-box',
-        flex: `${header.totalWidth} 0 auto`,
-        minWidth: `${header.totalMinWidth}px`,
-        width: `${header.totalWidth}px`,
-      },
-    },
-  ])
-
-  hooks.getCellProps.push((props, instance, cell) => [
-    props,
-    {
-      style: {
-        boxSizing: 'border-box',
-        flex: `${cell.column.totalWidth} 0 auto`,
-        minWidth: `${cell.column.totalMinWidth}px`,
-        width: `${cell.column.totalWidth}px`,
-      },
-    },
-  ])
+  hooks.getHeaderProps.push(getHeaderProps)
+  hooks.getCellProps.push(getCellProps)
 }
 
 useFlexLayout.pluginName = 'useFlexLayout'
+
+const getTableBodyProps = (props, { instance }) => [
+  props,
+  {
+    style: {
+      minWidth: `${instance.totalColumnsWidth}px`,
+    },
+  },
+]
+
+const getRowStyles = (props, { instance }) => [
+  props,
+  {
+    style: {
+      display: 'flex',
+      flex: '1 0 auto',
+      minWidth: `${instance.totalColumnsMinWidth}px`,
+    },
+  },
+]
+
+const getHeaderProps = (props, { column }) => [
+  props,
+  {
+    style: {
+      boxSizing: 'border-box',
+      flex: `${column.totalWidth} 0 auto`,
+      minWidth: `${column.totalMinWidth}px`,
+      width: `${column.totalWidth}px`,
+    },
+  },
+]
+
+const getCellProps = (props, { cell }) => [
+  props,
+  {
+    style: {
+      boxSizing: 'border-box',
+      flex: `${cell.column.totalWidth} 0 auto`,
+      minWidth: `${cell.column.totalMinWidth}px`,
+      width: `${cell.column.totalWidth}px`,
+    },
+  },
+]

src/plugin-hooks/useGroupBy.js

@@ -19,7 +19,7 @@ actions.toggleGroupBy = 'toggleGroupBy'
 export const useGroupBy = hooks => {
   hooks.getGroupByToggleProps = [defaultGetGroupByToggleProps]
   hooks.stateReducers.push(reducer)
-  hooks.flatColumnsDeps.push((deps, instance) => [
+  hooks.flatColumnsDeps.push((deps, { instance }) => [
     ...deps,
     instance.state.groupBy,
   ])
@@ -29,7 +29,7 @@ export const useGroupBy = hooks => {
 
 useGroupBy.pluginName = 'useGroupBy'
 
-const defaultGetGroupByToggleProps = (props, instance, header) => [
+const defaultGetGroupByToggleProps = (props, { header }) => [
   props,
   {
     onClick: header.canGroupBy
@@ -81,11 +81,20 @@ function reducer(state, action, previousState, instance) {
   }
 }
 
-function flatColumns(flatColumns, { state: { groupBy } }) {
+function flatColumns(
+  flatColumns,
+  {
+    instance: {
+      state: { groupBy },
+    },
+  }
+) {
   // Sort grouped columns to the start of the column list
   // before the headers are built
 
-  const groupByColumns = groupBy.map(g => flatColumns.find(col => col.id === g))
+  const groupByColumns = groupBy
+    .map(g => flatColumns.find(col => col.id === g))
+    .filter(col => !!col)
   const nonGroupByColumns = flatColumns.filter(col => !groupBy.includes(col.id))
 
   flatColumns = [...groupByColumns, ...nonGroupByColumns]
@@ -158,8 +167,7 @@ function useInstance(instance) {
   flatHeaders.forEach(header => {
     header.getGroupByToggleProps = makePropGetter(
       getGroupByTogglePropsHooks(),
-      getInstance(),
-      header
+      { instance: getInstance(), header }
     )
   })
 
@@ -180,6 +188,11 @@ function useInstance(instance) {
       return [rows, flatRows]
     }
 
+    // Ensure that the list of filtered columns exist
+    const existingGroupBy = groupBy.filter(g =>
+      flatColumns.find(col => col.id === g)
+    )
+
     // Find the columns that can or are aggregating
     // Uses each column to aggregate rows into a single value
     const aggregateRowsToValues = (rows, isAggregated) => {
@@ -187,7 +200,7 @@ function useInstance(instance) {
 
       flatColumns.forEach(column => {
         // Don't aggregate columns that are in the groupBy
-        if (groupBy.includes(column.id)) {
+        if (existingGroupBy.includes(column.id)) {
           values[column.id] = rows[0] ? rows[0].values[column.id] : null
           return
         }
@@ -234,11 +247,11 @@ function useInstance(instance) {
     // Recursively group the data
     const groupRecursively = (rows, depth = 0, parentId) => {
       // This is the last level, just return the rows
-      if (depth === groupBy.length) {
+      if (depth === existingGroupBy.length) {
         return rows
       }
 
-      const columnId = groupBy[depth]
+      const columnId = existingGroupBy[depth]
 
       // Group the rows together for this level
       let groupedRows = groupByFn(rows, columnId)
@@ -251,7 +264,10 @@ function useInstance(instance) {
 
           subRows = groupRecursively(subRows, depth + 1, id)
 
-          const values = aggregateRowsToValues(subRows, depth < groupBy.length)
+          const values = aggregateRowsToValues(
+            subRows,
+            depth < existingGroupBy.length
+          )
 
           const row = {
             id,

src/plugin-hooks/useResizeColumns.js

@@ -26,7 +26,7 @@ export const useResizeColumns = hooks => {
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
 }
 
-const defaultGetResizerProps = (props, instance, header) => {
+const defaultGetResizerProps = (props, { instance, header }) => {
   const { dispatch } = instance
 
   const onResizeStart = (e, header) => {
@@ -215,11 +215,10 @@ const useInstanceBeforeDimensions = instance => {
     header.isResizing = columnResizing.isResizingColumn === header.id
 
     if (canResize) {
-      header.getResizerProps = makePropGetter(
-        getResizerPropsHooks(),
-        getInstance(),
-        header
-      )
+      header.getResizerProps = makePropGetter(getResizerPropsHooks(), {
+        instance: getInstance(),
+        header,
+      })
     }
   })
 }

src/plugin-hooks/useRowSelect.js

@@ -26,7 +26,7 @@ export const useRowSelect = hooks => {
 
 useRowSelect.pluginName = pluginName
 
-const defaultGetToggleRowSelectedProps = (props, instance, row) => {
+const defaultGetToggleRowSelectedProps = (props, { instance, row }) => {
   const { manualRowSelectedKey = 'isSelected' } = instance
   let checked = false
 
@@ -52,7 +52,7 @@ const defaultGetToggleRowSelectedProps = (props, instance, row) => {
   ]
 }
 
-const defaultGetToggleAllRowsSelectedProps = (props, instance) => [
+const defaultGetToggleAllRowsSelectedProps = (props, { instance }) => [
   props,
   {
     onChange: e => {
@@ -153,7 +153,7 @@ function reducer(state, action, previousState, instance) {
   }
 }
 
-function useRows(rows, instance) {
+function useRows(rows, { instance }) {
   const {
     state: { selectedRowIds },
   } = instance
@@ -242,7 +242,7 @@ function useInstance(instance) {
 
   const getToggleAllRowsSelectedProps = makePropGetter(
     getToggleAllRowsSelectedPropsHooks(),
-    getInstance()
+    { instance: getInstance() }
   )
 
   const getToggleRowSelectedPropsHooks = useConsumeHookGetter(
@@ -255,8 +255,7 @@ function useInstance(instance) {
 
     row.getToggleRowSelectedProps = makePropGetter(
       getToggleRowSelectedPropsHooks(),
-      getInstance(),
-      row
+      { instance: getInstance(), row }
     )
   })
 

src/plugin-hooks/useSortBy.js

@@ -31,7 +31,7 @@ export const useSortBy = hooks => {
 
 useSortBy.pluginName = 'useSortBy'
 
-const defaultGetSortByToggleProps = (props, instance, column) => {
+const defaultGetSortByToggleProps = (props, { instance, column }) => {
   const { isMultiSortEvent = e => e.shiftKey } = instance
 
   return [
@@ -237,11 +237,10 @@ function useInstance(instance) {
       }
     }
 
-    column.getSortByToggleProps = makePropGetter(
-      getSortByTogglePropsHooks(),
-      getInstance(),
-      column
-    )
+    column.getSortByToggleProps = makePropGetter(getSortByTogglePropsHooks(), {
+      instance: getInstance(),
+      column,
+    })
 
     const columnSort = sortBy.find(d => d.id === id)
     column.isSorted = !!columnSort

src/publicUtils.js

@@ -67,10 +67,10 @@ function mergeProps(...propList) {
   }, {})
 }
 
-function handlePropGetter(prevProps, userProps, ...meta) {
+function handlePropGetter(prevProps, userProps, meta) {
   // Handle a lambda, pass it the previous props
   if (typeof userProps === 'function') {
-    return handlePropGetter({}, userProps(prevProps, ...meta))
+    return handlePropGetter({}, userProps(prevProps, meta))
   }
 
   // Handle an array, merge each item as separate props
@@ -82,17 +82,21 @@ function handlePropGetter(prevProps, userProps, ...meta) {
   return mergeProps(prevProps, userProps)
 }
 
-export const makePropGetter = (hooks, ...meta) => {
+export const makePropGetter = (hooks, meta = {}) => {
   return (userProps = {}) =>
     [...hooks, userProps].reduce(
-      (prev, next) => handlePropGetter(prev, next, ...meta),
+      (prev, next) =>
+        handlePropGetter(prev, next, {
+          ...meta,
+          userProps,
+        }),
       {}
     )
 }
 
-export const reduceHooks = (hooks, initial, ...args) =>
+export const reduceHooks = (hooks, initial, meta = {}) =>
   hooks.reduce((prev, next) => {
-    const nextValue = next(prev, ...args)
+    const nextValue = next(prev, meta)
     if (process.env.NODE_ENV !== 'production') {
       if (typeof nextValue === 'undefined') {
         console.info(next)
@@ -104,9 +108,9 @@ export const reduceHooks = (hooks, initial, ...args) =>
     return nextValue
   }, initial)
 
-export const loopHooks = (hooks, ...args) =>
+export const loopHooks = (hooks, meta = {}) =>
   hooks.forEach(hook => {
-    const nextValue = hook(...args)
+    const nextValue = hook(meta)
     if (process.env.NODE_ENV !== 'production') {
       if (typeof nextValue !== 'undefined') {
         console.info(hook, nextValue)