How do I highlight a list or table row?

[blairrorani]

Goal
Some rows in a table are have a diff background colour.

Progress
I can add a table (or list) component to a page.
I want some rows/record to have a red background.

Help needed
I don’t know how to change the colour of specific rows/records based on logic, e.g. if column X = red then row background = red.

[ThinhDinh]

Here’s my setup:

How do I highlight a list or table row?

.custom-check div[class*="pages-component-renderer___StyledDiv7"]:has(div[class*="rt-check"]) {
background: #F1E5AC;
}

[data-testid*="rt-check"] {
margin-top: 0px !important;
}

[Makedonix]

This is beautiful, perfect for card components, but how about a data grid row?

[ThinhDinh]

How to Color Rows in a Table Collection

There are multiple ways to color rows inside a Table Collection. To indicate row status (e.g., High, Medium, Low), you can use one of three approaches: Button column (aria-label) — reads the button’s aria-label to determine row color. Image fragment in the src — adds a fragment to the image URL (e.g., #High). Boolean column — uses a true/false value to control row color. Part 1 — Color Rows via Button Column This method reads the button’s aria-label and styles the entire <tr> accor…

If it doesn’t have to be a data grid, you can switch to a table and do this.