diff --git a/.size-snapshot.json b/.size-snapshot.json
index c1a164b..101a187 100644
--- a/.size-snapshot.json
+++ b/.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
}
}
},
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b84ec5..13298d3 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/examples/column-hiding/src/App.js b/examples/column-hiding/src/App.js
index 4cce1ab..ebf93d6 100644
--- a/examples/column-hiding/src/App.js
+++ b/examples/column-hiding/src/App.js
@@ -71,8 +71,10 @@ function Table({ columns, data }) {
{flatColumns.map(column => (
- {' '}
- {column.id}
+
))}
diff --git a/examples/grouping-column/src/App.js b/examples/grouping-column/src/App.js
index e2bfb6f..828e7e2 100644
--- a/examples/grouping-column/src/App.js
+++ b/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 (
<>
- {JSON.stringify({ groupBy, expanded: expanded }, null, 2)}
+ {JSON.stringify({ state }, null, 2)}
diff --git a/src/hooks/useColumnVisibility.js b/src/hooks/useColumnVisibility.js
index 05ec7ca..dbef86a 100644
--- a/src/hooks/useColumnVisibility.js
+++ b/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
diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js
index f3e7da0..ff612c3 100755
--- a/src/hooks/useTable.js
+++ b/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,
diff --git a/src/makeDefaultPluginHooks.js b/src/makeDefaultPluginHooks.js
index 66cd5d7..1058987 100644
--- a/src/makeDefaultPluginHooks.js
+++ b/src/makeDefaultPluginHooks.js
@@ -36,6 +36,7 @@ export default function makeDefaultPluginHooks() {
return {
useOptions: [],
stateReducers: [],
+ useControlledState: [],
columns: [],
columnsDeps: [],
flatColumns: [],