I have multiple columns in my table .Fields having values either "Yes" or "No". Yes will be displayed as check-circle icon and No will be displayed as x-circle icon.Whats the missing thing in the below js. Eg. Wireless and VSP are the fields .Below is the js . require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { // Translations from rangemap results to CSS class var ICONS = { No: 'x-circle', Yes: 'check-circle' }; var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { // Only use the cell renderer for the range field return cell.field === 'Wireless'; }, render: function($td, cell) { var icon = 'question'; // Fetch the icon for the value if (ICONS.hasOwnProperty(cell.value)) { icon = ICONS[cell.value]; } // Create the icon element and add it to the table cell $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- Wireless %>" title="<%- Wireless %>"></i>', { icon: icon, Wireless: cell.value })); } }); var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { // Only use the cell renderer for the range field return cell.field === 'VSP'; }, render: function($td, cell) { var icon = 'question'; // Fetch the icon for the value if (ICONS.hasOwnProperty(cell.value)) { icon = ICONS[cell.value]; } // Create the icon element and add it to the table cell $td.addClass('icon').html(_.template('', { icon: icon, VSP: cell.value })); } }); mvc.Components.get('table1').getVisualization(function(tableView){ // Register custom cell renderer, the table will re-render automatically tableView.addCellRenderer(new RangeMapIconRenderer()); }); }); ... View more