v7.0.0-rc.13

.size-snapshot.json

@@ -1,39 +1,39 @@
 {
   "dist/index.js": {
-    "bundled": 107213,
-    "minified": 49659,
-    "gzipped": 13264
+    "bundled": 107717,
+    "minified": 49867,
+    "gzipped": 13333
   },
   "dist/index.es.js": {
-    "bundled": 106302,
-    "minified": 48847,
-    "gzipped": 13099,
+    "bundled": 106806,
+    "minified": 49055,
+    "gzipped": 13168,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8249
+        "code": 8239
       }
     }
   },
   "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,12 @@
+## 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,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()}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-rc.11",
+  "version": "7.0.0-rc.13",
   "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": 1576641254453,
     "files": [
       {
         "filename": "index.js",
-        "size": 22354,
-        "delta": 312
+        "size": 22403,
+        "delta": 49
       }
     ]
   }

sizes-es.json

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

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: [],

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/useGroupBy.js

@@ -85,7 +85,9 @@ function flatColumns(flatColumns, { 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]
@@ -180,6 +182,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 +194,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 +241,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 +258,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,