Mui-datatables: Side effects when dragging columns with nested MUIDataTables

[cahna]

Expected Behavior

In a situation where a MUIDataTable is nested within an expanded row, dragging columns from one MUIDataTable should only affect the selected table.

Current Behavior

Dragging the columns of the outer MUIDataTable will cause the inner MUIDataTable's columns to move, too. Once the column is dropped, the correct column orders are present on both the inner and outer MUIDataTable.

Steps to Reproduce (for bugs)

See this sandbox: https://codesandbox.io/s/fervent-minsky-9eem8?file=/src/App.js

Try:

1. Expand a row
2. Drag a column on the outer MUIDataTable
3. Watch the inner MUIDataTable's columns move along with the outer columns
4. Release/drop the outer column

Once complete, the columns will be in the correct positions. It only looks strange when dragging the column.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.11.0 |
| MUI-datatables | 3.1.5 |
| React | 16.13.1 |
| browser | Chromium |

[patorjk]

I've released a beta version which should hopefully fix this issue:

npm install [email protected]

Codesandbox: https://codesandbox.io/s/hungry-dubinsky-wr1yu

[cahna]

Thanks! I can confirm that the beta version fixes the issue in my project.

[patorjk]

Fixed in version 3.2.0.