how to get position of a cell of a particular row on clicked of a table

Question

A basic question, but stuck on how to,

I have a table like below:

col0  col1  col2  col3  col3  col5
row1 | A  |   B |   C |  D  |  E
row2 | X  |   Y |   Z |  S  |  T

I am looking for a solution like if I click on A how to get the value of its position as 1 , if B 2 similarly X 1 ....?

I was doing it like below:{tried with different scenario}

new sap.ui.core.Icon({

            press : function(evt) {

                   var source=evt.getSource();

                      var iconIndex=evt.mParameters.id; 
                      var iconIndexValue=iconIndex.split('-'); #{iconIndex = "__icon13-container-........}
                      var indexnumber=iconIndexValue[0].substring(6);#{13}
                        .......}
              ....

The issue I am facing using above method is when page on loaded, if I select A the value I get is 6 which is next set of position values, but when I refresh the page It is again 1 .

Is there any different approach to get as above?

I am also stuck on how to explain this in breif, but I guess the above expected result makes sense..

Any help is appreciated!!

Answer 1

As per my understanding you need to know the clicked cell position. You can achieve it by table methods like indexOfItem() and indexOfCell()

View.xml

<Table items="{/items}">
    <columns>
        <Column> <Text text="Amount" /> </Column>
        <Column> <Text text="Quantity" /> </Column>
        <Column> <Text text="Weight" /> </Column>
        <Column> <Text text="Status" /> </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Link text="{Amount}" press="getCellInfo" />
                <Link text="{Quantity}" press="getCellInfo" />
                <Link text="{Unit}" press="getCellInfo" />
                <Link text="{parameter1}" press="getCellInfo" />                    
            </cells>
        </ColumnListItem>
    </items>
</Table> 

Controller.js

getCellInfo: function(oEvent) {
    var oCell = oEvent.getSource();
    var oRow = oCell.getParent();
    var oTable = oRow.getParent();
    console.log("Row: "  + oTable.indexOfItem(oRow) + " Cell index: ", oRow.indexOfCell(oCell));        
},