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:

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.