React-sortable-hoc: Drag and Drop columns with react virtualized

[samichtioui]

I'm looking for an exmple of drag & drop columns with react-sortable-hoc and react-virtualized, I have not figured out how I can do it. Plz help me ...

<Table
                                        height={height}
                                        width={1500}
                                        headerHeight={styles.rowHeight}
                                        rowHeight={styles.rowHeight}
                                        rowCount={tableData.length}
                                        rowGetter={getRow}
                                        headerStyle={styles.headerRow}
                                        rowStyle={getRowStyle}
                                        headerClassName="headerColumn"
                                    >
                                        {
                                            columns.map((line, key) => (
                                                <Column
                                                    key={key}
                                                    width={line.width}
                                                    dataKey={line.dataKey}
                                                    label={line.label}
                                                />
                                            ))
                                        }
                                    </Table>

@clauderic
I succeeded for the rows but not for columns by following this link: https://embed.plnkr.co/N4iYHYE9gPLp4Y3NHbhk/

[samichtioui]

@clauderic Can u help me pls?
I created an issue stackoverflow

[lrecknagel]

I am also really looking for an idea how this can be achieved. I already tried to the extent the Column component but no luck with that. Its also interesting how to implement that with a MultiGrid example.

[szszoke]

Hi @samichtioui,

I have been struggling with the same thing but I managed to put together something which works.
You can find it here: https://jsfiddle.net/szabolcsx/ygysfogt/2/

Basically you need to provide a custom row renderer which must be wrapped in a SortableContainer HOC. Then you have to use custom header cell renderers which must be wrapped in a SortableElement HOC.

The code could use come cleanup but it will get you going.

I hope it helps.

[silvenon]

Great starting point! However, sorting is glitchy in that example, and you have to drag headers much further than is otherwise necessary. I think that's because react-sortable-hoc expects elements to be direct descendants of their sortable container. I don't know if this is a shortcoming of react-virtualized or react-sortable-hoc.

Related #163.

[silvenon]

I got it! I have no idea how I haven't seen this before, but headerRowRenderer itself allows us to make header cells direct descendants of the sortable container.

Complete example: https://codesandbox.io/s/vq8n2o68v5

For index I'm extracting the number from the column key. I'm not sure if that's good practice, if someone can figure out a way to read columnData from columns in headerRowRenderer, they could pass the index that way.

[clauderic]

This looks great @silvenon, thanks for taking the time to put an example together and sharing it 👍

Would you be interested in submitting a PR to add this to the examples folder? 😄

[szszoke]

@clauderic @silvenon I've met with the same issue as before. If you have a narrower column on the right, and you are trying to drag a wide column from left to right, you get a weird jumping anomaly.

Here is an example with the issue (it is based on @silvenon's code, I just added props for the column widths): https://codesandbox.io/s/1okw8py3y4

Just try to drag COL 1 over COL2, and then move a cursor a little to the left.
The issue is only present when you are trying to move a column from left to right.

I think the issue comes from the way SortableContainer would scroll the scrolling container, however in this case, the table header cannot be scrolled. If I increase the width of the header row, the jumping stops, however that messes up other things with react virtualized:

<style>
  .ReactVirtualized__Table__headerRow {
    width: 1200px !important;
  }
</style>

I tried implementing the same functionality with two grids and scroll sync. The same issue is present, so using a scrollable container doesn't solve the problem.
JSFiddle: https://jsfiddle.net/0mnwgqey/2/

Any ideas how to fix this?

[silvenon]

This is no longer related to react-virtualized, I opened a separate issue with a minimal demo. #290