• Home

SortFilterProxyModel

Allows to apply filter and sorting settings to QML ListModel items. More...

• List of all members, including inherited members

Properties

• columnRoleNames : list<string>
• count : int
• customSortOrder : list<int>
• delayed : bool
• filters : list<Filter>
• proxyRoles : list<ProxyRole>
• sortRoleName : string
• sorters : list<Sorter>
• sourceModel : QAbstractItemModel*

Signals

• sortFinished()

Methods

• variant get(int row, string roleName)
• object get(int row)
• int mapFromSource(int sourceRow)
• QModelIndex mapFromSource(QModelIndex sourceIndex)
• int mapToSource(int proxyRow)
• index mapToSource(index proxyIndex)
• int roleForName(string roleName)

Detailed Description

SortFilterProxyModel is an implementation of QSortFilterProxyModel conveniently exposed for QML. You can use it to apply filter and sorting settings to your QML ListModel items.

The following relevant types are available:

Types

Filter

Related attached types

Sorter

Related attached types

ProxyRole

For detailed information on the SortFilterProxyModel, please see the project on GitHub.

Example Usage

Simple Example

The folowing example shows the configured entries of the ListModel in a ListPage, and allows to sort the list using the name property:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
     ListElement {
       name: "Orange"
       cost: 3.25
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: sortedFruitModel
     sourceModel: fruitModel

     // configure sorters
     sorters: [
       LocaleAwareSorter {
         id: nameSorter
         roleName: "name"
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: sortedFruitModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppCheckBox {
         text: "Sort by name"
         checked: nameSorter.enabled
         updateChecked: false
         onClicked: nameSorter.enabled = !nameSorter.enabled
         anchors.horizontalCenter: parent.horizontalCenter
         height: dp(48)
       }
     } // ListPage
   } // NavigationStack
 } // App

Optimize Performance by Sorting in the Background

The SortFilterProxyModel sorts the data whenever a sorter is enabled or disabled. In case you sequentially enable or disable multiple sorters within a single function or expression, each change requires an own sort operation.

In addition, the user interface can be shortly unresponsive while sorting is performed. To avoid such problems and move sorting into the background, enable the SortFilterProxyModel::delayed property:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Orange"
       cost: 3.25
     }
     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 3.75
     }
     ListElement {
       name: "Banana"
       cost: 2.35
     }
     ListElement {
       name: "Orange"
       cost: 1.25
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: sortedFruitModel

     // perform sort in the background, only sorts once when changing many sorters
     delayed: true

     sourceModel: fruitModel
     sorters: [
       LocaleAwareSorter {
         id: nameSorter
         roleName: "name"
       },
       LocaleAwareSorter {
         id: costSorter
         roleName: "cost"
       }
     ]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: sortedFruitModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppCheckBox {
         text: "Sort by name and cost"
         checked: nameSorter.enabled
         updateChecked: false
         onClicked: {
           nameSorter.enabled = !nameSorter.enabled
           costSorter.enabled = nameSorter.enabled
         }
         height: dp(48)
         anchors.horizontalCenter: parent.horizontalCenter
       }
     } // ListPage
   } // NavigationStack
 } // App

Use the sortFinished() signal in case you want to run code after the sorting has completed.

Advanced Example

This example loads JSON data from a REST API, wraps it in a QML ListModel and uses SortFilterProxyModel to apply filter and sorting settings:

 import Felgo 3.0
 import QtQuick 2.0

 App {

   // full data model, will be filled with data loaded from REST API in loadTodos()
   ListModel {
     id: todoModel
     Component.onCompleted: loadTodos()

     // load data via http request
     function loadTodos() {
       HttpRequest.get("https://jsonplaceholder.typicode.com/todos")
       .then(function(res){
         // map JSON to QML ListModel
         res.body.forEach(function(todo) {
           todoModel.append(todo)
         })
       })
     }
   }

   // filter settings are grouped in this item
   Item {
     id: filterSettings
     property bool sortByTitleActive: false
     property bool completedFilterActive: false
     property int userIdFilterValue: -1
   }

   // filtered model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: todoModel
     // configure filters
     filters: [
       ValueFilter {
         roleName: "completed"
         value: true
         enabled: filterSettings.completedFilterActive
       },
       ValueFilter {
         roleName: "userId"
         value: filterSettings.userIdFilterValue
         enabled: filterSettings.userIdFilterValue > 0
       }]
     // configure sorters
     sorters: [
       LocaleAwareSorter {
         roleName: "title"
         enabled: filterSettings.sortByTitleActive
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: title
         detailText: "user: "+userId+", completed: "+completed+", id: "+id
         style.showDisclosure: false
       }

       // add UI for filter options as list header
       listView.header: Column {
         x: spacing
         width: parent.width - 2 * spacing
         spacing: dp(5)

         // top spacer
         Item { width: parent.width; height: px(1) }

         // completed filter
         AppCheckBox {
           text: "Completed only"
           checked: filterSettings.completedFilterActive
           updateChecked: false
           onClicked: filterSettings.completedFilterActive = !filterSettings.completedFilterActive
         }

         // user id filter
         Row {
           spacing: parent.spacing
           AppText {
             text: "User ID"
             anchors.verticalCenter: parent.verticalCenter
           }
           AppTextField {
             id: userFilterText
             anchors.verticalCenter: parent.verticalCenter
             inputMethodHints: Qt.ImhFormattedNumbersOnly
             onAccepted: {
               if(text === "")
                 filterSettings.userIdFilterValue = -1
               else {
                 userFilterText.text = parseInt(userFilterText.text)
                 filterSettings.userIdFilterValue = userFilterText.text
               }
               listPage.forceActiveFocus()
             }
           }
         }

         // sort by title
         AppCheckBox {
           text: "Sort by title"
           checked: filterSettings.sortByTitleActive
           updateChecked: false
           onClicked: filterSettings.sortByTitleActive = !filterSettings.sortByTitleActive
         }

         // bottom spacer
         Item { width: parent.width; height: px(1) }
       }
     } // ListPage
   } // NavigationStack
 } // App

Sorting the Model in a Custom Order

Use the SortFilterProxyModel::customSortOrder property to provide a list of desired positions for each entry.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
     ListElement {
       name: "Orange"
       cost: 3.25
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: sortedFruitModel
     sourceModel: fruitModel
     customSortOrder: [1, 0, 2] // Apple, Banana, Orange
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: sortedFruitModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppButton {
         text: "Switch Position"
         onClicked: {
           var first = sortedFruitModel.customSortOrder[0]
           var second = sortedFruitModel.customSortOrder[1]
           sortedFruitModel.customSortOrder[0] = second
           sortedFruitModel.customSortOrder[1] = first
         }
         anchors.horizontalCenter: parent.horizontalCenter
       }
     } // ListPage
   } // NavigationStack
 } // App

Sorting Example with TableModel and TableView

The SortFilterProxyModel is also capable of acting as a proxy for a QML TableModel. To allow sorting data by role name and correctly access table columns, configure the columnRoleNames property.

The following example uses a TableModel and TableView together with SortFilterProxyModel:

 import QtQuick 2.12
 import Felgo 3.0
 import Qt.labs.qmlmodels 1.0 // for TableModel

 App {
   NavigationStack {
     Page {
       title: "Table Model Sorting"
       TableModel {
         id: myTableModel
         TableModelColumn { display: "checked" }
         TableModelColumn { display: "amount" }
         TableModelColumn { display: "fruitType" }
         TableModelColumn { display: "fruitName" }
         TableModelColumn { display: "fruitPrice" }

         // Each row is one type of fruit that can be ordered
         rows: [
           {
             checked: true,
             amount: 4,
             fruitType: "Orange",
             fruitName: "Navel",
             fruitPrice: 2.50
           },
           {
             checked: false,
             amount: 1,
             fruitType: "Banana",
             fruitName: "Cavendish",
             fruitPrice: 3.50
           },
           {
             // Each property is one cell/column.
             checked: false,
             amount: 1,
             fruitType: "Apple",
             fruitName: "Granny Smith",
             fruitPrice: 1.50
           }
         ]
       }

       SortFilterProxyModel {
         id: sortedModel
         sourceModel: myTableModel
         columnRoleNames: ["checked", "amount", "fruitType", "fruitName", "fruitPrice"]
         sorters: [
           RoleSorter {
             id: priceSorter
             roleName: "fruitPrice"
           }
         ]
       }

       AppCheckBox {
         id: sortSetting
         text: "Sort by Price"
         anchors.horizontalCenter: parent.horizontalCenter
         checked: priceSorter.enabled
         updateChecked: false
         onClicked: priceSorter.enabled = !priceSorter.enabled
         y: dp(24)
       }

       TableView {
         anchors {
           top: sortSetting.bottom
           bottom: parent.bottom
           left: parent.left
           right: parent.right
           topMargin: dp(24)
         }
         columnSpacing: dp(12)
         rowSpacing: dp(12)

         model: sortedModel
         delegate: AppText {
           text: model.display
           padding: dp(6)
         }
       }
     }
   }
 }

Property Documentation

Signal Documentation

Method Documentation