Drag and Drop columns with react virtualized

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/

[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.

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