QML Tableview change row color depending on row content

Question

I'm new to qml and I need to write a simple list with 3 columns and an undefined number of rows showing the output of a log using a tableview. The first column shows the type (error, warning, info). Depending on this keywords I need to change the color of that row. I found code where I was able to change the color of all rows, but not individually depending on the data content. This is my starting point:

import QtQuick 2.13
import QtQuick.Window 2.11

import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4
import QtQuick.Controls 1.4 as QtC1
import QtQuick.Dialogs 1.2


ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Log")

    ListModel {
        id: listModel
        ListElement { category: 'warning'; type: "DEVICE IN USE"; comment: "Device with ID: PS-0002 is in use by Line with ID: L-0001A" }
        ListElement { category: 'error'; type: "DEVICE IS OFFLINE"; comment: "Cannot reach device with ID: PS-0006  IP: 192.169.0.112  Port: 788" }
        ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00013 is ready for use." }
        ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00014 is ready for use." }
        ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00015 is ready for use." }
        ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00016 is ready for use." }
    }

    ColumnLayout
    {
        anchors.fill: parent
        transformOrigin: Item.Center

        Label {
            id: logLabel
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            font.pixelSize: 22
            text: qsTr("Summary")
            Layout.topMargin: 13
        }

        QtC1.TableView {
            id: tv
            Layout.fillHeight: true
            Layout.preferredHeight: 18
            Layout.preferredWidth: 9
            Layout.fillWidth: true

            rowDelegate: Rectangle {
                 color: styleData.value ? "blue":"white"
            }

            /* Create columns */
            QtC1.TableViewColumn
            {
                id: tv_category
                horizontalAlignment: Text.AlignLeft
                role: qsTr("category")
                title: qsTr("Category")
                width: 100
            }
            QtC1.TableViewColumn
            {
                id: tv_type
                horizontalAlignment: Text.AlignLeft
                role: qsTr("type")
                title: qsTr("Type")
                width: 100
            }

            QtC1.TableViewColumn
            {
                id: tv_comment
                horizontalAlignment: Text.AlignRight
                role: qsTr("comment")
                title: qsTr("Comment")
                width: contentWidth
            }
            model: listModel
        }
    }
}

Any help would be appreciated.

Martin

You can use QAbstractModel mentioned in here. For category,commetn... headers changing color is easy but for each cell if I am not wrong you should use QAbstractModel — Yunus Temurlenk

luffy luffy · Accepted Answer · 2020-02-04T12:09:59

In the rowDelegate you have access to the row index (using styleData.row). Just use it to get the item from the list model like this:

rowDelegate: Rectangle {
     color: {
         var item = listModel.get(styleData.row)
         if (item.category  === "info")
             return "skyblue"
         else if (item.category  === "warning")
             return "yellow"
         else if (item.category  === "error")
            return "red"

         return "skyblue"
     }
}

QML Tableview change row color depending on row content

1 Answers