How do I re render the React Pivot UI using external button/drop down list etc ?

[iamyashnigam]

Thank you for the amazing library. I am new to react and I love the functionality React Pivot table offers!

I am trying to build a multi dataset pivot table using React Pivot Table. I am using a select tag to select a dataset and update the state. I am able to change the dataset before I start interacting with the pivotUI, once I drag row/column, I am unable to change the state thereafter. All I really want is to be able to select a dataset from the drop down menu and render the react pivot table with the new selected dataset.

I saw a similar issue for Jquery pivot table https://github.com/nicolaskruchten/pivottable/issues/736

Is there a overwrite prop for react pivot table or is there another workaround or am I doing it wrong?

Here's my code.

`import React from 'react'; import PivotTableUI from 'react-pivottable/PivotTableUI'; import 'react-pivottable/pivottable.css'; import TableRenderers from 'react-pivottable/TableRenderers'; import Plot from 'react-plotly.js'; import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// create Plotly renderers via dependency injection const PlotlyRenderers = createPlotlyRenderers(Plot);

const data1 = [{'Country':'USA','Sales':45000}, {'Country':'USA','Sales':50000},{'Country':'CA','Sales':15000}]

const data2 = [{'Product':'Sofa','Sales':5000},{'Product':'Dinner Table','Sales':50000},{'Product':'Chair','Sales':15000}]

const dataDic = {'Region':data1,'Products':data2}

class App extends React.Component {

constructor(props) { super(props); this.state = {selectedOption: 'Region'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }

handleChange(event) { this.setState({selectedOption: event.target.value});

}

handleSubmit(event) { alert('You have selected ' + this.state.selectedOption); event.preventDefault(); }

render() {

return <div>
          <select defaultValue="Region" onChange={(e)=>   

this.handleChange(e)}>

Region

                <option value="Products">Products</option>
          </select>
          <br/>
          <br/>

          <PivotTableUI
              data={dataDic[this.state.selectedOption]}
              onChange={s => this.setState(s)}

       renderers={Object.assign({},TableRenderers)}//,PlotlyRenderers)}
              {...this.state}
          />

        </div>;
 }

}

export default App;`

Thanks Yash Nigam

[mominoes]

I had the same issue! I can change the data set and the component re-renders to reflect new data (which is passed in through props), but once I start interacting with the pivot table (dragging rows/cols attributes), it no longer responds to further changes in data. I found a workaround (delete s.data):

<PivotTableUI
    data={pivotTableData}
    onChange={s => {
        delete s.data // Hack to prevent new data from being overwritten by old data
        this.props.setPivotTableState(s)}
    }
    {...this.props.pivotTableState}
/>

I should note that after after the component mounts and before interacting with the pivot table, this.props.pivotTableState is null. After interacting with it, this.props.pivotTableState is populated, and without the hack mentioned above, this includes data=pivotTableData

[Floriferous]

Yeah, I can confirm this bug. @mominoes hack fixed it for me as well.

[baur]

Сonfirm this bug! helped me as well ... thank you!