ntbosscher/react-window-sortable

React component for draggable, efficiently rendering large lists with react-window

React Window Sortable

This library provides drag and drop sort functionality for very large lists.

This library wraps Brian Vaughn's excellent library react-window and adds drag and drop sorting.

Features

• Drag and drop to re-order list items
• Start drag with customized element or button
• Auto-scrolls when you drag something near the start or end of scroll view
• Can handle giant lists (+100 elements)
• Handles vertical lists only
• Very customizable

Install

# yarn
yarn add react-window-sortable

# npm
npm install --save react-window-sortable 

Usage

Fixed Size List (for rows of equal height) full example

<SortableFixedSizeList
    height={height}
    width={width}
    itemCount={n}
    itemSize={30}
    itemData={this.state.data}
    onSortOrderChanged={({originalIndex, newIndex}) => {
        move(this.state.data, originalIndex, newIndex);
        this.setState({
            data: this.state.data.slice(0),
        })
    }}
>
    {React.forwardRef(({data, index, style, onSortMouseDown}: ChildrenProps, ref: Ref<any>) => (
        <div ref={ref} style={style}>
            <button onMouseDown={onSortMouseDown}>drag handle</button>
            {data[index]}
        </div>
    ))}
</SortableFixedSizeList>

Variable Size List (for rows of variable height) full example

<SortableVariableSizeList
    height={height}
    width={width}
    itemCount={n}
    itemSize={index => index % 2 === 0 ? 30 : 50}
    itemData={this.state.data}
    onSortOrderChanged={({originalIndex, newIndex}: {originalIndex: number, newIndex: number}) => {
        move(this.state.data, originalIndex, newIndex);
        this.setState({
            data: this.state.data.slice(0),
        })
    }}
>
    {React.forwardRef(({data, index, style, onSortMouseDown}: ChildrenProps, ref: Ref<any>) => (
        <div ref={ref} style={style}>
            <button onMouseDown={onSortMouseDown}>drag handle</button>
            {data[index]}
        </div>
    ))}
</SortableVariableSizeList>

API

interface Props {
    // a render function to render list items
    children: React.ComponentType<ChildrenProps>;
    
    // the distance from the top or bottom of the scroll
    // window where autoscroll should kick in
    autoScrollWhenDistanceLessThan?: number;
    
    // the speed at which the autoscroll should go
    autoScrollSpeed?: number;
    
    // set the class name for the element that is being
    // moved by the cursor
    draggingElementClassName?: string;
    
    // set override styles on the style prop for the element
    // being moved by the cursor
    draggingElementStyle?: CSSProperties;
    
    // a custom element to render as a spot where the dragged
    // element can be dropped.
    dropElement?: any;
    
    // a callback when a sort has completed
    onSortOrderChanged(params: { originalIndex: number; newIndex: number }): void;
    
    // the height of the scroll window (px) 
    // you may want to use https://github.com/bvaughn/react-virtualized-auto-sizer
    // for this.
    height: number;
    
    // the width of the scroll window (px) 
    // you may want to use https://github.com/bvaughn/react-virtualized-auto-sizer
    // for this.
    width: number;
    
    // number of rows in data set
    itemCount: number;
    
    // height of the list item in px
    // for FixedSizedLists, this will be a constant.
    // for VariableSizedLists, this will be a lookup function
    itemSize: number | (index) => number;
    
    // the data to pass to the render function
    itemData: any[];
}

react-window-sortable's Issues

'mouse down <#>' spamming console.

Is there any way we can get a prop setting for this maybe? I'm sure it helps for debugging, but it spams the console which is a bit unnecessary in my opinion.

https://imgur.com/a/GkOdecR

Issue with dragging to last position

I am testing with your example for SortableFixedSizeList.
Upon inspecting at the callback onSortOrderChanged , the value of newIndex would not go above n-2

Distinguishing between onMouseDown vs onClick for drag and drop

Hi there. My list contains items that have buttons and inputs, so I need the onClick to work in conjunction with the onMouseClick event... but onClick is triggering the onMousedown event attached to the onSortMouseDown.

Is there any way to get the onSortMouseDown to work with a different event handler so that the user can click the different components of the item as well? I tried attaching onSortMouseDown to onDrag and tried creating states to show if it was being dragged or not but I couldn't get anything to work.

The only solution is to make a drag handle like the example shows but I was hoping to not have to do that.;

List Blank while Scrolling even though I'm passing down the "style" prop

react-window
react-window-sortable

Literally my code doesn't change from switching from using:

import { FixedSizeList } from 'react-window';
to
import { SortableFixedSizeList } from 'react-window-sortable';

Any idea what could be causing the blanking? Everything else works great and it's easy to use. I'd love to use this in a production project if this could be solved somehow!