Strange behaviour when accessing ListModel outside of delegate

[flux]

Hello everybody,
I hope someone can explain the following behavior of ListView and ListModel.

I am new to programming Qt and especially QML / Qt Quick. I am currently experimenting with the existing elements to learn the concepts of QML.
I tried to use the ListView component to create a table-like view. It seems that showing a simple table is a bit more complex than I thought. I am still testing the different views. I know that there is also a TableView in Controls 1 as well as a newer development. However, these do not really appeal to me yet.

Here is my code that works, but I don't know why.

// CustomTableView.qml

import QtQuick 2.14
import QtQuick.Controls 2.14

Item {
    ListModel {
        id: headerModel

        Component.onCompleted: {
            headerModel.append(
            {
                columns: [
                    {
                        "value": "Column 1",
                        "width": 35,
                        "alignment": Text.AlignLeft
                    },
                    {
                        "value": "Column 2",
                        "width": 140,
                        "alignment": Text.AlignRight
                    },
                    {
                        "value": "Column 3",
                        "width": 140,
                        "alignment": Text.AlignRight
                    },
                    {
                        "value": "Column 4",
                        "width": 35,
                        "alignment": Text.AlignLeft
                    },
                    {
                        "value": "Column 5",
                        "width": 170,
                        "alignment": Text.AlignRight
                    }
                ]
            })
        }

    ListModel {
        id: dataModel

        Component.onCompleted: {
            dataModel.append([
                {
                    columns: [
                         {"value": "X"},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()},
                         {"value": "v<sub>X</sub>"},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()}
                    ]
                },
                {
                    columns: [
                         {"value": "Y"},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()},
                         {"value": "v<sub>Y</sub>"},
                         {"value": (Math.round(Math.random()*10e6)/10e3).toString()}
                    ]
                }
            ])
        }
    }

    }

    ListView {
        id: tableView

        anchors.fill: parent

        clip: true

        property int rowSpacing: 10
        property int columnSpacing: 10

        model: dataModel

        header: Row {
            spacing: tableView.columnSpacing
            Repeater {
                // actually I wan't to access the model in this way to save me one repeater loop.
                // model: headerModel.get(0).columns
                // but nowhere else as in the delegate I can access the columns role
                // concole output: qrc:/CustomTableView.qml:85: TypeError: Cannot read property 'columns' of undefined
                model: headerModel
                Repeater {
                    model: columns
                    Text {
                        text: model.value
                        width: model.width
                    }
                }
            }
        }

        delegate: Row {
            spacing: tableView.columnSpacing
            Repeater {
                model: columns
                Text {
                    text: value
                    width: headerModel.get(0).columns.get(index).width // this line works only at this position but why can I access columns here and not somewhere else?
                }
            }
        }

        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }



}

I did some comments in the code above to illustrate my problem.
Additionally it seems that the headerModel will be instantiate later then the dataModel? Is there a rule in which order elements will instantiate?

Thanks for helping.

Best regards.

[flux]

Can nobody give me a hint?

What are other suitable ways to create a responsible table?