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