Mui-datatables: No rerender when updating data

[perfectstrong]

I have a table of objects this.state.rows to be rendered into an interactive data table that allows user to modify a certain field. When user clicks on a row, my custom dialog will show up and ask information. When user accepte it, I modify the data by this.setState({rows: newRows}). The problem is no rerender occurs and the table remains unchanged.

Expected Behavior

The table updates as new data is pushed into.

Current Behavior

The table remains unchanged.

Steps to Reproduce (for bugs)

I simplify the step of showing dialog and mutating data. Just click the button "Change data" and all values of the first column will be appended "1".
https://codesandbox.io/s/yjv1o52o7z

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.9.3 |
| MUI-datatables | 2.1.0 |
| React | 16.8.6 |
| browser | Firefox 66.0.5 64bits |

[gabrielliwerant]

Updates to the table data are complex because the data is restructured and re-built before being placed into the table, meaning that it has to move through this process for the update to occur in the table (even though the state will change regardless). For now, it will be best to use options like customBodyRender, which exposes a updateValue function that will handle updates to your data by hooking into this process.

[perfectstrong]

Then does customBodyRenderer is common between rows or columns ? So that i can reuse in global.

[gabrielliwerant]

You can use it that way if you want, and actually, you may not even need to use updateValue, because the render function will be integrated with the table, so it should trigger the state updates you're looking for.

You can experiment with this example, that makes updates to the data directly in the "Delete" button: https://github.com/gregnb/mui-datatables/blob/master/examples/custom-action-columns/index.js. If you modify that code to change all the rows, it should also work.

Another experiment you can try is with the customToolbar which will let you add buttons and functions that impact the overall table data.

[HeavenlyEntity]

You can use it that way if you want, and actually, you may not even need to use updateValue, because the render function will be integrated with the table, so it should trigger the state updates you're looking for.

You can experiment with this example, that makes updates to the data directly in the "Delete" button: https://github.com/gregnb/mui-datatables/blob/master/examples/custom-action-columns/index.js. If you modify that code to change all the rows, it should also work.

Another experiment you can try is with the customToolbar which will let you add buttons and functions that impact the overall table data.

Yes yet if you use customToolbar then use a modal to input data, then on the modal to save the input data for instance I am using an array of objects.

this.setState({rows: displayData[idx]["Freeform Notes"] = `${this.state.noteText}`

It will update programmatically yet not on the table. I am using my phone at the moment. I will provide additional and more specific information when I get to a computer. 👉🏻

[gabrielliwerant]

@HeavenlyEntity, @perfectstrong It's possible that your issue is the way you are attempting to update state. You may have an object reference issue. I describe that class of mistake here https://github.com/gregnb/mui-datatables/issues/1082.