[docs] Split Rows doc page

[flaviendelangle]

Doc preview

I merged #5156 but we can improve the content here if needed

Some of those pages have outdated content, we can improve them on this PR but if it's heavy changes I would suggest to split and then improve.

I don't really know where to put the "Styling rows" small section.

@m4theushw I moved the Master Detail doc into the "Row" folder instead of "Group & Pivot" as discussed a few weeks ago.

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	255.7	651.2	330.4	383.46	143.382
Sort 100k rows	ms	485.9	902.2	875.1	800.2	157.964
Select 100k rows	ms	144.8	285.2	212.1	215.06	48.163
Deselect 100k rows	ms	149.7	255.3	228.7	208.38	39.856

Generated by 🚫 dangerJS against ca150d4

[flaviendelangle]

I would add a paragraph describing the default behavior with a link to the Sorting page to let people know how those two features interplay.

I think this information is worth displaying up-front instead of in a warning at the end of the page

[flaviendelangle]

@DanailH What do you think about copying the structure of this example ?

To display both changes instead of adding an explanation after.

[DanailH]

Interesting. I was thinking in terms that this is something that a user can do so I wasn't sure what would be the benefit of showcasing this, but we can add a demo with the dragged column be the last one. The problem with this is that if you have a horizontal scroll then the dragged column will be out of view.

[flaviendelangle]

This page will require a lot more content in v6 with #4927 and with all the lazy-loading related topics that @DanailH is handling.

It could even require a dedicated page folder at some point with a page for each approach.
But for now, we can improve this one.

[m4theushw]

Does it make sense to merge this page with "row definition", to keep consistency with https://mui.com/x/react-data-grid/column-definition/#providing-content? In essence, we're talking here about different approachs to feed the grid with rows. One of the approachs also allows to update rows (updateRows), but it could also be understood as replacing one row with another (updated) row, so "providing rows via API".

[flaviendelangle]

@joserodolfofreitas @samuelsycamore I'm interested in your opinion here

I agree that this section could be on the same page as the row update sections

But having the "Row identifier" section in the same page as well will start to make the page very long.

[DanailH]

Would it make sense to split that page into 2, one for Row updates and one for Row loading? The Row loading one will have the infinite + lazy loading and anything else related to loading rows on the fly.

[joserodolfofreitas]

Yeah, I agree it makes sense to move the lazy loading to its own page.
We could probably use one more depth level on the side bar to hold everything about "feeding data", but I agree it makes sense to separate Row updates from Row Loading (and merge Row definitions with Row updates).

But maybe we could rename these menus?

What about

• Data binding
• Lazy loading

?

[DanailH]

It can work but calling the page that is about loading rows "Lazy loading" won't be ideal as my idea was to have lazy and infinite loading there.

[joserodolfofreitas]

Then:

• Data binding
• Lazy and infinite loading

?

[m4theushw]

@joserodolfofreitas I would add items to the left sidebar. Keeping "lazy loading" inside https://deploy-preview-5195--material-ui-x.netlify.app/x/react-data-grid/row-updates/ will make the page very long. Note that we need to consider that "Row updates" and "Row definition" will be merged.

[cherniavskii]

@DanailH @m4theushw @joserodolfofreitas
Did we reach an agreement on this topic? Or should I create a separate issue for discussion to unlock this PR?

[m4theushw]

Does it make sense to merge this page with "row definition", to keep consistency with https://mui.com/x/react-data-grid/column-definition/#providing-content? In essence, we're talking here about different approachs to feed the grid with rows. One of the approachs also allows to update rows (updateRows), but it could also be understood as replacing one row with another (updated) row, so "providing rows via API".

[samuelsycamore]

This feels vague—it isn't clear what to me what it means to "define" a row. It seems like the page is all about defining row identifiers, so I would go with that.

Suggested change

	title: Data Grid - Row definition
	title: Data Grid - Defining row identifiers

[cherniavskii]

Apart from row identifiers, this page also mentions rows prop structure and has a warning about keeping the same reference.
Also, "Row definition" is consistent with "Column definition" page https://mui.com/x/react-data-grid/column-definition/

[cherniavskii]

(Adding missing "Feeding data" section title to make it more clear https://deploy-preview-5195--material-ui-x.netlify.app/x/react-data-grid/row-definition/)

[joserodolfofreitas]

Regardless of the improvements we may still want to do (like renaming some of the row sub-sections, or reorganizing the content), I think this PR serves its purpose already. It splits the row documentation and it's already a great improvement over what we had before.