Description

HI!
when using drag and drop, most usages are for re-ordering elements, e.g. in a table. So it does not feel right if I want to re-order a table which items are sorted by name (a table component accepts a list of items as input and renders items.sort(...) on the output)

But there may be use cases, for example I have a table in which items are grouped by, then displayed (without sorting) and then there should be drag and drop available within each group.

I believe with current workflow of this library I'll have to store the reduced and filtered items in a separate state, or a plain object/array so that it would be find-able in onDragEnd in which only index of items are known.

I want to be able to get more information on my onDragEnd of source and destination rather than just their index. Because my indexes are not correctly mapped to my input or what i've rendered in my component. It would be very nice to be able to pass data to onDragEnd function. e.g. each of my Draggables bear an object with themselves, or even a simple string if for any good reason object would not be appropriate.

This is some (psuedotor)code example:

function MyAwesomeDataGrid({items, columns, groupBy}) {
    return <table>
            <GridHeader columns={columns} />
            <tbody>
                {
                    items.reduce(...toGroups).map(eachGroupHeader => <>
                        <tr>...groupHeader</tr>
                        {items.filter(theOnesThatBelongToThisGroup).map(eachOne => <tr>...</tr>))
                    </>)
                }
            </tbody>
    </table>
}

In my component the code above is handled by too many coupled components and my DragDropContext is in a higher level. So I wouldn't find it appropriate to restructure my code so that final form of dataStructure be defined above my DragDropContext