Qt TableView selection not working. Relative indices are stuck to "-1"

Question

I will post my specific problem, but it would be great if we have a relatively general post about this matter. So, the problem is that Qt has deprecated the TableView component in Qt6, and this results in so many voids in its documentation. The problem is that I cant get the cell selection to work correctly. I tested this by outputing the currentRow and currentColumn to the console and getting as a return -1 for both. so the question is how to do the selection correctly. I have already tried some things that came to mind (and suggested by chatGPT) as long as taking into account the documentation, but depending on the thing i try, i get different errors/warnings, like some properties that are not included in QtQuick 2.15, and most of the times the indices stay to default (-1). I am using Qt Design Studio and/or Qt creator and QML for the design and later it will be used with pyside6 in Python.

---

Code:

Table_custom.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels
import QtQml.Models

Item {
    id: root
    width: 300
    height: 200
    property var colNames: ["names", "cr1", "cr2", "cr3"]

    TableView {
        id: view
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        interactive: false
        anchors.topMargin: 0
        rowSpacing: -1
        columnSpacing: -1
        clip: true

        rowHeightProvider: function (index) {
            return 30
        }
        columnWidthProvider: function (index) {
            return 100
        }

        model: TableModelCustom {}

        delegate: Table_customDelegate {
            id: viewdelegate
            width: 100
            height: 30
        }
    }

    HorizontalHeaderView {
        id: horizontalheader
        x: 0
        y: 0

        width: view.width
        height: view.rowHeightProvider
        anchors.bottom: parent.top
        interactive: false
        clip: true
        anchors.bottomMargin: 0

        model: colNames

        delegate: Item {
            id: wrapper
            implicitWidth: 100
            implicitHeight: 30

            Rectangle {
                id: background
                color: "#ffffff"
                border.color: "#000000"
                border.width: 1
                anchors.fill: parent
            }

            Text {
                id: text1
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                anchors.rightMargin: 2
                anchors.bottomMargin: 2
                anchors.topMargin: 2
                text: horizontalheader.model[row]
                anchors.fill: parent
            }
        }
        syncView: view
    }
}

TableModelCustom.qml:

import QtQuick 2.15

TableModel {
    TableModelColumn {
        display: "names"
    }
    TableModelColumn {
        display: "cr1"
    }
    TableModelColumn {
        display: "cr2"
    }
    TableModelColumn {
        display: "cr3"
    }

    rows: [{
            "names": "names",
            "cr1": "cr1",
            "cr2": "cr2",
            "cr3": "cr3"
        }, {
            "names": "Alt1",
            "cr1": "five",
            "cr2": "two",
            "cr3": "four"
        }, {
            "names": "Alt2",
            "cr1": "six",
            "cr2": "three",
            "cr3": "one"
        }, {
            "names": "Alt3",
            "cr1": "seven",
            "cr2": "five",
            "cr3": "six"
        }]
}

Table_customDelegate.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: 100
    height: 30

    required property bool selected
    required property bool current
    property bool showLabel: checkStatus()

    function checkStatus() {
        if (index < view.model.rowCount) {
            return true
        } else if (index % view.model.rowCount === 0) {
            return true
        } else {
            return false
        }
    }

    onShowLabelChanged: {
        if (showLabel === true) {
            text1.enabled = true
            text1.visible = true
            textInput.enabled = false
            textInput.visible = false
        } else {
            text1.enabled = false
            text1.visible = false
            textInput.enabled = true
            textInput.visible = true
        }
    }

    Rectangle {
        id: background
        color: "#ffffff"
        border.color: "#222222"
        border.width: 1
        anchors.fill: parent
        z: -1
    }

    Text {
        id: text1
        visible: showLabel
        color: "#222222"
        text: display
        anchors.fill: parent
        font.pixelSize: 12
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        enabled: showLabel
        padding: 2
        font.family: "Nunito"
    }

    MouseArea {
        anchors.fill: parent
        z: -1
        cursorShape: Qt.CrossCursor
        propagateComposedEvents: true
        onClicked: {
            // FIXME: this code is shit + not working as expected
            view.cellAtPos(Qt.point(mouseX, mouseY), false)

            var row = view.currentRow
            var column = view.currentColumn

            console.log("DELEGATE: IDX:" + "(" + row + ", " + column + ")")
        }
    }

    TextInput {
        id: textInput
        visible: !showLabel
        color: "#222222"
        text: display
        anchors.fill: parent
        font.pixelSize: 12
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        enabled: !showLabel
        selectByMouse: true
        maximumLength: 120
        selectionColor: "#57b9fc"
        padding: 2
        font.family: "Nunito"

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            z: 0
            cursorShape: Qt.IBeamCursor
            propagateComposedEvents: true

            onClicked: {
                view.cellAtPosition(Qt.point(mouseX, mouseY))
                var row = view.currentRow
                var column = view.currentColumn
                console.log("DELEGATE: IDX:" + "(" + row + ", " + column + ")")
            }
        }
    }
}

Specifically, the problem is in the delegate qml file, in the MouseArea, the cellAtPos() function does not set the clicked cell to be the selected and current. The same also happens to the second MouseArea, with the cellAtPosition() function. the other code files are provided for context. I tried many things, that are in the Qt documentation examples, and other that chatGPT suggested, but nothing managed to change the row and column indices from their defult value -1. Maybe I do somehting wrong, idk.