Show column titles in HorizontalHeaderView

Question

I am trying to create a simple QML Table view, based on a static model. While I have that working, I can't get my column titles to display. What displays now is "1", "2", "3" etc. But I want to show the column titles as defined in my model.

I would like to use HorizontalHeaderView (since that is the NEW way to use titles). Can someone point out how to fix my code below?

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    TableModel {
        id: myModel
        TableModelColumn { display: "companyName" }
        TableModelColumn { display: "info1" }
        TableModelColumn { display: "info2" }
        rows: [
            {
                companyName: "company 1",
                info1: "company 1 info 1",
                info2: "company 1 info 2"
            },
            {
                companyName: "company 2",
                info1: "company 2 info 1",
                info2: "company 2 info 2"
            },
            {
                companyName: "company 3",
                info1: "company 3 info 1",
                info2: "company 3 info 2"
            }
        ]
    }
    
    TableView {
        id: myTableView
        anchors.fill: parent
        clip: true
        
        model: myModel
        
        delegate: Rectangle {
            implicitWidth: 100
            implicitHeight: 50
            border.width: 1
            Text {
                text: display
                anchors.centerIn: parent
            }
        }
    }
    
    HorizontalHeaderView {
        id: horizontalHeader
        syncView: myTableView
        model: myModel
        //        model: [ "A","B","C"]
        delegate: Rectangle {
            implicitWidth: 100
            implicitHeight: 50
            Text {
                text: display
                anchors.centerIn: parent
            }
        }
    }
}

Answer 1

I had the same issue a few days ago. Apparently, you have to specify the model also in HorizontalHeaderView, i.e. the column titles.

This way it worked as expected for me. I hope it answers your question.

    TableModel {
    id: myModel
    TableModelColumn { display: "companyName" }
    TableModelColumn { display: "info1" }
    TableModelColumn { display: "info2" }
    rows: [
        {
            companyName: "company 1",
            info1: "company 1 info 1",
            info2: "company 1 info 2"
        },
        {
            companyName: "company 2",
            info1: "company 2 info 1",
            info2: "company 2 info 2"
        },
        {
            companyName: "company 3",
            info1: "company 3 info 1",
            info2: "company 3 info 2"
        }
    ]
}

TableView {
    id: myTableView
    anchors.fill: parent
    clip: true

    model: myModel

    delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: 50
        border.width: 1
        Text {
            text: display
            anchors.centerIn: parent
        }
    }
}

HorizontalHeaderView {
    id: horizontalHeader
    syncView: myTableView
    model: [ "companyName","info1","info2"] // HERE column titles
    //        model: [ "A","B","C"]

    delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: 50
        Text {
            text: modelData // HERE point to model
            anchors.centerIn: parent
        }
    }
}