React-virtualized: PropTypes in Table doesn't allow an array of Columns to be passed as children

[mccambridge]

We have a central NPM package for common code. Basically, our virtualized Table component lives in that package. The component has 5 or 6 standard columns. When using the component, we import it and pass a child array of action/button columns.

Just noticed it fails your Table PropTypes, which says Table only accepts children of type Column. Shouldn't I also be able to pass an array of Columns?

A pseudoexample would be something like

const myArrayOfColumns = [
  <Column woot />
  <Column yeeha />
];

<WindowScroller>
  {({height, isScrolling, scrollTop}) => (
    <Table yada>
      <Column blah />
      <Column blahblah />
      { myArrayOfColumns }
    </Table>
  )}
</WindowScroller>

Thanks.

[bvaughn]

The code you've pasted here works fine, without any validation errors. Table flattens children using React.Children.toArray before validating them. This gets rid of the wrapper array. Make sure you're using a recent version of react-virtualized.

[shem8]

Maybe the above example will work, but if we extract it to another component, it won't work:

const MyArrayOfColumns () => ([
  <Column woot />,
  <Column yeeha />
]);

<WindowScroller>
  {({height, isScrolling, scrollTop}) => (
    <Table yada>
      <MyArrayOfColumns/>
    </Table>
  )}
</WindowScroller>

[SourceCipher]

This is a big problem tho and I am surprised I havent seen this being fixed. Forcing to use just 1 type of children is weird and impractical. We trying to make our table to render only particular columns depending on various state changes and we cant do this properly as state changes within the table structure will send the project to the afterlife.

In this case we needed to add our own component where we return the array of columns depending on the computed state change which then means we will not have the whole table rerendering every time the state changes.

This should be fixed