Add <Datagrid rowSx> prop to customize row style for each record

[zhujinxuan]

This PR intends to substitute rowStyle by rowSx for styling the Datagrid and SimpleList rows for two reasons:

1. Sx is more common in mui instead of style to style.
2. rowStyle will apply to the whole row. If one wants to highlight specific cells in the datagrid body, for example highlight duplicate phone numbers, they have to write their own DatagridBody and DatagridBodyRow. Meanwhile, rowSx can fix the problem.

Follow up of #8630

[djhi]

Thanks! This is nice but please make it an alternative to rowStyle, not a replacement.

[zhujinxuan]

Sorry, I was busy this week. I will make the change next Tuesday.

[zhujinxuan]

Sorry for the delay, I have had a back pain in last few weeks that kept me away from computer. I have add rowStyle back to the document, to the ra-ui-materialui and to Datagrid.stories.tsx. But I keep the rowSx change in the demo and in the example because I think it would be better if the demo code is more consistent with the code style of mui.

Please let me know if there is any thing needed to be updated about this PR.

[djhi]

Looks great! Thanks! I hope you feel better now :)

[djhi]

Great! Thanks!

[fzaninotto]

Thanks for your PR!

However, I'm not very fond of this change.

First, it adds some duplication. I know it's for backward compatibility, but the doc for rowSx is almost the same as for rowStyle, and there is no indication of which prop to use, so I find it overall confusing.

Second, we already have an sx prop in Datagrid and SimpleList. If we want to offer something really better than rowStyle, why not introduce a rowClass prop instead, allowing to change the class name depending on some condition? That would allow to keep the datagrid styles in one place.

Waiting for more feedback to decide.

[zhujinxuan]

Hi, @fzaninotto . I made this change to have a method to style a single cell. We can add sx to Datagrid, but it cannot style single cell because cell classes in each row are the same. Currently, the only way to style a single cell is to use nth two times, which is not intuitive.

I think rowClass is also a solution (Indeed I think rowClass is better than rowSx). Shall we add a deprecation note of rowStyle after introducing rowClass?

BTW, if we decide to move on with rowClass, I can update this PR to a rowClass PR.

[djhi]

I actually think rowSx to be pretty intuitive as you define the styles according to the record at the same place whereas rowClass would require you to check two different props to ensure you applied the correct className for the conditions you check on the record.

[slax57]

Personally, I'm also in favor of adding the rowSx prop.
Besides, this feature allows for things like setting the style of the row directly depending on the record, for instance using a numeric value (like a percentage) from the record directly to compute a bg or fg color.
This would be way harder to do with rowClass.

[fzaninotto]

Seems I'm in minority, so we'll go for it! I'll just deprecate the rowStyle property in another Pr to avoid confusion.

Thanks for your contribution!