React-virtualized: Hiding columns in the FlexTable component

[christianmalek]

How can I hide/show columns in the FlexTable component? I wanted to ask in Gitter.im, but it looks like there exists no room anymore.

[bvaughn]

Sorry @Phisherman. Usually people just message me directly on Gitter. :)

Currently there is no way to dynamically show/hide columns in a FlexTable (other than perhaps setting their width to zero?). Do you think this would be a useful feature to add? Tell me more about how you'd use it. :)

[christianmalek]

Hey, thanks for your quick reply!

tl;dr Sometimes you don't need or want to see (because it's confusing) all columns. But maybe later you need to look at some columns again. That's shortly said why I need it. :)

[bvaughn]

So you're imagining some sort of boolean, show/hide attribute you could specify on a FlexColumn?

I'm just trying to get an idea of what interface you had in mind. Now that I've been awake for more than 5 minutes, maybe the easiest way to do this (with the current released version) is actually an approach like this:

render () {
  const { maybeColumnA, maybeColumnB, maybeColumnC } = this.state

  return (
    <FlexTable>
      {maybeColumnA && <FlexColumn/>}
      {maybeColumnB && <FlexColumn/>}
      {maybeColumnC && <FlexColumn/>}
    </FlexTable>
  )
}

[christianmalek]

As you can see in the picture above, I had input fields with an button to hide/show the columns.

[bvaughn]

Assuming those buttons toggle some state property (eg. showAddress) then wouldn't the approach I mentioned above work? :)

[christianmalek]

I'll check it soon. I'm very new to ReactJS so I just asked in advance. Thanks for your fast help! I really appreciate it.

[bvaughn]

Ah, no problem!

I'm confident it will work- so I'm going to close this issue. But feel free to continue to chat with me here if you run into any problems.

[JacobLynch]

@bvaughn This is the approach I decided to try as well (just not rendering them based on state). However I get the following error when the state is false (don't render):

Uncaught TypeError: Cannot read property 'props' of null

In _createHeader() of FlexTable.js.

[bvaughn]

Oh. Yes. Sorry. You should do something like this instead:

render () {
  const { maybeColumnA, maybeColumnB, maybeColumnC } = this.state
  const columns = []
  if (maybeColumnA) columns.push(<FlexColumn {...columnAProps}/>)
  // and so forth...

  return (
    <FlexTable>
      {columns}
    </FlexTable>
  )
}

[JacobLynch]

@bvaughn That worked perfectly, thanks!

[olslash]

Can we do something to make the former case work? ie {maybeColumnA && <FlexColumn/>}

Ran into this today and that style enables a much more idiomatic api than building an array.

[bvaughn]

@olslash, sure that seems reasonable. I'll re-open this issue for that then.

[bvaughn]

FYI @olslash ~ version 6.2.1 was just released with support for this.

You can see a demo of it in the updated FlexTable demo page: https://bvaughn.github.io/react-virtualized/?component=FlexTable

[olslash]

I nominate @bvaughn for OSS project maintainer of the year 🎉 👍