React-table: [v7] Column toggle visibility feature

[gargroh]

To add column show/hide functionality(via user actions), there seems to be following ways :-

1. Add a new hook, which have default state, detach current show attribute from columns and derive it from plugin's default state and add needed column methods.

2. Keep the current data structure, add a new method to column for toggling visibility, but will require one more property apart from isVisible and show.

3. Manage the state outside of react-table, by updating the columns config itself.

@tannerlinsley , what are your thoughts on it and what would you prefer ?

[gargroh]

Rough implementation on useColumnVisibility without any default state, will look something like -

```import React from 'react';
import PropTypes from 'prop-types';

import { addActions, actions } from '../actions';

addActions('setColumnVisibility');

const propTypes = {};

export const useColumnVisibility = (hooks) => {
hooks.useMain.push(useMain);
};

useColumnVisibility.pluginName = 'useColumnVisibility';

function useMain(instance) {
PropTypes.checkPropTypes(propTypes, instance, 'property', 'useColumnVisibility');

const { flatHeaders, setState } = instance;

const setColumnVisibility = React.useCallback(() => {
return setState((old) => {
return {
...old,
columnOrder: [...old.columnOrder] // FixMe: dirty way
};
}, actions.setColumnVisibility);
}, [setState]);

flatHeaders.forEach((column) => {
column.setColumnVisibility = (show) => {
column.show = show; // FixMe: i should not be mutated
setColumnVisibility();
};

column.toggleColumnVisibility = (flag) => {
  let setValue = column.show === flag ? !flag : flag;
  column.show = setValue;
  setColumnVisibility();
};

});

return {
...instance,
};
}
```

[kbruskiewicz]

Has that implementation been tested?

[gargroh]

Nope, it works for flatColumns only, not for group headers..

[gargroh]

@tannerlinsley point 1 in https://github.com/tannerlinsley/react-table/issues/1600#issue-507231067 sounds good to me, what is your opinion on it ?

[gargroh]

PR https://github.com/tannerlinsley/react-table/pull/1634 for the same.

[papigers]

How about accepting a function to the show property that receives that table/columns data and returns true/false to indicate whether the column should be shown or not.

show: Boolean => show: Boolean | TableData => Boolean

[tannerlinsley]

That should already be implemented. No?

Tanner Linsley
On Nov 9, 2019, 6:31 PM -0700, Gershon Papi [e-mail], wrote:

How about accepting a function to the show property that receives that table/columns data and returns true/false to indicate whether the column should be shown or not.
show: Boolean => show: Boolean | TableData => Boolean
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[papigers]

@tannerlinsley It is, I misunderstood the issue, my bad.

[tannerlinsley]

At this point, considering a plugin like this somewhat defeats the purpose of having a show option in columns, am I right? Can you think of any reason why a dev would want the show option and not just want to use a hypothetical column visibility plugin?

[gargroh]

Can you think of any reason why a dev would want the show option and not just want to use a hypothetical column visibility plugin?

For features like providing toggling functionality at user level, something like given in snapshot on this link https://github.com/tannerlinsley/react-table/issues/1649#issue-525806262

[gargroh]

At this point, considering a plugin like this somewhat defeats the purpose of having a show option in columns, am I right

Yes, chnages mentioned in https://github.com/tannerlinsley/react-table/pull/1634#issue-337900708 will apply for above feature.

[tannerlinsley]

Tracking all of this in #1700