Fix column hiding, add useControlledStat hook

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/index.js": {
-    "bundled": 107493,
-    "minified": 49765,
-    "gzipped": 13301
+    "bundled": 107717,
+    "minified": 49867,
+    "gzipped": 13333
   },
   "dist/index.es.js": {
-    "bundled": 106582,
-    "minified": 48953,
-    "gzipped": 13137,
+    "bundled": 106806,
+    "minified": 49055,
+    "gzipped": 13168,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8249
+        "code": 8239
       }
     }
   },

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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

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,6 +64,7 @@ function Table({ columns, data }) {
     useExpanded,
     // Our custom plugin to add the expander column
     hooks => {
+      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()}>

src/hooks/useColumnVisibility.js

@@ -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
 

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,
+    getInstance()
+  )
 
   Object.assign(getInstance(), {
     state,

src/makeDefaultPluginHooks.js

@@ -36,6 +36,7 @@ export default function makeDefaultPluginHooks() {
   return {
     useOptions: [],
     stateReducers: [],
+    useControlledState: [],
     columns: [],
     columnsDeps: [],
     flatColumns: [],