SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Alternating Rows

Highlights every other row using theme colors.

Get this format View on GitHub

Shared by Chris Kent
Updated Feb 19, 2019

Alternating Rows formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex % 2 == 0,'ms-bgColor-themeLighter ms-bgColor-themeLight--hover','')"
}
View sourceLink to this definitionalternating-rows.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /additionalRowClass must be object

From the contributor

How to use this sample

Summary

Highlights every other row using theme colors.

screenshot of the sample

By usng the @rowIndex keyword, the alternating style will be applied regardless of sorting and filtering.

Alternating Rows with sorting

Alternating Rows with filtering

By using the Office UI Fabric color classes for themes, we can ensure our format looks good in all themes including both light and dark as well as custom themes.

Note - The alternating row format is now available as a Design Mode wizard for View Formatting. However, this sample uses Excel style syntax (design mode uses AST) and takes advantage of theme colors (rather than the default neutral). The Design Mode wizard is awesome, but there is still value in this sample as well.

View requirements

  • None, this format will apply to any view!

Sample

Solution Author(s)
alternating-rows.json Chris Kent

Version history

Version Date Comments
1.0 February 19, 2019 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

Because this format is using the additionalRowClass property, it can be combined with column formats to make a pretty compelling visualization:

Combined with Column Formatting

Column Format samples shown above: