@JWLoo 

Yes, you can archive that with javascript below:

1. let myGrid = OutSystems.GridAPI.GridManager.GetGridById("MyGrid").provider;
2. myGrid.formatItem.addHandler(function (s, e) {
3.     if (e.panel === s.cells && s.columns[e.col].binding === "Sample_Product.Brand") {
4.         const cellValue = s.getCellData(e.row, e.col, false);
5.         const tag = document.createElement("span");
6.         tag.className = "tag"; // Add a class for styling
7.         tag.textContent = cellValue; // Set the tag text to the cell value
8.         // Optionally, apply color based on value
9.         if (cellValue === "Apple") {
10.             tag.style.backgroundColor = "green";
11.             tag.style.color = "white";
12.         } else if (cellValue === "KFC") {
13.             tag.style.backgroundColor = "orange";
14.             tag.style.color = "white";
15.         } else {
16.             tag.style.backgroundColor = "gray";
17.             tag.style.color = "white";
18.         }
19.         e.cell.textContent = ""; // Clear any existing text
20.         e.cell.appendChild(tag); // Add the tag component
21.     }
22. });

The result:

Hi @JWLoo,

If you feel my solution helped, please mark it The Solution for the question. It will help other users who have same problem find the answer faster.

Hi @JWLoo, you can use "Tag" block available in "OutSystemsUI", it accepts pre defined colors from "color" static entity, in case you want custom colors, you can write your own CSS and use that using the "ExtendedClass" input.

Thanks
Gitansh Anand