QML filters in the table header

LimarDeWills

Hello. I want to create a filter of columns in a tableView in the header. The problem is that the column layer is blocking access to the filter. How do I access textField?
Sample code:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ListModel{
        id: listModel
        ListElement{ title: "1"}
        ListElement{ title: "2"}
        ListElement{ title: "3"}
        ListElement{ title: "4"}
        ListElement{ title: "5"}
    }

    TableView{
        id: table
        anchors.fill: parent
        TableViewColumn{ width: 100; title: "Col 1"; role: "col1" }
        TableViewColumn{ width: 100; title: "Col 2"; role: "col2" }
        TableViewColumn{ width: 100; title: "Col 3"; role: "col3" }
        TableViewColumn{ width: 100; title: "Col 4"; role: "col4" }
        TableViewColumn{ width: 100; title: "Col 5"; role: "col5"; }

        model: listModel

        headerDelegate: Item{
            property int headerHeight: 30
            z: 0
            height: headerHeight * 2
            width: parent.width
            Rectangle {
                id: nameAndSort
                z: 5
                height: headerHeight
                width: parent.width
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                border.color: "black"
                border.width: 1
                color: "red"
                Text {
                    text: "Top " + styleData.value
                    color: "white"
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: { console.log("Top click " + styleData.value) }
                }
            }
            TextField {
                id: filterTextField
                height: headerHeight
                width: parent.width
                z: 5
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                placeholderText: "filter " + styleData.value
                MouseArea{
                    anchors.fill: parent
                    onClicked: { console.log("Bottom click " + styleData.value) }
                }
            }
        }
    }
}