J-P Nurmi

Qt Weekly #6: Sorting and filtering a TableView

Published Wednesday April 16th, 2014
Posted in Qt Quick | Tags:

The QtQuick Controls TableView offers a variety of ways to provide data. Supported data model types include the traditional QAbstractItemModel derivative models, QObjectList, JS arrays, and even plain numbers. This flexibility imposes an unfortunate limitation that TableView doesn’t know how to sort arbitrary data models. TableView merely offers a visual enabler, a sort indicator, and the actual sorting is left to the application. In this blog post, we’ll present an example of sorting and filtering a TableView.

An example for sorting and filtering a TableView

The example is based on a QSortFilterProxyModel derivative model. The source model can be any QAbstractItemModel subclass, but the proxy model has been specifically tweaked to be used with QML data models such as ListModel and XmlListModel. The example uses an XmlListModel that loads images from Flickr.

TableView {
    id: tableView

    sortIndicatorVisible: true

    model: SortFilterProxyModel {
        id: proxyModel
        source: sourceModel.count > 0 ? sourceModel : null

        sortOrder: tableView.sortIndicatorOrder
        sortCaseSensitivity: Qt.CaseInsensitive
        sortRole: sourceModel.count > 0 ?
                  tableView.getColumn(tableView.sortIndicatorColumn).role : ""

        filterString: "*" + searchBox.text + "*"
        filterSyntax: SortFilterProxyModel.Wildcard
        filterCaseSensitivity: Qt.CaseInsensitive

The above code snippet presents the most relevant parts of the attached example. In order to enable sorting and filtering, it makes the sort indicator visible and sets up property bindings to the appropriate UI elements, and SortFilterProxyModel handles the rest.

Full source code for the example: tablesortfilter.zip.

Qt Weekly is a new blog post series that aims to give your daily Qt usage a boost. Stay tuned for next week’s post!

Do you like this? Share it
Print this pageEmail this to someoneShare on LinkedInShare on Google+Share on FacebookTweet about this on Twitter

Posted in Qt Quick | Tags:


Wow! I was started looking for this kind of functionality just a few minutes before and now this post just came out from nowhere : )
Thank you guys!

Bruno Cabral says:

Fantastic J-P Nurmi !
I just implemented my own solution to this last week, but I loved your approach !
This should be integrated to QtQuick !
BTW, what is the license ?

J-P Nurmi J-P Nurmi says:

Hi Bruno, I’m glad you like the example. The idea came a bit too late to do anything for Qt 5.3, but it will certainly graduate as a QtQuick Controls example later. I’m looking forward to improve the proxy model further, and if it can be made generic enough, it could possibly become part of the QtQml Models module. The license is BSD – the same we have for the official QtQuick Controls examples.

Bruno Cabral says:

J-P Nurmi, One big problem with your example is that during the list update (dataupdate) the TableView keep jumping to the beginning of the list.

J-P Nurmi J-P Nurmi says:

Which platform and Qt version are you using, and what kind of data update do you mean?

Commenting closed.

Get started today with Qt Download now