Drag and Drop columns with react virtualized
See original GitHub issueI’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/
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:8 (6 by maintainers)
Top Results From Across the Web
react-virtualized: drag-and-drop rows and and ... - CodeSandbox
react -virtualized: drag-and-drop rows and and resizable columns - CodeSandbox. You need to enable JavaScript to run this app.
Read more >react-virtualized-draggable - npm
React components for efficiently rendering large, scrollable lists and tabular data. Latest version: 1.0.6, last published: 3 years ago.
Read more >Drag and Drop columns with react-sortable-hoc - Stack Overflow
I'm looking for an example of drag & drop columns with react-sortable-hoc and react-virtualized, I have not figured out how I can do...
Read more >react-virtualized: drag-and-drop rows and and resizable ...
Row { width: 100%; height: 100%; border-bottom: 1px solid black; ... cursor: move; /* Draggable rows should be above non-draggable List */ z-index:...
Read more >React drag and drop framework with inbuilt virtualizing ...
react -virtualized-dnd is a React-based, fully virtualized drag-and-drop framework, enabling the the cross over of great user interaction and ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 readcolumnData
from columns inheaderRowRenderer
, they could pass the index that way.@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:
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?