Mui-datatables: Changing columns prop no longer updates state after 2.0.0

[muvari]

Expected Behavior

Changing the columns prop should update the internal column state and render the new columns. This was working in 2.0.0.

Current Behavior

The columns stay the same after updating the prop.

Steps to Reproduce (for bugs)

1. Create an initial table
2. Add a new column to the columns prop
3. Table does not render the new column

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.9.3 |
| MUI-datatables | 2.2.0 |
| React | 16.8.6 |

[IDrissAitHafid]

Same problem, i have the same environment!!

[karthick-vinod]

Sandbox Link: https://codesandbox.io/embed/cranky-goldberg-koszc

Probable cause: (Might be wrong)

The condition at https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L316 will always be true because this.props.columns already contains newColumns as it is being called from componentDidUpdate

This could have been the case since certain logic was moved out of componentWillReceiveProps into componentDidUpdate.

[SatorSquare]

I am also seeing this issue and am interested in a fix.

[karthick-vinod]

PR: https://github.com/gregnb/mui-datatables/pull/650

[tiagofernandez]

Updating the options prop also stopped working, after 2.0.0.

[karthick-vinod]

Updating the options prop also stopped working, after 2.0.0.

Handled options and columns now.

[patorjk]

Just ran into this myself. I tried dynamically updating the rowsPerPage option and it didn't work:

https://codesandbox.io/s/0lmlx

If I use the 2.0.0 version of mui-datatables (as the original sandbox does), it works fine.

[VagnerNico]

Hello again, I guess this PR #687 fix the column options changed outside the table.

[jkeruzec]

Very interested in this one.
I can't migrate to V2.x.x because of this issue for the moment..

[yilinggk]

Hi! Also gonna be watching this issue. Gonna try an older version for now

[gabrielliwerant]

Working on a potential fix for this, at least temporarily. Not sure if it will cause regressions. If anyone is willing to test it out locally, let me know, and I can help get it up and running!

[gabrielliwerant]

A potential fix for this is available in 2.5.1. Would love to get feedback on it, especially if people want to play around with other functionality and see if they can find regressions.

[yilinggk]

Not sure if it fixed the problem for me. I'm trying to append a customBodyRender function to my columns after the user clicks a customized edit button in the toolbar. I'm passing a handleEdit method as a prop to my customToolbar component that adds the customBodyRender function to the column data and sets the column state in the index. When I console.log the state, it shows the change, but the table doesn't.

[gabrielliwerant]

@yilinggk Can you open a codesandbox that demonstrates the issue? Thanks!