So I found a solution,
I Added an action column with a status number to determine which colored icon to display.
Then, I added a mutation observer to look at that status and add the appropriate icons.
The data grid only displays the rows visible on the screen and modifies the rows when the grid is scrolling.
OnReady JavaScript
//AddIcons
var elCellGrid = document.querySelector("div.wj-cells");
obGridChange = new MutationObserver(function(mutationsList, obGridChange) {
AddIcons();
});
obGridChange.observe(elCellGrid, {characterData: false, childList: true, attributes: true});
function AddIcons()
{
var arrHeaders = document.querySelector("div.wj-colheaders").querySelectorAll("div.wj-cell");
var arrRows = document.querySelector("div.wj-cells").querySelectorAll("div.wj-row");
var arrCells =[];
var nStatusCol = -1;
var sStatus = "";
var elStatusCell = null;
for(var i = 0; i < arrHeaders.length; i++) {
if(arrHeaders[i].innerText == "Status") nStatusCol = i;
}
for(var j = 0; j < arrRows.length; j++) {
elStatusCell = arrRows[j].querySelectorAll("div.wj-cell")[nStatusCol];
sStatus = elStatusCell.innerText;
switch(sStatus) {
case "0":
elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-exclamation-circle fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";
break;
case "1":
elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-red' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";
break;
case "2":
elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";
break;
case "3":
elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";
break;
case "4":
elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";
break;
case "5":
elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";
break;
case "6":
elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-red' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";
break;
}
}
}