headerDelegate QML tableView - text not visible

Question

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480

    color:"#292a38"

    TableView
    {
        width: 580

        headerDelegate: Rectangle
                        {
                            id: header1
                            height: 20;
                            color: "#343848"
                        }

        rowDelegate: Rectangle
                    {
                        height: 30

                      }
        TableViewColumn
        {
            role: "selectall"
            title: ""
            width: 40

            delegate:
                    Rectangle
                    {
                        height: 120
                        width: 120
                        color: "#24253c"
                    }
        }

        TableViewColumn
        {
            role: "name"
            title: "Name"
            width: 145

            delegate:
                Rectangle
                {
                    height: 120
                    width: 120
                    color: "#24253c"

                    RowLayout
                    {
                        spacing: 10
                        height: 20
                        width: 20
                        Image
                        {
                            height: 20
                            width: 20
                        }

                        Text
                        {
                            color: "lightgray"
                            text: "something"
                        }
                    }
                }
        }

        TableViewColumn
        {
            role: "size"
            title: "Size"
            width: 100

            delegate: Rectangle
            {
                height: 120
                width: 120
                color: "#24253c"
            }
        }

        TableViewColumn
        {
            role: "last_updated"
            title: "Last Updated"
            width: 300
            delegate: Component
                        {
                            Rectangle
                            {
                                height: 100
                                width: 150
                                id: head
                                color: "#24253c"

                                RowLayout
                                {
                                    spacing: 10
                                    height: parent.height
                                    width: parent.width

                                    Text {
                                        id: name
                                        text: Date().toLocaleString()
                                        color: "lightgray"
                                    }

                                    Image
                                    {
                                        height: 20
                                        width: 20
                                        MouseArea
                                        {
                                            anchors.fill: parent
                                            onClicked: parent.color = "grey"
                                        }
                                    }
                                }
                            }
                        }


        }

        model: ListModel
                {
                    id: mymodel
                    ListElement { text: "Banana" }
                    ListElement { text: "Apple" }
                    ListElement { text: "Coconut" }
                }
    }

}

This results in:

As you can see the titles of the header are not visible. Please help.

Answer 1

Header delegates are to be written inside TableViewStyle with style property and then we are supposed to use styleData.value to get the value of individual column titles in the header.

TableView
{
    width: 580

    style: TableViewStyle
    {
        headerDelegate: Rectangle
                        {
                            height: 20
                            color: "lightsteelblue"
                            Text {
                                width: parent.width
                                text: styleData.value // <---
                                elide: Text.ElideMiddle
                            }
                        }

        itemDelegate: Rectangle
                      {
                         color: "red"
                         Text {
                             width: parent.width // <---
                             text: styleData.value
                             elide: Text.ElideMiddle
                         }
                      }

        rowDelegate: Rectangle
                        {
                            color: "blue"
                            height: 30
                        }

    }

    TableViewColumn
    {
            role: "selectall"
            title: "XYZ"
            width: 40

    }
}