@Karl Larson I did! Here is the code { field: "image", headerName: "Image", editable: false, width: 150, sortable: false, filter: false, cellRenderer: (params) => { const container = document.createElement("div"); if (typeof params.value === "string" && params.value.startsWith("http")) { const img = document.createElement("img"); img.src = params.value; img.style.width = "100%"; img.style.height = "auto"; img.style.maxHeight = "80px"; img.style.borderRadius = "5px"; img.style.cursor = "pointer"; img.addEventListener("click", () => { wwLib.executeWorkflow("openImageModal", { imageUrl: params.value, }); }); container.appendChild(img); } else { container.innerHTML = '<i class="ph ph-image" style="font-size: 24px; color: grey;"></i>'; } return container; }, },

@Karl Larson A more detailed JS and screenshot of where I am at with Robert's grid return [ { field: "actions", headerName: "Actions", editable: false, width: 80, sortable: false, filter: false, cellRenderer: (params) => { const container = document.createElement("div"); container.style.display = "flex"; container.style.gap = "8px"; container.style.alignItems = "center"; // Edit Link const editLink = document.createElement("a"); editLink.innerHTML = '<i class="ph ph-pencil" style="font-size: 20px; color: #4970f0;"></i>'; editLink.title = "Edit"; editLink.style.cursor = "pointer"; editLink.addEventListener("click", () => { wwLib.wwWorkflow.executeGlobal("2db6303d-dd3e-4e35-a761-3b0d43c8b0bf", { row: params.data, type: "edit" }); }); // Delete Link const deleteLink = document.createElement("a"); deleteLink.innerHTML = '<i class="ph ph-trash" style="font-size: 20px; color: #d3251f;"></i>'; deleteLink.title = "Delete"; deleteLink.style.cursor = "pointer"; deleteLink.addEventListener("click", () => { wwLib.wwWorkflow.executeGlobal("9a7fb3eb-b86b-42f6-b60e-5655ce27cd5f", { row: params.data, type: "delete" }); }); // Activate/Deactivate Link const toggleLink = document.createElement("a"); const isActive = params.data.status === "Active"; toggleLink.innerHTML = isActive ? '<i class="ph ph-toggle-right" style="font-size: 20px; color: #0f973d;"></i>' : '<i class="ph ph-toggle-left" style="font-size: 20px; color: #98a1b2;"></i>'; toggleLink.title = isActive ? "Deactivate" : "Activate"; toggleLink.style.cursor = "pointer"; toggleLink.addEventListener("click", () => { wwLib.wwWorkflow.executeGlobal("7668c3af-0a83-4b58-8e0c-b75649aaefb5", { row: params.data, type: "toggle", currentStatus: isActive ? "Active" : "Inactive" }); }); // Add all links to container container.appendChild(editLink); container.appendChild(deleteLink); container.appendChild(toggleLink); return container; }, }, { field: "knowledgebase_categories",