Dynamically setting show property of react-table does not show or hide columns viceversa

Question

I am using react-table for the data-grid purpose. I am implementing a settings icon which shows the list of columns and based on the selection, the column gets shown or hidden. I am manipulating "show" property of columns object for this. While the property is getting set properly, there is no such change in the table. Can someone help me with this.

But when I set the property directly(in App component) it works. Where am I going wrong?

Code Sandbox: https://codesandbox.io/s/blue-cherry-di3ub

Help would be appreciated

Jake Luby · Accepted Answer · 2019-06-25 13:52:15Z

1

The issue is in your Select

this.props.handleSetState(this.props.data)

this.props.data is immutable, so you're just sending back the same data that came in. Stream props.data into a new object and then send that back to the parent.

ETA: Something like this...

    let updatedObj = this.props.data.map((obj, i) => {
      if (obj.accessor === value[i]) {
        obj.show = false
      }
      return obj
    })
    this.props.handleSetState(updatedObj);

edited Jun 25, 2019 at 13:52

answered Jun 24, 2019 at 19:56

Jake Luby

1,7687 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joy08 Over a year ago

Thanks for the answer. Is it possible for you to share the logic? I am a bit new to react

Jake Luby Over a year ago

I think I was just using it incorrectly. I thought the checkboxes were to indicate which were hidden and which were not. It's just there to flip them, in which case your logic is fine

Jake Luby Over a year ago

But if this answered your question, could you accept/vote up? Thanks!

Collectives™ on Stack Overflow

Dynamically setting show property of react-table does not show or hide columns viceversa

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related