Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ds-martinso opened this issue Nov 16, 2020 · 5 comments
Open

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

ds-martinso opened this issue Nov 16, 2020 · 5 comments

Comments

@ds-martinso
Copy link

ds-martinso commented Nov 16, 2020

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
Copy link
Author

ds-martinso commented Nov 17, 2020

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
Copy link

achen88 commented Jan 8, 2021

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
Copy link
Author

Interesting, good to know!
I am not sure what the correct solution is, but I created this PR and it works for me:
#27
(The author does not seem to be active, so better luck with forking)

How have you solved this @achen88 ?

@achen88
Copy link

achen88 commented Jan 8, 2021

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
Copy link
Owner

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants