title: Applying style to particular cell in knockout JS dynamic table depending upon it value
body: <p>I don't have any experience in Knockout js but since I have to implement the functionality and struggling to get my hands on this scenario.</p>
  
  <p>JSP files are fetching JSON data and it is passed to HTML template to create dynamic table.But i have to match particular values and give different styling to cells(Need to change color).</p>
  
  <p>I explored and found out if Foreach is used and using if condition to apply css class can work but since table is getting created dynamically so finding it difficult to achieve it.</p>
  
  <p>Providing the code below,i know angular way to do it but since its in knockout JS am struggling.
  <a href="https://i.stack.imgur.com/ZPcFC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZPcFC.png" alt="enter image description here"></a></p>
  
  <p>The above JSON data fetching dynamically from DB, if App Server is responding then map to “Yes” otherwise map to “No”, in additionally I have to set Yes mean green color, No means Red color.
  I mapped responding values, it is working fine.
  But I am not able to set colors for responding values (Yes means green and No means red color) in Knockout js. Can you please suggest me on this </p>
  
  <pre><code> &lt;table  id="monitorTable" summary="Table Data Test" aria-label="Table Data Test"
                          contextmenu="empty"
                          data-bind="ojComponent: {component: 'ojTable',
                          data: testdatasource,
                          columnsDefault: {sortable: 'disabled'},
                          columns: tableColumns,
                          scrollPolicy: scrollPolicy,
                          scrollPolicyOptions: scrollPolicyOptions}"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Below here is the JSOn data fetched from server and passed to table</p>
  
  <pre><code> {
      "label": "App Server",
      "collection": [{
          "responding": "Yes",
          "appserver": "DEFAULT",
          "className": "success",
          "id": 1
      }, {
          "responding": "No",
          "appserver": "ORACLEQUEUE",
          "className": "failed",
          "id": 2
      }, {
          "responding": "No",
          "appserver": "SECONDARY",
          "className": "failed",
          "id": 3
      }, {
          "responding": "No",
          "appserver": "TERTIARY",
          "className": "failed",
          "id": 4
      }],
      "serverTimestamp": "2017-07-07T03:51:21.949+0000",
      "dataTimestamp": "2017-07-07T03:51:21.949+0000",
      "tableColumns": [{
          "headerText": "App Server",
          "field": "appserver",
          "sortable": "disabled"
      }, {
          "headerText": "Responding",
          "field": "responding",
          "sortable": "disabled",
          "className": ""
      }],
      "scrollPolicy": "auto",
      "scrollPolicyOptions": {
          "fetchSize": "15",
          "maxCount": "1000"
      }
  }
  </code></pre>
  
  <p>Here is the code which fetches data from server by JSP files</p>
  
  <pre><code>function addScalabilityMonitors() {
              console.log("moved to scalability");
              //App Scalability
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityAppServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              //Web Scalability
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityWebServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              //Response Time
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'Scalability.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'gauge', 'scalability');
              //Log files
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'logfile.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'ProcessSchedules.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'BusinessSequence.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              monitors.addMonitorPoint(sts.apiBaseUrl() + 'DatabaseJobs.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
              //myPostProcessingLogic();    
          }
  </code></pre>
  
  <p>I tried to read the documentation for this, also tried various things but failed to implement.</p>