Reordering (dragging) of rows

[philgei]

Hey, I was wondering, if there are any plans to add dragging of Rows?

[nick-keller]

Hey @philgei ,
Can you please explain your use case (it has to be significant enough to be worth implementing) and how you think it should work ? (describe the interaction with the cursor for instance)

[nick-keller]

Thank you for the kind words!
Happy to discuss and help if you plan on submitting a PR. Otherwise I'll keep this post up to date to let you know when I start working on it.

[cholazzzb]

@nick-keller. I'd like to try out a new feature: drag-and-drop reordering. As a dependency, I'd like to include react-beautiful-dnd. However, I'm not sure how to make this feature optional. May I submit pull request? (I'm not sure how much time I'll need to experiment with this). Is there anything you want me to know about dos and don'ts in PR?

[nick-keller]

Thx for contributing @cholazzzb !
UX wise I think we should do the same thing than Googlesheet:

• display open hand cursor on gutter when row is selected
• Trigger re-ordering when user starts dragging from the gutter of a selected row(s)
• Display horizontal line as user drags (row preview is not necessery)
• Call onChange when the rows are dropped
• Select the newly inserted rows

Now regarding implementation, I would strongly suggest not to use react-beautiful-dnd:

• x4.3 times the package size of DSG
• Not maintained
• Not sure how it would help
• Should be "easily" implementable without it

We already have all the code that computes coordinates and everything, so we should be able to manage it directly without having to require a large dep. Feel free to try things out and submit PRs, we can discuss implementation here if needed!

[cholazzzb]

After searching, I found that The drag and drop concept is to use draggable for each row and droppable for the row container If the user wishes to make this feature optional (not all users desire this feature), I think the best way to do so is to allow the user to write their own custom row (draggable row) and custom RowContainer (droppable space). It will also reduce the library size and allow the user to freely implement the way to implement drag and drop feature.
After I view some of this library code, I think one of solutions is to inject row (wrapped with draggable) and RowContainer (wrapped with droppable) via props

Maybe it looks like this

import Row from 'react-datasheet-grid/Row';
import RowContainer from 'react-datasheet-grid/RowContainer'

const CustomRow = () => (
    <Draggable>
      <Row />
    </Draggable>
);

const CustomRowContainer = () => (
   <Droppable>
      <RowContainer/>
   </Droppable>
)

const Page = () => (
  <DataSheetGrid
    value={data}
    onChange={setData}
    columns={columns}
    rowContainer={CustomRowContainer}
    row={CustomRow} // optional, default is Row from inside of this library
  />
);

Then, there is onDragEnd callback after the row is dragged. The user need to update the cell manually or this library give new helper reorder
How do you think? @nick-keller

[nick-keller]

I've never used the Drag and Drop API, I can have a look at it.
I agree, user should be able to disable the feature.

But I am not convince that enabling the feature should require that much user work:

• This sounds very complicated to implement for the user, this should be a built-in feature not just "feasible" with a lot of work
• Letting the user implement this feature would require a lot of API changes to expose some deep mechanisms

I believe a simple boolean prop disableReOrdering or something like that shoule be enough.

[jamilu-jibrilla]

Hi, any update on this?
I am working on a table with airtable/spreadsheet like functionality, this library is the best i found so far with all the stuff i need except for the row reordering, would be really helpfull if there is a way i can implement this.