[DataGrid] Row ordering fix for virtualization

[yaredtsy]

Fixes #6165

Problem

Row ordering sometimes won't work with virtualization enabled. if the row that's being dragged unmounted onDragEnd event won't be triggered.

uu.mov

Solution

I looked at how other people approach this problem (AG-Grid, react-beautiful-dnd). When you drag an element, you drag the element or a copy of the element, which will always be in the DOM. but in MUI-DataGrid, when you drag a row you are dragging the ghost of the row so the element might get unmounted while dragging when virtualization is enabled. This causes onDragEnd not to be triggered. This can be solved by adding dragend listener with addEventListener  to the row because DOM event listeners persist longer than component life cycles.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-6765--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	627.5	912.2	683.4	735.72	108.053
Sort 100k rows	ms	574.9	1,025.6	764.6	816.68	148.122
Select 100k rows	ms	164.4	277.4	217.4	223.54	42.764
Deselect 100k rows	ms	138.4	301.7	167.2	196.3	63.381

Generated by 🚫 dangerJS against 6e24d3d

[yaredtsy]

I have found other ways to fix this issue without using addEventListener, I have created PR #7357

[DanailH]

@yaredtsy in order to move forward please fill in and submit the CLA form -> https://forms.gle/RTDocuuVsEuUbxJ57

[yaredtsy]

hey @DanailH , I looked at AG-Grid. and I think I have found a better way for this issue and other virtualization-related issues. I have created a PR at #7357. and I am thinking of closing this PR.