patricktran / react-table-hoc-draggable-columns

ReactTable HOC for draggable columns
https://patricktran.github.io/react-table-hoc-draggable-columns/
MIT License
28 stars 24 forks source link

Request to be able to decide whether a reorder should be done. #26

Open ds-martinso opened 3 years ago

ds-martinso commented 3 years ago

In line 670 of index.es.js we have:

 // run all reorder events
if (mode && mode === DragMode.SWAP) {
    this.reorder.forEach(function (o) {
        return cols[o.a] = cols.splice(o.b, 1, cols[o.a])[0];
    });
} else {
    // mode: reorder - default
    this.reorder.forEach(function (o) {
        return cols.splice(o.a, 0, cols.splice(o.b, 1)[0]);
    });
}

Based on what I have seen and tested, this is what causes the reordering. Would it be possible add a conditional prop so that we can decide ourselves whether we want to reorder? I know the use case of this can be quite specific and rare. But in my use case, I want to handle the reordering myself, and update the table with my own reordering. If I do so now, this library will do a double reordering because I am updating the table with my new order of columns. If I comment out the code above, there will not be a double reordering and instead, only my own reorder will count.

Thanks.

ds-martinso commented 3 years ago

For example, this would be perfect to have:

...
_draggableColumns$sr = draggableColumns.shouldReorder,
shouldReorder = _draggableColumns$sr === undefined ? defaultProps.shouldReorder : _draggableColumns$sr

...

if (shouldReorder) {
    // run all reorder events
    if (mode && mode === DragMode.SWAP) {
        this.reorder.forEach(function (o) {
            return cols[o.a] = cols.splice(o.b, 1, cols[o.a])[0];
        });
    } else {
    // mode: reorder - default
    this.reorder.forEach(function (o) {
        return cols.splice(o.a, 0, cols.splice(o.b, 1)[0]);
    });
}

...

/** determines if a reorder should be issued. Defaults to true */
shouldReorder: PropTypes.bool

...
achen88 commented 3 years ago

I ran into this issue as well, it seems like react-table-6 uses the ordering of "columns" prop to decide column header ordering. Since the HOC maintains its own reordering, the two representations seem to be out of sync.

ds-martinso commented 3 years ago

Interesting, good to know! I am not sure what the correct solution is, but I created this PR and it works for me: https://github.com/patricktran/react-table-hoc-draggable-columns/pull/27 (The author does not seem to be active, so better luck with forking)

How have you solved this @achen88 ?

achen88 commented 3 years ago

cool stuff! I've solved it via a hack, definitely would not recommend (generating a react key based on column ordering to rerender the table from scratch). I had hoped to use this library mainly for the drag and drop aspect, and it seems like the abstraction falls a little short.

Thanks for the pointer in your PR! Since react-table-6 is technically outdated I think the support will never happen.

patricktran commented 3 years ago

@ds-martinso Given that a reorder happens right after a user drags/drops a column, this is the intended behavior.

Can you provide more details/demo on your use case?