QML HorizontalHeaderView not working as expected - qt

Question

I'm trying to add a header to a TableView in QML, but it is not working as expected. Here's a sample code:
Main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
QML:
import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.15
Window {
width: 600
height: 600
visible: true
title: "Player"
TableView {
id: tableView
anchors.fill: parent
columnSpacing: 1
rowSpacing: 1
boundsBehavior: Flickable.StopAtBounds
model: TableModel {
id: tabela
TableModelColumn { display: "type" }
TableModelColumn { display: "speed" }
TableModelColumn { display: "ammunition" }
TableModelColumn { display: "active" }
TableModelColumn { display: "coordinates" }
rows: [
{
type: "1",
speed: "10",
ammunition: "30",
active: "True",
coordinates: "4x2"
},
{
type: "3",
speed: "0",
ammunition: "3",
active: "False",
coordinates: "10x2"
},
]
}
delegate: Text {
text: model.display
padding: 20
Rectangle {
anchors.fill: parent
color: "#efefef"
z: -1
}
}
}
HorizontalHeaderView {
id: horizontalHeader
syncView: tableView
anchors.left: tableView.left
model: TableModel {
TableModelColumn { display: "type"}
TableModelColumn { display: "speed" }
TableModelColumn { display: "ammunition" }
TableModelColumn { display: "active" }
TableModelColumn { display: "coordinates" }
}
}
}
Here's the output I get from this code:
Why is the header overlapped with the table? I've provided the header with a a sync view (tableView) in order to sync the header to table. According to the documentation:
Once this property is bound to another TableView, both header and table will synchronize with regard to column widths, column spacing, and flicking horizontally.
The header's label also seems wrong. I was expecting to get "Type", "Speed", etc. I haven't found much documentation about TableModelColumn, which is used to build the header.

Answer 1

You can set the topMargin property of TableView to the height of the header to keep the header row above the content rows.
TableView {
id: tableView
topMargin: horizontalHeader.implicitHeight
model: TableModel {
}
}
HorizontalHeaderView {
id: horizontalHeader
syncView: tableView
anchors.left: tableView.left
}
And syncView means the HorizontalHeaderView will use the model of the TableView, to my understanding you shouldn't need to specify the model property in the HorizontalTableView.