SAPUI5: How to display row index in table

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:

Dente Al
Friese Andy
Mann Anita

and so on..

I want it to have column with row index, (preferably that will count from 1 to 3 even if rows are filtered/sorted):

1 Dente Al
2 Friese Andy
3 Mann Anita

Is there any UI component or some rendering callback or similar that will help me solve this problem in SAPUI5 manner?

Here is the code example:

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
</head>
<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": "./"
         }'>    
</script>
<script>
    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");

    });
</script>
<body class="sapUiBody" id="content">
</body>
</html>

Another Solution (besides one answered):

This solution is based on modifying table rows directly. Although modifying model is preferable, our current project circumstances might not allow model editing:

Add Index column:

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"
}));

After binding was successful (or in onAfterRendering event in controller), use following code:

for (var i = 0, len = oTable2.getRows().length; i < len; i++){
    var row = oTable2.getRows()[i];
    var firstControl = row.getCells()[0];
    firstControl.setText(row.getIndex()+1);
};

If you are using controller/jsview, make sure to give id to your table with createId method in jsview and to get component in controller by using byId method.

Solution

Please find the updated function code hope this helps

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
    });
    oTable2.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Index"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "rowIndex"),
        width: "200px"
    }));
    //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"
    }));
    function fnAppenData(count,data, objName){
        return Array.apply(null, Array(count)).map(function(obj, i) {
            var obj = data[i];
            var name = data[i][objName];
            data[i][objName] =  (i + 1) + " " + name;
            data[i]["rowIndex"] = (i + 1);
            var returndata = data[i];
            return returndata;
            //return {name: names[i % names.length] + i};
        });
    }
    //Create a model and bind the table rows to this model
    var oModel2 = new sap.ui.model.json.JSONModel(fnAppenData(aData.length, aData, "lastName"));
    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");

});

sample output: