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

QML filters in the table header



  • 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) }
                    }
                }
            }
        }
    }