Пустые строки в TableView QML окрашиваются в цвет первой строки

Столкнулся с такой проблемой: когда количество строк в TableView меньше высоты TableView то оставшуюся высоту заполняют пустые строки окрашенные в цвет первого элемента. Как можно отсечь пустые строки?

Код который я написал:

import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0 as QQ2

Window {
    visible: true
    width: 640
    height: 300
    x: (Screen.width - width) / 2
    y: (Screen.height - height) / 2
    color: "gray"

    ListModel {
        id: listModel
        ListElement {
            name: qsTr("Alyce")
            age: 18
            from: qsTr("Raccoon city")
        }
        ListElement {
            name: qsTr("Leon Kennedy")
            age: 19
            from: qsTr("Raccoon city")
        }
        ListElement {
            name: qsTr("Claire Redfield")
            age: 20
            from: qsTr("Raccoon city")
        }
        ListElement {
            name:qsTr("Chris Redfield")
            age: 21
            from: qsTr("Raccoon city")
        }
    }

    TableView {
        id: tableView
        anchors.fill: parent
        backgroundVisible: false
        clip: true
        model: listModel

        TableViewColumn {
            role: "name"
            title: qsTr("name")
            width: tableView.contentItem.width / tableView.columnCount
            delegate: itemDelegateText
        }

        TableViewColumn {
            role: "age"
            title: qsTr("age")
            width: tableView.contentItem.width / tableView.columnCount
            delegate: itemDelegateText
        }

        TableViewColumn {
            role: "from"
            title: qsTr("From")
            width: tableView.contentItem.width / tableView.columnCount
            delegate: itemDelegateText
        }

        headerDelegate: Rectangle {
            height: 30
            color: "#FAEBD7"
            Text {
                id: headerName
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: styleData.value
                font { pointSize: 15; bold: true }
            }
        }

        Component{
            id: itemDelegateText
            Text {
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                color: styleData.selected ? "gray" : "black"
                elide: styleData.elideMode
                text: styleData.value
                font { pointSize: 12; bold: true }
            }
        }

        rowDelegate: QQ2.ItemDelegate {
            id: rowRectangle
            height: 30
            hoverEnabled: true
            clip: true
            //property color rowColor: styleData.selected ? "#FFDEAD" : (styleData.alternate ? "#F0FFF0" : "#E6E6FA")

            function setColor() {
                var item = listModel.get(styleData.row).name
                if (item === "Alyce")
                    return "green"
                else if (item === "Leon Kennedy")
                    return "yellow"
                else if (item === "Claire Redfield")
                    return "red"

                return "tomato"
            }

            background: Rectangle {
                anchors.fill: rowRectangle
                clip: true
                color: rowRectangle.hovered ? "skyblue" : setColor()
            }
    
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    if (tableView.rowCount > styleData.row) {
                        tableView.selection.clear()
                        tableView.selection.select(styleData.row)
                        console.log(listModel.get(styleData.row).name)
                    }
                }
            }
        }
    }
}