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

Answer

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