Fix cell order in DOM

[pradeepnschrodinger]

Description and Motiviation

FDT recycles rows to avoid unmounts during scrolling. This greatly gives performance but leads to rows being rendered out of order in the DOM.
This is fine visually because FDT always translates the individual rows to the correct position.

However, this implementation detail becomes a pain when the user has code that depends on DOM ordering.
For instance, in #221, the user wanted to apply a border style to each row, but the unordered row elements messes up the CSS.
Another issue is that text selection inside the grid appears to split up here and there.

Another issue which I recently found in LD was that we often have cases like selenium tests which query the text value seen in the DOM.
If the query was done on the table, then the contents will be jumbled up because the rows are unordered in the DOM.

Fix

We simply sort the list of row React elements rendered by FDT by their row index rather than their recycle "key".

How Has This Been Tested?

Tested on this codesandbox and verified both the style issue and text selection issues are gone.
Also verified this on our examples locally, and also on LD.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.

[pradeepnschrodinger]

this._staticRowArray is not ordered by row Index, as seen here.
Here, I make sortedRows which is just the sorted version of this._staticRowArray, ordered by row index.

[eriihine]

@pradeepnschrodinger had some issues with selenium tests and row indexes (our tests assumed DOM order is the display order), so I tried this fix as well.

I was able to workaround the test case issues by sorting by 'props.ariaRowIndex' instead of 'props.index'.

Would it be better to 'props.ariaRowIndex' here to ensure correct DOM order vs. the display order?

[pradeepnschrodinger]

@eriihine , thanks for the suggestion.

props.ariaRowIndex is accurate for rows in context of the whole table (because it also consider headers, footers, etc), where as props.index is only accurate within the body rows.

I think this doesn't make a difference right now because the jumbled up rows are just the body rows, and are only within the FixedDataTableBufferedRows.js component.
So our usage here should be safe, but using ariaRowIndex definitely seems safer.

I'll make the change, thanks.

[eriihine]

@pradeepnschrodinger great, would it possible to consider to include this fix to some future v1.2.x release?

[pradeepnschrodinger]

@eriihine , sure.
I'll backport the fix to v1.2.x as soon as this gets merged.

[eriihine]

this would be great, thanks!

[pradeepnschrodinger]

Released with v1.2.9 and v2.0.0-beta.8.

cc: @eriihine