clauderic / clauderic/react-sortable-hoc

Integration with Reactabular?

Open
#95 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.9k
Forks
959
PR merge metrics
No merged PRs in 30d

Description

I'm developing a little [table component](https://reactabular.js.org/). Currently I am using React DnD for handling drag and drop. I feel react-sortable-hoc would be a simpler alternative to inject. I've found a couple of issues while investigating integration, though:

1. HoC passes react-sortable-hoc specific props to children. It would be good to have a way to disable this behavior as I don't need those props (the rest are needed, though). My API relies on the fact that you can pass through props so having extra props there makes React give rather nasty warnings unless I extract them myself.
2. I can't see a way to get intermediate sorting information. It would be better if `onSortMove` gave the visible order in addition to event. I need this to sort table body based on header order. Body sorting wouldn't have to be animated.
3. Dealing with nested headers is tricky. In this case I essentially have multiple `th`s in hierarchy and there's a relation between some of the headers. This is a hard problem as there is a dependency that's not visible in the DOM. In React DnD I solve this algorithmically. I'm not sure how to approach this with react-sortable-hoc yet.
4. During row sorting (nested rows represented as flat like [here](https://reactabular.js.org/#/data/drag-and-drop-with-tree)) I might need a way to apply a custom algorithm while dragging. This seems to be related to 2. but it feels a little tricky.

I am not sure if it's possible to resolve all of these easily. I could get partial support (no nesting) done fairly easily. It's those nested cases that feel painful.

The API is pretty cool. I might move some of the props to an optional HoC initialization so you could write `SortableContainer({ axis: 'x' })(row)` or so. This would make it easier for me to handle integration (no need to worry about injecting props elsewhere in the structure).

I can see react-sortable-hoc is an awesome fit for pure lists. I hope this feedback helps you to push it a notch further and I can likely contribute some PRs if we can agree on work items.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.