# How do I highlight a list or table row?

**URL:** <https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341>\
**Category:** Ask for Help\
**Created:** [May 14, 2024, 2:31am UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341 "2024-05-14T02:31:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![blairrorani](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blairrorani/32/43426_2.png) [@blairrorani](https://community.glideapps.com/u/blairrorani)\
**Post date:** [May 14, 2024, 2:31am UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341/1 "2024-05-14T02:31:57Z")

</div>

**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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 15, 2024, 1:13am UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341/2 "2024-05-15T01:13:44Z")

</div>

Here’s my setup:

> **[How do I highlight a list or table row?](https://docs.lowcode.agency/recordings/JMEFhdijYm6s18RgmINB)**
>
> Summary:
> The video explains how to set up conditional formatting for table rows based on certain conditions using custom CSS classes and components like checkboxes and rich text components.
> 
> Chapters:
> 00:00 Introduction and Screen Sharing
> 00:22...

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

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

```

---

<div class="post-metadata">

**Author:** ![Makedonix](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/makedonix/32/79832_2.png) [@Makedonix](https://community.glideapps.com/u/Makedonix)\
**Post date:** [March 6, 2026, 8:27am UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341/3 "2026-03-06T08:27:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 6, 2026, 11:33pm UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341/4 "2026-03-06T23:33:18Z")

</div>

> [@blue\_square green\_square purple\_square How to Color Rows in a Table Collection](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512):
>
> 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. thread 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.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 13, 2026, 11:34pm UTC](https://community.glideapps.com/t/how-do-i-highlight-a-list-or-table-row/73341/5 "2026-03-13T23:34:19Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.