Setting background color to specific cells

💬 App Building
1

I have a table where I’d like to highlight specific cells based on the values in a state array. For example, if I have an array like this:

const newUsers = [ { id: 0, user: "Chic Footitt" }, { id: 2, bio: "...." } ];

I want to set the background of a cell in the table to red if:

  1. The row’s id matches an id in the newUsers array.
  2. The column key (e.g., user, bio) exists in the corresponding object in the newUsers array.

I want to check if the column key is present in the array for the matching row and, if so, highlight the cell with a red background.

While attempting to implement this, I tried accessing item and setting the logic in the table’s background value. However, I’m encountering issues where item is undefined, and the same happens with currentSourceRow. Is it possible to achieve this dynamically? My goal is to highlight random cells as long as they meet the criteria in the array, so I’m looking for a dynamic way to handle this.

Screenshot 2025-01-27 at 4.42.22 PM
Screenshot 2025-01-27 at 4.42.22 PM1791×502 75.1 KB

2

Hey @oriyu,

Yup, you can definitely achieve this.

A simple way of approaching this is by following these steps:

  • Go to your column setting, and then click on background. Within this field you can use {{ item }} which will iterate through the value of each cell on that column
  • Apply a find of your newUsers variable: e.g. {{ newUsers.value.find ( x => Object.hasOwn(x, 'user') && x.id === currentSourceRow.id) ? "red" : ""}}

For each column you will define the key you're searching, so user, bio, etc. This will find in your object an array that includes both the key for your column AND the id of each row. If it finds an array, it will return red, otherwise no color will be applied.

Hope this helps!

2 Likes