Mui-datatables: draggableColumns does not work well with a sidebar and selectableRows none

[davidanp]

The some columns on the datatable are not draggable or are dragged to incorrect positions when the selectableRows is set to none and the table does not take up the full viewport width. Even if a column is draggable, it may lose the ability to be dragged after moved.

Expected Behavior

When selectableRows is set to none, the column drag should behave identically to other values of selectableRows.

Current Behavior

SelectableRows is set to none and the table is an item in flexbox row.
Column drags may for for some columns but not others. After dragging, a column may also lose it's ability to be dragged.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/interesting-blackburn-iv3mw?file=/examples/draggable-columns/index.js
Forked from demo sandbox.

1. Click on 'draggable columns' to see both the bugged table and a working one.
2. Make sure the viewport width of the browser is large enough to reveal the columns of each table.
3. Set the selectable rows to 'none'.
4. Drag columns on the table labeled 'Unable to Drag Columns' will work inconsistently. While the table below will work fine.
5. Set selectable rows to something other than 'none'
6. Drag columns will work on both tables.

[patorjk]

Ah, I see what's going on. This is the problem:

https://github.com/gregnb/mui-datatables/blob/master/src/hooks/useColumnDrop.js#L9

The table calculates the offsetLeft of the table using the select cell. If it's not present, it uses an object with the offsetLeft set to zero. So tables without select cells that have an offset, will not have the right calculation in place.

[patorjk]

I think I have this fixed:

https://codesandbox.io/s/muidatatables-custom-toolbar-thms7?file=/index.js

If you have a moment and can verify, it's in [email protected]:

npm install [email protected]

[davidanp]

yup it works perfectly as expected now. thanks!

[patorjk]

Fixed in 3.1.5