React-table: Show / hide columns dynamically

[eyerean]

I am trying to do this with checkboxes: a function in ReactTable's parent component handles the booleans, and when these change, the component with ReactTable rerenders with the correct updated booleans. But the columns seem to keep their initial state, shown or hidden, no change despite the correctly sent booleans.

In my columns definition I have show: this.props.columnName .

On the contrary, when I change some column's header in the same way [header: () => <span>{this.props.selectedYear}</span>], it is changed correctly. The only difference is that with this change there is also a change of the data. However, even when I change this header + data this way, shown columns are still not refreshed.

How can I do this?

[tannerlinsley]

It seems you may have discovered a bug... I would suggest trying to use the changes from this PR to see if it fixes the problem, or just wait until we can get that PR merged (or the issue it's linked to resolved). Then we can have a better idea if it is in fact a bug or simply an implementation error. Either way If you could, please, post your component code so we can get a better idea of how you are attempting to achieve this. :)

[tannerlinsley]

Please run yarn/npm upgrade react-table, verify you are using the latest version and let me know if you are still seeing this bug. If so, please reopen issue :)

[eyerean]

Bug still there on [email protected], but thanks a lot for your work on this!

[gnain]

Hi, I kind of run into the same issue.
Basically, I generate a list of checkboxes atop the table to allow users to show/hide columns.
For this, I store the columns setting in the state of my react component, and link
One of the column has a function for a specific rendering (here a select/option list). On the first component.render() everything goes as planned (ReactTable is awesome by the way !). However, when they change the visibility of any column to 'hide', the select html component generated by the column.render function is transformed to a simple text content in the <div rt-td>.
I made a Gist to show the configuration here.

It seems to me that when the columns configuration is updated, the table does not call the column.render(), but rather copies the values of the contents of the cells.

This is a clear bug I guess, and could be very worth solving!

[gnain]

OK, so, for information and records, the bug was on me. I used a very nasty way to update the columns description object, that used to remove the rendering methods ! Therefore, no bugs from my part. Very sorry for the disturbance ! Ans thank you again for this awesome table ! 💯

[tannerlinsley]

:) Great to hear! And thanks!

[jeghers]

Show hide is still not working for me. I am simply changing the show flags in the columns array and re-rendering. Am I missing something?

[tannerlinsley]

Please post your code
On Fri, Jul 14, 2017 at 2:48 AM Mark Jeghers [e-mail]
wrote:

Show hide is still not working for me. I am simply changing the show flags
in the columns array and re-rendering. Am I missing something?

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/150#issuecomment-315306864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCblwymP1zS_2UPm-TcTe61hstQo9ks5sNytCgaJpZM4Mswo9
.

[csi-lk]

Yep i'm having the same issue in "react-table": "6.4.0",

I've got a checkbox show hide thing similar to the above comments, when a user clicks on one of the boxes an action is sent that changes the state, the new state includes the columns array with show: false and width: 0 on the particular array object.

Seems to be passing ok, am logging the new state in mapStateToProps and in the render() method.

[csi-lk]

Just updated to "react-table": "^6.5.1", and still have the same issue

[DhanaTontanahal]

Hi

Here is the working example of hiding/showing the columns dynamically with react table imple..

https://github.com/DhanaTontanahal/TdsReactTable

Thank you.