QML TableView problems with format

Question

I create an application with QML. The data will be provided from C++ with a QAbstractTableModel class. But the display in QML is not formatted correctly.

QML of the main view:

import QtQuick
import QtQuick.Controls
import SK 1.0
import assets 1.0
import components 1.0

Item {
    Rectangle {
        id: windowBox
        anchors.fill: parent

        Image {
            width: parent.width
            height: parent.height
            source: Style.imageBackground
        }

        ScrollView {
            id: scrollView
            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: commandBar.top
                margins: Style.sizeScreenMargin
            }
            clip: true

            HeaderBoxCol {
                id: headerBox
                headerText: "Administration"
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
            }

            AdminBox {
                id: adminBox
                headerText: "Admin"
                anchors.top: headerBox.bottom
                anchors.topMargin: 15
                anchors.left: parent.left
                anchors.right: parent.right
            }

         }
    }
}

QML of AdminBox:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SK 1.0
import assets 1.0
import components 1.0

Panel {
    width: parent.width*0.9
    x: 15

    contentComponent:
        Column {
            width: parent.width
            spacing: Style.sizeControlSpacing

            Row {
                // Spieler Liste
                id: row1
                spacing: Style.sizeControlSpacing
                width: parent.width

                TableViewSpieler {
                    widthValue: Style.widthDataControls*4
                    setWidthValue: true
                }
            }

            Row {
                // Tarif Liste
                id: row2
                spacing: Style.sizeControlSpacing
                width: parent.width

                TableViewTarif {
                    widthValue: Style.widthDataControls*4
                    setWidthValue: true
                }
            }

            Row {
                // Tisch Liste
                id: row3
                spacing: Style.sizeControlSpacing
                width: parent.width

                TableViewTisch {
                    widthValue: Style.widthDataControls*4
                    setWidthValue: true
                }
            }
    }
}

QML of the TableView:

import QtQuick
import QtQuick.Controls
import SK 1.0
import assets 1.0

Item {
    property int widthValue
    property bool setWidthValue

    height: Style.heightDataControls * 7
    width: (setWidthValue) ? (widthValue+Style.widthDataControls) : (parent.width/widthValue) - 10

    Rectangle {
        id: header
        width: Style.widthDataControls
        height: Style.heightDataControls
        color: Style.colourBackground

        Text {
            id: textLabel
            anchors {
                fill: parent
                margins: Style.heightDataControls / 4
            }
            text: "Spieler Liste"
            color: Style.colourDataControlsFont
            font.pixelSize: Style.pixelSizeDataControls
            verticalAlignment: Qt.AlignVCenter
        }

    }

    HorizontalHeaderView {
        id: horizontalHeader
        anchors.top: header.bottom
        anchors.left: tableViewId.left
        height: Style.heightDataControls * 2
        syncView: tableViewId
        clip: true
    }

    VerticalHeaderView {
        id: verticalHeader
        anchors.top: tableViewId.top
        anchors.left: parent.left
        syncView: tableViewId
        clip: true

    }

   TableView {
        id: tableViewId
        anchors.left: verticalHeader.right
        anchors.top: horizontalHeader.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        topMargin: horizontalHeader.implicitHeight

        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model: masterController.uiSpieler.uiSpielerListe

        delegate:  Label {
            text: model.tabledata
            width: 100
            padding: 12

            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }
    }

}

Class SpielerTable:

SpielerTable::SpielerTable(QObject *parentArg)
    : QAbstractTableModel {parentArg}
{
}

SpielerTable::~SpielerTable()
{
}

int SpielerTable::rowCount(const QModelIndex &) const
{
    return table.size();
}

int SpielerTable::columnCount(const QModelIndex &) const
{
    return ColCount;
}

QVariant SpielerTable::data(const QModelIndex &indexArg, int roleArg) const
{
    switch (roleArg)
    {
    case TableDataRole:
    {
        return table.at(indexArg.row()).at(indexArg.column());
    }
    default:
        break;
    }
    return QVariant();
}

QVariant SpielerTable::headerData(int sectionArg, Qt::Orientation orientationArg, int roleArg) const
{
    if (roleArg != Qt::DisplayRole)
    {
        return QVariant();
    }
    if (orientationArg == Qt::Horizontal && sectionArg == 0)
    {
        return "Id";
    }
    else if (orientationArg == Qt::Horizontal && sectionArg == 1)
    {
        return "Name";
    }
    else if (orientationArg == Qt::Horizontal && sectionArg == 2)
    {
        return "Nick";
    }

    if (orientationArg == Qt::Vertical)
    {
        return QVariant::fromValue(sectionArg + 1);
    }
    return QVariant();
}

QHash<int, QByteArray> SpielerTable::roleNames() const
{
    QHash<int, QByteArray> roles = QAbstractTableModel::roleNames();
    roles[TableDataRole] = "tabledata";
    // roles[SomeOtherRole] = "someotherrole"; // You can set up multiple mappings if needed
    return roles;
}

QVariant SpielerTable::get_display_data(const QModelIndex &indexArg)
{
    return data(indexArg, TableDataRole);
}

void SpielerTable::addListe(const QJsonObject &listeArg)
{
    uint16_t anz {static_cast<uint16_t>(listeArg["anz"].toInt())};
    for (uint16_t i = 0; i < anz; ++i)
    {
        QJsonObject obj {listeArg["spieler"].toArray().at(i).toObject()};
        struct StructSpieler spieler {};
        table.append({obj["id"].toString(), obj["name"].toString(), obj["nick"].toString()});
    }
}

void SpielerTable::clearListe()
{
    qDebug() << ">> SpielerTable > clearListe (" << __LINE__ << ")";
    table.clear();
}

struct StructSpieler SpielerTable::getPos(uint16_t posArg)
{
    struct StructSpieler temp {};
    temp.id = table[posArg].at(0).toInt();
    temp.name = table[posArg].at(1);
    temp.nick = table[posArg].at(2);
    return temp;
}

What can I do, that the tables didn't overlapp the header during scrolling and has a bottom margin?