title: SAPUI5: How to display row index in table
body: <p>I am new to SAPUI5 and I have assignment to display row index (consecutive numbering) in table (sap.ui.table.Table). For Example, I have this data in table:</p>
  
  <pre><code>Dente Al
  Friese Andy
  Mann Anita
  </code></pre>
  
  <p>and so on..</p>
  
  <p>I want it to have column with row index, (preferably that will count from 1 to 3 even if rows are filtered/sorted):</p>
  
  <pre><code>1 Dente Al
  2 Friese Andy
  3 Mann Anita
  </code></pre>
  
  <p>Is there any UI component or some rendering callback or similar that will help me solve this problem in SAPUI5 manner?</p>
  
  <p>Here is the code example:</p>
  
  <pre><code>&lt;!DOCTYPE html &gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;script id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
      data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{
              "sap.ui.demo.wt": "./"
           }'&gt;    
  &lt;/script&gt;
  &lt;script&gt;
      sap.ui.getCore().attachInit(function() {
          //Define some sample data
          var aData = [
              {lastName: "Dente", name: "Al"},
              {lastName: "Friese", name: "Andy"},
              {lastName: "Mann", name: "Anita"},
              {lastName: "Schutt", name: "Doris"},
              {lastName: "Open", name: "Doris"},
              {lastName: "Dewit", name: "Kenya"}
          ];
  
          //Create an instance of the table control
          var oTable2 = new sap.ui.table.Table({
              visibleRowCount: 7,
              firstVisibleRow: 3
          });
  
          //Define the columns and the control templates to be used
          oTable2.addColumn(new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: "Last Name"}),
              template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
              width: "200px"
          }));
  
          oTable2.addColumn(new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: "First Name"}),
              template: new sap.ui.commons.TextField().bindProperty("value", "name"),
              width: "200px"
          }));
  
          //Create a model and bind the table rows to this model
          var oModel2 = new sap.ui.model.json.JSONModel();
          oModel2.setData({modelData: aData});
          oTable2.setModel(oModel2);
          oTable2.bindRows("/modelData");
          //Initially sort the table
          oTable2.sort(oTable2.getColumns()[0]);
          //Bring the table onto the UI
          oTable2.placeAt("content");
  
      });
  &lt;/script&gt;
  &lt;body class="sapUiBody" id="content"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Another Solution (besides one answered):</strong></p>
  
  <p>This solution is based on modifying table rows directly. Although modifying model is preferable, our current project circumstances might not allow model editing:</p>
  
  <ol>
  <li><p>Add Index column:</p>
  
  <pre><code>oTable2.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({text: "Index"}),
      template: new sap.ui.commons.TextView({
          text: "12"
      }),
      width: "200px"
  }));
  </code></pre></li>
  <li><p>After binding was successful (or in <code>onAfterRendering</code> event in controller), use following code:</p>
  
  <pre><code>for (var i = 0, len = oTable2.getRows().length; i &lt; len; i++){
      var row = oTable2.getRows()[i];
      var firstControl = row.getCells()[0];
      firstControl.setText(row.getIndex()+1);
  };
  </code></pre></li>
  </ol>
  
  <p>If you are using controller/jsview, make sure to give id to your table with <code>createId</code> method in jsview and to get component in controller by using <code>byId</code> method.</p>