QML HorizontalHeaderView not working as expected

raphasauer

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: Output

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 docummentation:

"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.

Thanks for your time.

jeremy_k

@raphasauer said in QML HorizontalHeaderView not working as expected:

Why is the header overlapped with the table?

Space for the header needs to be allocated. The QML code above uses the entire window (anchors.fill: parent) for the table.

vinci

This question was asked on stackoverflow as well. Just posting this here because the accepted answer was useful.

Another approach would be to anchor the table below the header.

TableView {
    id: tableView
    anchors.top: horizontalHeader.bottom
    model: TableModel {
    }
}