[data grid] How can I edit the header name of a specific row and clone that row in MUI DataGrid with tree data?

[mahammahmood]

The problem in depth

1. I'm using MUI's DataGrid with tree data to display an itinerary structure. I want to make each itinerary name editable, including for dynamically added itineraries. How can I implement inline editing for node names within the tree data in the DataGrid? Are there any best practices or examples for making tree data cells editable in this way? Additionally, how can I ensure changes are reflected correctly within the nested structure of the grid?

2. In my MUI DataGrid with tree data, I want to add a 'Clone' functionality that allows users to duplicate an itinerary (including newly added ones). What would be the best way to implement a cloning feature in a tree structure within DataGrid? How can I handle nested data when duplicating nodes to ensure the cloned itinerary has the same structure and data as the original? Any examples or recommendations would be helpful.

Here is the example
https://stackblitz.com/edit/react-sj2kwa?file=customGridTreeDataGroupingCell.tsx,Demo.tsx

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data, Grid, Premium, Tree, Data, editable, row, clone
Order ID: 91010

[github-actions]

👋 Thanks for using this project!

We use GitHub issues as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with MUI X please check out https://mui.com/x/introduction/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.