Qt Weekly #6: Sorting and filtering a TableView

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!

Blog Topics: