how to get the current index on click of an image for table view

[vinaygopal]

i have a requirement where i have to implement fav/unfav on table view

i have created a model on the c++ side and got the UI on the QML side

the QML code is

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Table View Example")

    TableView {
        id:peopleTable
        anchors.fill: parent

        signal editfinished(string new_string, string original_string)
        onEditfinished: {
            console.log("this signal called ",new_string, " and ",original_string)
            peopleModel.writeData(new_string , original_string)
        }

        clip: true
        model: peopleModel

        TableViewColumn {
            id: firstColumn
            title: "First_Name"
            property var something: delegate.item
            role: "one";
            width: 200;
            delegate: firstColumnComponent
        }

        Component{
            id:firstColumnComponent
            Item {
                id: toplevelItem
                property bool textpresent: true
                Row{
                    spacing: 10
                    TextField{
                        id:te
                        width: 100
                        text: styleData.value
                        maximumLength: 20
                        onAccepted:{
                            console.log("the editing is finished to",te.text)
                            peopleTable.editfinished(te.text,styleData.value)
                        }
                    }
                    Image {
                        id: fav_image
                        source: "qrc:/favourite_icon.png"
                        height: 20
                        width: 40
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                console.log("the current index is",peopleTable.currentRow)
                            }
                        }
                    }
                }
            }
        }

What happens is when i click the favourite image i get the currentRow as -1 thats because my row is not selected, is There a way to select the row on click of the delegate image, or obtain the corresponding row on click.

My UI looks like this.

[J.Hilk]

@vinaygopal
according to the documentation:

https://doc.qt.io/qt-5/qml-qtquick-controls-tableviewcolumn.html#delegate-prop

this should do the trick:

Component{
            id:firstColumnComponent
            Item {
                id: toplevelItem
                property bool textpresent: true
                Row{
                    spacing: 10
                    TextField{
                        id:te
                        width: 100
                        text: styleData.value
                        maximumLength: 20
                        onAccepted:{
                            console.log("the editing is finished to",te.text)
                            peopleTable.editfinished(te.text,styleData.value)
                        }
                    }
                    Image {
                        id: fav_image
                        source: "qrc:/favourite_icon.png"
                        height: 20
                        width: 40
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                console.log("the current index is",styleData.row) //Change happened here
                            }
                        }
                    }
                }
            }
        }