[data grid] Advanced drag and drop behaviors: Row reordering in Row Grouping and Tree Data

[DanailH]

Summary 💡

Follow up to #206

Currently, when Row Grouping or Tree Data is used, the row reordering feature is disabled. This was intentionally made so in order to ship the feature quicker. Also, at the time, there were a few unanswered questions regarding how the reordering will work when you try to move a child row out of the parent as well as moving a parent to become a child of another parent.

This issue is to track the demand for a feature like that and ultimately start working on the implementation.
Last but not least, it has to be decided if a feature add-on like this should be part of the Pro or the Premium plan

Advanced Drag and Drop Behaviors

"Row Reordering" doesn't properly include all the behaviors expected from dragging and dropping rows. It is one of the possible outcomes of dragging a row to drop it into a different position.

When a row is dragged to a different position, users expect:

Plain data

• Change a row's displayed order.
  The internal order of the rows is updated, with the possibility to make the order persistent through the callback onRowOrderChange
• [data grid] Reorder multiple row at the same time by dragging #4380
  Support multiple rows reordering via row selection

Tree data

• [data grid] Change a row's hierarchy in Tree Data by dragging a leaf to a different parent node #7774
  The treeDataPath value needs to be updated; following getTreeDataPath, we need a setTreeDataPath that receives the row and the new path array, based on where the row was dropped.
  Because getTreeDataPath is optional, and by default, we use the path field, we may additionally need an optional callback onTreeDataPathUpdate.

• [data grid] Tree data: Change a row's displayed order inside its parent group. #8352
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex are based only on the indexes inside the given group.

Both behaviors in Tree Data should work combined or independently

Row Grouping

• [data grid] Change a row's group in Row Grouping with drag and drop #7775
  The field value referenced by the grouped column needs to be updated; The new value is based on the sibling's rows where the row was dropped. We may need onRowGroupChange to pass this new value and the row that is getting updated.

• [data grid] Row grouping: Change a row's displayed order inside its parent group. #8353
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex are based only on the indexes inside the given group.

• [data grid] Grouping using drag and drop #5235
  Group rows on the fly by dragging rows into others

Both behaviors of Row Grouping should work combined or independently

[ghost]

glad this was brought up as we are definitely waiting on this feature for we need it for our tree data.
pretty basic stab at it but I imagine it's mostly about updating the row hierarchies upon drag and drop.

[tvvignesh]

Was looking for this feature today for our product. Using MUI Pro license. Eagerly awaiting its release. Thanks

[flaviendelangle]

@tvvignesh what would be the wanted behavior for you ?

Do you want to be able to move a row inside it's parent ?
Do you want to be able to move a row inside another parent and update your row accordingly ?

[edwinvrgs]

In my team we had the same situation as @tvvignesh, we ended up adding react-dnd on top Data Grid Pro to implement to those features @flaviendelangle mentions:

1. Moving rows between the parent.
2. Moving rows inside different parents depending on the nesting level.

Looking forward to this release too. Thanks in advance.

[tvvignesh]

@flaviendelangle We were trying to use the tree hierarchy in the MUI data grid. While the tree worked well, this is what we wanted to do:

1. Move rows within a group in the tree during which we update the sequence against the group in the backend
2. Move rows in between groups in the tree during which we want to update the group name in the backend
3. Reorder groups during which the sequence of groups changes in the backend

We are trying to build chatbot dialog flows using the data grid for our product which is why we are looking for this. Thanks in advance.

[DanailH]

Maybe it's time to prioritize this one. It will most likely be only available for v6 because it will utilize the new row structure but maybe there is a way to also have it in v5 with minimal effort. It's probably worth investigating a bit to know what is possible.

[horaciosystem]

Any updates on this?

[horaciosystem]

@edwinvrgs

Currently when row grouping or Tree Data is used the row reordering feature is disabled.

It would be awesome if you create and share a code sandbox with your solution ✨

[coladaag]

Hey guys. Would be pretty awesome to get this done ASAP as we moved our lists to your lib but as we're using tree-data this is an essential feature. Any timeline on that?

[aludin]

We are also dependent on this feature, which is quite essential for us.

[NilsNathorst]

This will be a most welcome feature!

[f4bienk]

We are also depend on this feature to be released.

[ArturoTorresMartinez]

Also depend on this feature quite heavily

[moutazsadeh]

When is this expected to be ready? We depend on this feature also heavily

[lwestenberg]

we also depend on this feature, hope to see it soon

[Ut1998]

Summary 💡

Follow up to #206

Currently, when Row Grouping or Tree Data is used, the row reordering feature is disabled. This was intentionally made so in order to ship the feature quicker. Also, at the time, there were a few unanswered questions regarding how the reordering will work when you try to move a child row out of the parent as well as moving a parent to become a child of another parent.

This issue is to track the demand for a feature like that and ultimately start working on the implementation. Last but not least, it has to be decided if a feature add-on like this should be part of the Pro or the Premium plan

Advanced Drag and Drop Behaviors

"Row Reordering" doesn't properly include all the behaviors expected from dragging and dropping rows. It is one of the possible outcomes of dragging a row to drop it into a different position.

When a row is dragged to a different position, users expect:

Plain data

• Change a row's displayed order.
  The internal order of the rows is updated, with the possibility to make the order persistent through the callback onRowOrderChange

Tree data

• [data grid] Change a row's hierarchy in Tree Data by dragging a leaf to a different parent node #7774
  The treeDataPath value needs to be updated; following getTreeDataPath, we need a setTreeDataPath that receives the row and the new path array, based on where the row was dropped.
  Because getTreeDataPath is optional, and by default, we use the path field, we may additionally need an optional callback onTreeDataPathUpdate.
• Change a row's displayed order inside its parent group.
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex is based only on the indexes inside the given group.

Both behaviors in Tree Data should work combined or independently

Row Grouping

• [data grid] Change a row's group in Row Grouping with drag and drop #7775
  The field value referenced by the grouped column needs to be updated; The new value is based on the sibling's rows where the row was dropped. We may need onRowGroupChange to pass this new value and the row that is getting updated.
• Change a row's displayed order inside its parent group.
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex is based only on the indexes inside the given group.

Both behaviors Row Grouping should work combined or independently

When can we expect this feature for row reordering in mui data grid.
Is there any solution there or do we need to propose a solution for this.

[DanailH]

Hey, @Ut1998 I apologize for the delay but we had more pressing features and the release of v6 that needed to be shipped. That being said part of this feature is scheduled to be worked on in this quarter. You can track the progress here -> #3377

[Ut1998]

HI @DanailH, thank you for the response, so is there any expected timeline for this feature to get released?

[joserodolfofreitas]

Hi @Ut1998, from those functionalities listed with checkboxes, which of those is the most relevant to your use case?

[Ut1998]

Hi @joserodolfofreitas, The first one under Row Grouping is most relevant for our use case, second one somehow I tried to achieve. If needed I can provide solution for the second point in Row Grouping. (So that I can also be a contributor to MUI).

[Ut1998]

hi @DanailH , is it possible to achieve below use case in Tree Data Grid.

1. Suppose we have an action button (Add) on parent level and when we click on Add, then a child row should get added.
2. And nesting this to at least 2 levels, i.e, the child that gets added, will have a Add button, which in turn add a grand child to the child.
3. And the expand icon should be only there if a row has child components.

[DanailH]

@Ut1998 you can check here for more details https://mui.com/x/react-data-grid/editing/#full-featured-crud-component but the short answer is - yes. To create a child row you need to set the appropriate model and provide the path to that child row.

[Ut1998]

hi @joserodolfofreitas, is there a feature in MUI tree data grid, in which if we search the row based on any column value, and the searched result is in the nth child of the row, then it should expand that row.

[joserodolfofreitas]

The first one under Row Grouping is most relevant for our use case, second one somehow I tried to achieve. If needed I can provide solution for the second point in Row Grouping. (So that I can also be a contributor to MUI).

Thanks for the feedback and willing to contribute, @Ut1998!

is there a feature in MUI tree data grid, in which if we search the row based on any column value, and the searched result is in the nth child of the row, then it should expand that row.

This is a bit off-topic, so you may need to open a specific issue to discuss this. The short answer is no. There's no out-of-the-box that offers this, but you can achieve this behavior by using the gridSelectors to get filtered rows' ids and the setRowChildrenExpansion method on the apiRef to expand the rows.

[vicinik]

Are there any updates on this feature? We would need both functionalities

• Row reordering inside a group
• Row movement between groups with inherent parent updates

Is there an ETA for the feature? Do you maybe need help with the implementation?

Thanks :)

[coladaag]

Hi all Yes – same request from our side. If you need additional resources please let us know. Andrea Von: vicinik ***@***.***> Datum: Freitag, 23. Juni 2023 um 10:22 An: mui/mui-x ***@***.***> Cc: Andrea Salce ***@***.***>, Comment ***@***.***> Betreff: Re: [mui/mui-x] [data grid] Advanced drag and drop behaviors: Row reordering in Row Grouping and Tree Data (Issue #4821) Are there any updates on this feature? We would need both functionalities * Row reordering inside a group * Row movement between groups with inherent parent updates Is there an ETA for the feature? Do you maybe need help with the implementation? Thanks :) — Reply to this email directly, view it on GitHub<#4821 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKMD664OV5J7MZBKFD7WDP3XMVG5JANCNFSM5VQ6CNIQ>. You are receiving this because you commented.Message ID: ***@***.***>

[afternoon2]

Also, having column reordering on row grouping would be nice as well!

[Chrisbekker]

We also need row reordering inside a group (i.e. parent-child relationship) as well as between groups. When will this feature be released?

[iii-huang7017]

Row reordering inside a group

[scarqin]

We are also depend on this feature to be released.

[osheral]

Need this feature.

[DoubleDebug]

Any update on this feature?

If it's hard to handle all advanced scenarios, maybe just focus on the simple ones first.
For example, it would be nice to have row reordering for the parent (top level) rows.

Either way, my company would love to have this feature!

[coladaag]

After many months without update on this it would be great to get some kind of feedback from the dev-team. For the community is some kind of blind flight.

[Keanottesen]

We are also depend on this feature to be released.

[Kavan72]

We are also depend on this feature to be released.

+1

[juanp83]

Need these features too!

[tunganh-phamba]

we also need these features - from Premium Customer

[AO19]

@DanailH An update on these features is overdue, please provide some status update. (Premium)

[6r3al]

@DanailH @joserodolfofreitas @flaviendelangle @cherniavskii
Hi would you have any updates on this one by any chance? Is it being worked on? Is there any ETA?
We would need row reordering within a group in priority, happy to wait for the other features for now.
Pro Customer

[joserodolfofreitas]

@6r3al, there is no ETA at this time, but from all the different features covered in this issue, reordering within row grouping is the highest priority. We may be able to tackle it soon.

(It's worth mentioning that it's going to follow it's "parent" feature and be under the Premium plan)

[6r3al]

Hi @joserodolfofreitas, thanks for getting back to me. You mentioned your team should be able to tackle it soon. Any insight of how soon is "soon" 😃?
My company is considering moving from MUI to a competitor who offers such functionalities, this is a must have for us.