Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML HorizontalHeaderView not working as expected



  • 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

    d2b403f7-8b86-47a0-b647-eb3fb6818bdf-image.png

    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.



  • @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.