CODEWITHSUNDEEP
javascriptqtqmlqt5
Aquarius_Girl
Aquarius_Girl

Reputation: 22906

How to change the color of just the first row of TableView in QML?

I am using TableView of QtQuick.Controls 1.4
This is the rowDelegate. I want to have just the first row of blue colour and rest of the rows (empty or non-empty) of green color.

rowDelegate:  
           Rectangle
           {
                border.width: 1
                height: 50
                width: 2000

                color: {
                         var item = mymodel.get( styleData.row )

                         if (item.index1 === "1")
                             return "blue"

                         return "green"

                     }
             }

Now, my problem is that this code does colour the first row as blue but it also colours the empty rows as blue.

What is the way to solve this problem?

enter image description here

Upvotes: 1

Views: 748

Answers (2)

scopchanov
scopchanov

Reputation: 8399

Cause

The documentation of rowDelegate says:

Note: For performance reasons, created delegates can be recycled across multiple table rows. This implies that when you make use of implicit properties such as styleData.row or model, these values can change after the delegate has been constructed. This means that you should not assume that content is fixed when Component.onCompleted is called, but instead rely on bindings to such properties.

Note: The emphasis is mine.

Solution

The emphasized part of the citation shows the solution, i.e. create a binding to styleData.row:

rowDelegate: Rectangle {
    color: (styleData.row === 0) ? "blue" : "green"
    width: 2000
    height: 40
    border.width: 1
}

Example

Here is an example I wrote for you to demonstrate the proposed solution:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4

Window {
    width: 320
    height: 200
    visible: true
    title: qsTr("TableView")

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    TableView {
        anchors.fill: parent
        model: libraryModel

        rowDelegate: Rectangle {
            color: (styleData.row === 0) ? "blue" : "green"
            width: 2000
            height: 40
            border.width: 1
        }

        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }

        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
    }
}

Result

The provided example produces the following result:

Table View

Upvotes: 1

Aditya
Aditya

Reputation: 449

I ran into the same situation a while ago. For this I used headerDelegate to make the same work out. Here is an example:

import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.4
style:TableViewStyle {
    rowDelegate: Rectangle{
        id:rowRectangle
        color:"green"
        width: 2000
        height: 40

    }

    headerDelegate: Rectangle{
        height: 40
        width: 2000
        color: "blue"    
    }
}

Keep in mind though that this will set the empty rows to green. You can maybe adjust the table height based on number of entries in your model.

Upvotes: 0

Related Questions