Different background color to even and odd rows in ListView

[Ofer-Gal]

Category

[? ] Enhancement
[? ] Question

Version

Please specify what version of the library you are using: [ 3.6.0 ]

Expected / Desired Behavior / Question

Is there a way to Style even and odd rows in ListView with different color?

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[milanholemans]

As far as I know I'm afraid the answer is no. Although this seems relatively easy to implement by exposing an extra property called 'onRenderRow' used in this example. I can add this, but it's not up to me to decide whether or not to add it.

[joelfmrodrigues]

@Ofer-Gal thanks for the suggestion.
@milanholemans more than happy to get a PR with the change :) Any improvements are welcome.
Please just keep in mind to make the property optional and disabled by default, so anyone upgrading versions would not experience a different behaviour by default.

[Ofer-Gal]

@AJIXuMuK
What will the property be? or How would I get it to work?

[milanholemans]

As far as I know I'm afraid the answer is no. Although this seems relatively easy to implement by exposing an extra property called 'onRenderRow' used in this example. I can add this, but it's not up to me to decide whether or not to add it.

@Ofer-Gal you can use the same approach as in the example linked above.

[SharePointReady]

Hi @milanholemans,

The example given at example is not working for listView control. It is giving below error. Can you please check?

[milanholemans]

Hi @SharePointReady, I think the issue is that an SPFx web part and PnP SPfx controls are targeting a different version of fluent UI. An SPFx web part uses version ^8.106.4, SPFx controls use 8.106.4 strictly.
I suggest that you run npm i @fluentui/react@8.106.4 -SE so you're always on the same version of Fluent UI.