fix(usecolumnvisibility): trigger resetHiddenColumns on columns change (#1938)

fix #1919

docs/api/useTable.md

@@ -25,6 +25,11 @@ 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
+- `autoResetHiddenColumns: Boolean`
+  - Defaults to `true`
+  - When `true`, the `hiddenColumns` state will automatically reset if any of the following conditions are met:
+    - `columns` is changed
+  - To disable, set to `false`
 - `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.

src/hooks/useColumnVisibility.js

@@ -5,6 +5,7 @@ import {
   functionalUpdate,
   useGetLatest,
   makePropGetter,
+  useMountedLayoutEffect,
 } from '../publicUtils'
 
 actions.resetHiddenColumns = 'resetHiddenColumns'
@@ -147,11 +148,13 @@ function useInstanceBeforeDimensions(instance) {
 
 function useInstance(instance) {
   const {
+    columns,
     flatHeaders,
     dispatch,
     allColumns,
     getHooks,
     state: { hiddenColumns },
+    autoResetHiddenColumns = true,
   } = instance
 
   const getInstance = useGetLatest(instance)
@@ -197,6 +200,14 @@ function useInstance(instance) {
     )
   })
 
+  const getAutoResetHiddenColumns = useGetLatest(autoResetHiddenColumns)
+
+  useMountedLayoutEffect(() => {
+    if (getAutoResetHiddenColumns()) {
+      dispatch({ type: actions.resetHiddenColumns })
+    }
+  }, [dispatch, columns])
+
   Object.assign(instance, {
     allColumnsHidden,
     toggleHideColumn,