How to change the colour of a row in QML TableView in QT6? I couldn't find any information to achieve this on Qt Quick 2

Question

TableView {
        id: testTable
        rowSpacing: 0
        columnSpacing: 8
        clip: true
        anchors.topMargin: 2
        boundsBehavior: Flickable.OvershootBounds

        columnWidthProvider: function(column) {
            if(column === 0) return 50;
            else if(column === 1) return 580;
            else return 60;
        }

        model: tableModel

        delegate: Rectangle {
            id: cellContainer
            implicitWidth: 100
            implicitHeight: 42

            Text {
                anchors.fill: parent
                verticalAlignment: Qt.AlignVCenter
                horizontalAlignment: column === 1 ? Qt.AlignLeft : Qt.AlignHCenter
                font.family: outfitRegular.name
                font.pixelSize: 14
                text: {
                    var col = model.columnNo
                    if(col === 0)
                        return model.index
                    else if(col === 1)
                        return model.name
                    else 
                        return model.status
                }
            }

            MouseArea {
                id: mouse
                anchors.fill: parent
                onClicked: {
                    console.log(model.index)
                }
            }
        }
    }

I tried coloring the delegate in the mouseArea's onClick method, but as expected, it only changes the cell color and not the entire row's color. I'm wondering what I should do to achieve this. I have found older code on stack overflow but none of them works on the newer version of TableView.

I am new to QML and any input regarding this would be helpful.

Answer 1

Just to illustrate this idea:

import QtQuick
import Qt.labs.qmlmodels

Window {
    id: window
    visible: true
    width: 600
    height: 400
    title: "Typing trainer"

    TableView {
        id: table
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        clip: true
        property int selectedRow: -1

        model: TableModel {
            TableModelColumn { display: "col1" }
            TableModelColumn { display: "col2" }
            TableModelColumn { display: "col3" }

            rows: [
                {
                    "col1": "value1",
                    "col2": "value2",
                    "col3": "value3",
                },
                {
                    "col1": "value4",
                    "col2": "value5",
                    "col3": "value6",
                },
                {
                    "col1": "value7",
                    "col2": "value8",
                    "col3": "value9",
                }
            ]
        }

        delegate: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            border.width: 1
            border.color: "#999"
            color: row === table.selectedRow ? "lightblue" : "white"

            Text {
                text: display
                anchors.centerIn: parent
            }
        }

        selectionBehavior: TableView.SelectRows
        selectionModel: ItemSelectionModel {
            onCurrentChanged: {
                table.selectedRow =  currentIndex.row;
            }
        }
    }
}

Or in more generic way you can set

required property bool selected
required property bool current

as described here, you can also use SelectionRectangle etc.