title: Manipulating icons in the table row based on condition
body: <p>I have the <code>sap.ui.table.Table</code> in XML view as below:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;Table id="testtable" xmlns="sap.ui.table"
    rows="{/testdata}"
    alternateRowColors="true"&gt;
    &lt;columns&gt;
      &lt;Column hAlign="Center" label="Col1"&gt;
        &lt;template&gt;
          &lt;m:Text text="{dataX}" wrapping="false" /&gt;
        &lt;/template&gt;
      &lt;/Column&gt;
      &lt;Column hAlign="Center" label="Col2"&gt;
        &lt;template&gt;
          &lt;m:Text text="{dataY}" wrapping="false" /&gt;
        &lt;/template&gt;
      &lt;/Column&gt;
      &lt;Column label="Col3"&gt;
        &lt;template&gt;
          &lt;m:HBox&gt;
            &lt;core:Icon src="sap-icon://show" color="#007bff" /&gt;
            &lt;core:Icon src="sap-icon://edit" color="#007bff" /&gt;
            &lt;core:Icon src="sap-icon://print" color="#007bff" /&gt;
          &lt;/m:HBox&gt;
        &lt;/template&gt;
      &lt;/Column&gt;
    &lt;/columns&gt;
  &lt;/Table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Spqhn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Spqhn.png" alt="sample fig: (rough)"></a></p>
  
  <p>Here what I am trying to achieve is for different rows I want to change the properties of Icons as:</p>
  
  <p><a href="https://i.stack.imgur.com/Up0h6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Up0h6.png" alt="manipulated table"></a></p>
  
  <p>To achieve this, I did something as:</p>
  
  <p>Code below is what I tried for manipulating (not to get exactly as in image)</p>
  
  <pre class="lang-js prettyprint-override"><code>var noOfrows = data.length; // data is here table rows data 
  var tabItems = this.byId("testtable").getRows();
  if (noOfrows != 1) {
    for (var i = 0; i &lt; noOfrows - 1; i++) {
      var cells = tabItems[i].getCells();
      cells[2].mAggregations.items[0].setColor("#000000");
      cells[2].mAggregations.items[1].setColor("#c2baba");
      cells[2].mAggregations.items[2].setColor("#000000");
    }
  } else {
    var cells = tabItems[0].getCells();
    cells[2].mAggregations.items[0].setColor("#007bff");
    cells[2].mAggregations.items[1].setColor("#007bff");
    cells[2].mAggregations.items[2].setColor("#007bff");
  }
  </code></pre>
  
  <p>This does the thing but I have read this to be very bad. I have no idea how I could do this in a proper way.</p>
  
  <p>I am trying to accomplish this by keeping table, columns in XML view (if this is possible) as above instead of adding dynamically from controller.</p>
  
  <p>The sample of data looks as:</p>
  
  <pre><code>var testdata = [{test: "A", data:'eg1'},
                  {test: "B", data:'eg2'},
                  {test: "C", data:'eg3'}]
  </code></pre>