Add/rename a few hooks, fix useColumnVisibility header deps

- The `columnsBeforeHeaderGroups` and `columnsBeforeHeaderGroupsDeps` hooks have been renamed to `flatColumns` and `flatColumnsDeps` respectively, which better reflects what they are used for, rather than their order, which can remain implicit.
- Added `headerGroups` and `headerGroupDeps` hooks, which, similar to `flatColumns`, allow you to decorate (and trigger) the memoized header group generation.
- Added `columns` and `columnsDeps` hooks, which, similar to `flatColumns` and `headerGroups`, allow you to decorate (and trigger) the memoized column generation/decoration.
- The new hook order is as follows: `columns/columnsDeps` => `flatColumns/flatColumnsDeps` => `headerGroups/headerGroupsDeps`
- `useColumnVisibility` now uses the new `headerGroupsDeps` hook to trigger header group regeneration when visibility changes

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/index.js": {
-    "bundled": 103166,
-    "minified": 48591,
-    "gzipped": 12715
+    "bundled": 103833,
+    "minified": 48853,
+    "gzipped": 12789
   },
   "dist/index.es.js": {
-    "bundled": 102323,
-    "minified": 47841,
-    "gzipped": 12565,
+    "bundled": 102990,
+    "minified": 48103,
+    "gzipped": 12638,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8457
+        "code": 8444
       }
     }
   }

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 7.0.0-rc.6
+
+- The `columnsBeforeHeaderGroups` and `columnsBeforeHeaderGroupsDeps` hooks have been renamed to `flatColumns` and `flatColumnsDeps` respectively, which better reflects what they are used for, rather than their order, which can remain implicit.
+- Added `headerGroups` and `headerGroupDeps` hooks, which, similar to `flatColumns`, allow you to decorate (and trigger) the memoized header group generation.
+- Added `columns` and `columnsDeps` hooks, which, similar to `flatColumns` and `headerGroups`, allow you to decorate (and trigger) the memoized column generation/decoration.
+- The new hook order is as follows: `columns/columnsDeps` => `flatColumns/flatColumnsDeps` => `headerGroups/headerGroupsDeps`
+- `useColumnVisibility` now uses the new `headerGroupsDeps` hook to trigger header group regeneration when visibility changes
+
 ## 7.0.0-rc.5
 
 - Fixed an issue where the exported `useAsyncDebounce` method would crash if its promise throw an error.

src/hooks/useColumnVisibility.js

@@ -19,7 +19,7 @@ export const useColumnVisibility = hooks => {
 
   hooks.stateReducers.push(reducer)
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
-  hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [
+  hooks.headerGroupsDeps.push((deps, instance) => [
     ...deps,
     instance.state.hiddenColumns,
   ])

src/hooks/useTable.js

@@ -49,8 +49,12 @@ export const useTable = (props, ...plugins) => {
     data,
     hooks: {
       stateReducers: [],
-      columnsBeforeHeaderGroups: [],
-      columnsBeforeHeaderGroupsDeps: [],
+      columns: [],
+      columnsDeps: [],
+      flatColumns: [],
+      flatColumnsDeps: [],
+      headerGroups: [],
+      headerGroupsDeps: [],
       useInstanceBeforeDimensions: [],
       useInstance: [],
       useRows: [],
@@ -117,58 +121,102 @@ export const useTable = (props, ...plugins) => {
     dispatch, // The resolved table state
   })
 
+  // Snapshot hook and disallow more from being added
+  const getColumns = useConsumeHookGetter(instanceRef.current.hooks, 'columns')
+
+  // Snapshot hook and disallow more from being added
+  const getColumnsDeps = useConsumeHookGetter(
+    instanceRef.current.hooks,
+    'columnsDeps'
+  )
+
   // Decorate All the columns
   let columns = React.useMemo(
-    () => decorateColumnTree(userColumns, defaultColumn),
-    [defaultColumn, userColumns]
+    () =>
+      applyHooks(
+        getColumns(),
+        decorateColumnTree(userColumns, defaultColumn),
+        instanceRef.current
+      ),
+    [
+      defaultColumn,
+      getColumns,
+      userColumns,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...getColumnsDeps(instanceRef.current),
+    ]
+  )
+
+  instanceRef.current.columns = columns
+
+  // Snapshot hook and disallow more from being added
+  const getFlatColumns = useConsumeHookGetter(
+    instanceRef.current.hooks,
+    'flatColumns'
   )
 
   // Snapshot hook and disallow more from being added
-  const getColumnsBeforeHeaderGroups = useConsumeHookGetter(
+  const getFlatColumnsDeps = useConsumeHookGetter(
     instanceRef.current.hooks,
-    'columnsBeforeHeaderGroups'
-  )
-
-  // Snapshot hook and disallow more from being added
-  const getColumnsBeforeHeaderGroupsDeps = useConsumeHookGetter(
-    instanceRef.current.hooks,
-    'columnsBeforeHeaderGroupsDeps'
+    'flatColumnsDeps'
   )
 
   // Get the flat list of all columns and allow hooks to decorate
   // those columns (and trigger this memoization via deps)
-  let flatColumns = React.useMemo(() => {
-    let newColumns = applyHooks(
-      getColumnsBeforeHeaderGroups(),
-      flattenBy(columns, 'columns'),
-      instanceRef.current
-    )
+  let flatColumns = React.useMemo(
+    () =>
+      applyHooks(
+        getFlatColumns(),
+        flattenBy(columns, 'columns'),
+        instanceRef.current
+      ),
+    [
+      columns,
+      getFlatColumns,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...getFlatColumnsDeps(instanceRef.current),
+    ]
+  )
 
-    return newColumns
-  }, [
-    columns,
-    getColumnsBeforeHeaderGroups,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...getColumnsBeforeHeaderGroupsDeps(),
-  ])
+  instanceRef.current.flatColumns = flatColumns
+
+  // Snapshot hook and disallow more from being added
+  const getHeaderGroups = useConsumeHookGetter(
+    instanceRef.current.hooks,
+    'headerGroups'
+  )
+
+  // Snapshot hook and disallow more from being added
+  const getHeaderGroupsDeps = useConsumeHookGetter(
+    instanceRef.current.hooks,
+    'headerGroupsDeps'
+  )
 
   // Make the headerGroups
   const headerGroups = React.useMemo(
-    () => makeHeaderGroups(flatColumns, defaultColumn),
-    [defaultColumn, flatColumns]
+    () =>
+      applyHooks(
+        getHeaderGroups(),
+        makeHeaderGroups(flatColumns, defaultColumn),
+        instanceRef.current
+      ),
+    [
+      defaultColumn,
+      flatColumns,
+      getHeaderGroups,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...getHeaderGroupsDeps(),
+    ]
   )
 
+  instanceRef.current.headerGroups = headerGroups
+
   const headers = React.useMemo(
     () => (headerGroups.length ? headerGroups[0].headers : []),
     [headerGroups]
   )
 
-  Object.assign(instanceRef.current, {
-    columns,
-    flatColumns,
-    headerGroups,
-    headers,
-  })
+  instanceRef.current.headers = headers
 
   // Access the row model
   const [rows, flatRows] = React.useMemo(() => {

src/plugin-hooks/useColumnOrder.js

@@ -8,10 +8,10 @@ actions.setColumnOrder = 'setColumnOrder'
 
 export const useColumnOrder = hooks => {
   hooks.stateReducers.push(reducer)
-  hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => {
+  hooks.flatColumnsDeps.push((deps, instance) => {
     return [...deps, instance.state.columnOrder]
   })
-  hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
+  hooks.flatColumns.push(flatColumns)
   hooks.useInstance.push(useInstance)
 }
 
@@ -40,7 +40,7 @@ function reducer(state, action) {
   }
 }
 
-function columnsBeforeHeaderGroups(columns, instance) {
+function flatColumns(columns, instance) {
   const {
     state: { columnOrder },
   } = instance

src/plugin-hooks/useGroupBy.js

@@ -18,11 +18,11 @@ actions.toggleGroupBy = 'toggleGroupBy'
 
 export const useGroupBy = hooks => {
   hooks.stateReducers.push(reducer)
-  hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [
+  hooks.flatColumnsDeps.push((deps, instance) => [
     ...deps,
     instance.state.groupBy,
   ])
-  hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
+  hooks.flatColumns.push(flatColumns)
   hooks.useInstance.push(useInstance)
 }
 
@@ -64,7 +64,7 @@ function reducer(state, action) {
   }
 }
 
-function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) {
+function flatColumns(flatColumns, { state: { groupBy } }) {
   // Sort grouped columns to the start of the column list
   // before the headers are built