finding click event in Qml TableView Header when Column is clicked

Question

I have 2 static ListModel's in this example, in reality I use LocalStorage to fill the ListModel, but to keep it simple, I added 2 buttons to change the Models, but I want to tie it to the TableView's Header Column click event, and can not figure out how to do that from other examples of trying to sort, I do not know if it is possible to have a sort using ListModel, I could not find any example, so can someone explain this or show an example, of how to replace the buttons with column click events, I can then use this to pass the sort by argument to my LocalStorage sql statement to update the ListModel.

Update: I forgot to mention I was looking for a Qml / Qml JavaScript solution, for some reason I thought if I left off the C++ tag, I would avoid this issue, I will use this method as a last resort, since I decided to write this App using only Qml, with no C++ back end, but I do have that version now, since I had issues with how I was importing JavaScript written for the Web, as opposed to Qml JavaScript, which is not the same.

To be clear, I am trying to change Models and not Sort the rows, those are not the same question, the difference is in how the click event is used, and all I want to do is change the name of a query in the back end, which is Qml JavaScript, the reason I do not want C++ solutions is because I am doing this in Felgo, but this is not a Felgo quesiton, it works fine with C++, but you have to set up Live to work with it, and in reality this is going to be source I open up to github, and want it to be able to work without C++, and it seems there should be a way to hook this, and Mouse did work for me, capturing it in the even keep the header from loading, since it hooks at the beginning and waits for input, but if I have to, I am sure your solution will work, then I will accept it, sorry about that confusion, I get confused about what tags to use, so originally I only included qml, and qt was added to it, which I though was a great idea, because this really is a Qt question, that relates to Qml only, and not C++, that is another tag, this is a trend that Felgo is pushing, and they have good reasons, its easier for JavaScript or C/C++ Programmers to use, and Live Debugging works faster when used without a C++ back end, so now I gave more information, when Originally I though this was a simple question, that only related to Qml, if not then the answer has been given for C++, unless there is a better way, seeing how all I want to do is click on the header column the same way I would like on the button, can I embed the button into the column? If so how? I could not find an example of this, only ones that would effect text properties, and would sort the rows, which is not what I was trying to do, only update the model.

import QtQuick 2.11
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.3

import QtQuick.Window 2.11

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("TableView Sort")

    Column {
        id: column
        spacing: 9
        anchors.fill: parent

        TableView {
            id: tableView
            anchors.left: column.left
            anchors.leftMargin: 6
            anchors.right: column.right
            anchors.rightMargin: 273

            highlightOnFocus: true

            model: myListModel1

            sortIndicatorVisible: true

            TableViewColumn {
                role: "title"
                title: "Column 1"
                //width: 133
            }
            TableViewColumn {
                role: "description"
                title: "Column 2"
                //width: 166
            }
        }

        Button {
            id: button1
            text: qsTr("Model 1")
            anchors.left: column.left
            anchors.leftMargin: 6
            onClicked: {
                tableView.model = myListModel1
            }
        }

        Button {
            id: button2
            text: qsTr("Model 2")
            anchors.left: column.left
            anchors.leftMargin: 6
            onClicked: {
                tableView.model = myListModel2
            }
        }
    }

    ListModel {
        id: myListModel1

        ListElement {
            title: "Orange"
            description: "Orange is Orange"
        }
        ListElement {
            title: "Banana"
            description: "Yellow"
        }
        ListElement {
            title: "Apple"
            description: "Red"
        }
    }
    ListModel {
        id: myListModel2

        ListElement {
            title: "Apple"
            description: "Red"
        }
        ListElement {
            title: "Banana"
            description: "Yellow"
        }
        ListElement {
            title: "Orange"
            description: "Orange is Orange"
        }
    }

}

Update: This worked

onSortIndicatorColumnChanged: tableView.model = (sortIndicatorColumn == 0) ? myListModel1 : myListModel2
onSortIndicatorOrderChanged: tableView.model = (sortIndicatorColumn == 0) ? myListModel1 : myListModel2

Thanks for any help.

Dimitry Ernot Dimitry Ernot · Accepted Answer · 2019-04-06T23:26:23

You could use a proxy model to sort your model. But, there is no QML component and you have to use QSortFilterProxyModel.

It's quite easy to do. But, QSortFilterProxyModel is not made to be used with a QML tableview (your table uses role names to display the columns and the proxy model will attempt to sort on index).

A quick example:

class SortProxyModel : public QSortFilterProxyModel
{
    Q_OBJECT

public:
    SortProxyModel(): QSortFilterProxyModel ()
    {
    }

    // Define the way you want to sort data
    bool lessThan(const QModelIndex& left, const QModelIndex& right) const
    {
        int role = sourceModel()->roleNames().key(roleName.toLocal8Bit(), 0);
        return left.data(role) < right.data(role);
    }

    Q_INVOKABLE void setSortRole(QString const& roleName) // Used to select the sort role
    {
        this->roleName = roleName; 
    }

    Q_INVOKABLE virtual void sort(int /*column*/, Qt::SortOrder order = Qt::AscendingOrder)
    {
        QSortFilterProxyModel::sort(0, order); // Always use the first column.
    }
private:
    QString roleName; // Role used to sort the model
};

// main.cpp
// Declare your type to use it in QML
qmlRegisterType<SortProxyModel>("SortProxyModel", 0, 1, "SortProxyModel");

// Main.qml

import SortFilterProxyModel 0.1;

TableView {
            id: tableView
            model: proxy // Use the proxy model rather than the model itself

            sortIndicatorVisible: true
            onSortIndicatorColumnChanged: { // Called when you click on the header
                if (sortIndicatorColumn == 0)  // Set the role used to sort data
                    model.setSortRole("title");
                else
                    model.setSortRole("description");
                model.sort(sortIndicatorColumn, sortIndicatorOrder)
            }
            onSortIndicatorOrderChanged: { // Called when you click on the header
                if (sortIndicatorColumn == 0) // Set the role used to sort data
                    model.setSortRole("title");
                else
                    model.setSortRole("description");
                model.sort(sortIndicatorColumn, sortIndicatorOrder)
            }

    SortProxyModel {
        id: proxy
        objectName: "proxy"
        sourceModel: myListModel1
    }

It's just a quick example and you should improve the code. But, I think it will be a good start...

finding click event in Qml TableView Header when Column is clicked

1 Answers