Only one table works per page

[billschaller]

The defaultProps object that is used in Reactable is getting polluted with the first instance of column data created. From the React docs:

getDefaultProps
    object getDefaultProps()
Invoked once and cached when the class is created. Values in the mapping will be set on 
this.props if that prop is not specified by the parent component (i.e. using an in check).

This method is invoked before any instances are created and thus cannot rely on this.props. In 
addition, be aware that any complex objects returned by getDefaultProps() will be shared across 
instances, not copied.

Because of the way columns are passed around and modified, the default props object is getting polluted with data from instances of the class. This causes the first instance of a table to work fine, but the subsequent ones all have the same columns as the first, so if they use different columns, nothing displays.

To demonstrate, navigate to http://glittershark.github.io/reactable/ and run the following code in the console:

$('body').append('<div id="testTable"></div>');
React.renderComponent(Reactable.Table({data:[{foo:'bar', baz:'qux'}]}), document.getElementById('testTable'));

I don't have time to write a good fix for this at the moment.

[RnbWd]

I've also run into this issue. Defining the 'columns' prop in every component seems to fix this issue. Not ideal but it works.

[glittershark]

Yep. I'll see what I can do.

[billschaller]

The table should work using a single source of state -- right now props (and state) are being polluted -- it works against the basic principles of the library...

It's complicated of course, but the library should at a minimum:

• Keep instances of the component from interacting
• Render correctly whenever the input data changes
• Retain only state information that remains valid after input data changes

[joneshf]

Just checked, and this isn't actually fixed it seems. You can verify by changing this line https://github.com/glittershark/reactable/blob/master/tests/reactable_test.jsx#L1957 to this.testNode1.find... and seeing that the tests still pass, when they should in fact fail.

In my case it still keeps the old header names. Can you explicate what is shared/why?

[billschaller]

Its the default props- the react docs do specify that they're shared among all instances of the component.