TableSortFilterProxyModel

src/appshell/qml/MuseScore/AppShell/DevTools/Gallery/GeneralComponentsGallery.qml

@@ -1116,23 +1116,23 @@ Rectangle {
                     max: 15
                 }
                 ListElement {
-                    name: "Tony"
-                    age: 15
+                    name: "Anna"
+                    age: 11
                     valueType: "Int"
                 }
                 ListElement {
-                    name: "Fred"
-                    age: 10
+                    name: "Emma"
+                    age: 5
                     valueType: "Int"
                 }
                 ListElement {
-                    name: "Emma"
-                    age: 5
+                    name: "Fred"
+                    age: 10
                     valueType: "Int"
                 }
                 ListElement {
-                    name: "Anna"
-                    age: 11
+                    name: "Tony"
+                    age: 15
                     valueType: "Int"
                 }
             }
@@ -1145,16 +1145,26 @@ Rectangle {
         StyledTableView  {
             id: tableView
 
-            width: 560
-            height: 226
+            width: 1100
+            height: 360
 
             TestTableViewModel {
                 id: tableModel
             }
 
-            model: tableModel
+            TableSortFilterProxyModel {
+                id: tableProxy
+
+                sourceModel: tableModel
+            }
+
+            model: tableProxy
 
             headerCapitalization: Font.Capitalize
+            horizontalHeaderNavigationEnabled: true
+
+            navigationPanel.section: navSec
+            navigationPanel.order: 2
 
             sourceComponentCallback: function(type) {
                 switch(type) {
@@ -1164,6 +1174,13 @@ Rectangle {
                 return null
             }
 
+            sortIndicatorColumn: tableProxy.sortIndicatorColumn
+            sortIndicatorOrder: tableProxy.sortIndicatorOrder
+
+            onHorizontalHeaderClicked: function (column) {
+                tableProxy.toggleColumnSort(column)
+            }
+
             Component {
                 id: customComp
 
@@ -1175,6 +1192,10 @@ Rectangle {
                     property int row
                     property int column
 
+                    property NavigationPanel navigationPanel
+                    property int navigationRow
+                    property int navigationColumnStart
+
                     property string accessibleName: label.text
 
                     signal changed(string stub)

src/framework/uicomponents/qml/Muse/UiComponents/CMakeLists.txt

@@ -80,6 +80,8 @@ qt_add_qml_module(muse_uicomponents_qml
         sortfilterproxymodel.h
         shortcutoverridemodel.cpp
         shortcutoverridemodel.h
+        tablesortfilterproxymodel.cpp
+        tablesortfilterproxymodel.h
         toolbaritem.cpp
         toolbaritem.h
         validators/doubleinputvalidator.cpp

src/framework/uicomponents/qml/Muse/UiComponents/StyledTableView.qml

@@ -34,8 +34,12 @@ Item {
     property alias model: tableView.model
     property var sourceComponentCallback
 
+    property int sortIndicatorColumn: -1
+    property int sortIndicatorOrder: ColumnSortOrder.Unsorted
+
     property bool showVerticalHeader: false
     property bool horizontalHeaderNavigationEnabled: true
+    property bool displayTruncatedTextOnHover: false
 
     property var currentEditedCell: null
 
@@ -77,6 +81,7 @@ Item {
     }
 
     signal handleItem(var index, var item)
+    signal horizontalHeaderClicked(int column)
 
     QtObject {
         id: prv
@@ -118,6 +123,8 @@ Item {
 
             headerCapitalization: root.headerCapitalization
 
+            sortOrder: index === root.sortIndicatorColumn ? root.sortIndicatorOrder : ColumnSortOrder.Unsorted
+
             navigation.panel: root.navigationPanel
             navigation.row: 0
             navigation.column: index * 100 // * 100 - some extra space for cell controls
@@ -133,9 +140,27 @@ Item {
                 }
             }
 
+            TableView.onReused: {
+                // Sorting can cause header items to be reused for different columns,
+                // invalidating indices and thereby navigation focus.
+
+                if (!root.navigationPanel.isNavigationOnHeaders) {
+                    return
+                }
+
+                const idx = root.navigationPanel.navigationIndexForRestore
+                if (idx && index === idx.x) {
+                    navigation.requestActive(true)
+                }
+            }
+
             onFormatChangeRequested: function(formatId) {
                 display.currentFormatId = formatId
             }
+
+            onClicked: {
+                root.horizontalHeaderClicked(index)
+            }
         }
     }
 
@@ -237,6 +262,7 @@ Item {
             preferredWidth: hHeaderData.preferredWidth
 
             sourceComponentCallback: root.sourceComponentCallback
+            displayTruncatedTextOnHover: root.displayTruncatedTextOnHover
 
             isSelected: tableView.selectionModel.hasSelection && tableView.selectionModel.isSelected(tableView.model.index(row, column))
             evenMargins: showVerticalHeader

src/framework/uicomponents/qml/Muse/UiComponents/abstracttableviewmodel.cpp

@@ -89,10 +89,6 @@ ItemMultiSelectionModel* AbstractTableViewModel::selectionModel() const
 
 void AbstractTableViewModel::setTable(const QVector<QVector<TableViewCell*> >& table)
 {
-    if (table.isEmpty()) {
-        return;
-    }
-
     for (const auto& row : std::as_const(m_table)) {
         for (TableViewCell* cell : row) {
             if (cell) {

src/framework/uicomponents/qml/Muse/UiComponents/internal/StyledTableViewCell.qml

@@ -39,6 +39,7 @@ TableViewDelegate {
 
     property bool isSelected: false
     property bool evenMargins: false
+    property bool displayTruncatedTextOnHover: false
 
     property alias navigation: listItem.navigation
 
@@ -517,6 +518,7 @@ TableViewDelegate {
                             text: root.cellType === TableViewCellType.List ? root.itemData.current : val
                             textFormat: Text.PlainText
                             horizontalAlignment: Text.AlignLeft
+                            displayTruncatedTextOnHover: root.displayTruncatedTextOnHover
                         }
                     }
                 }

src/framework/uicomponents/qml/Muse/UiComponents/internal/StyledTableViewColumn.qml

@@ -38,6 +38,8 @@ Item {
 
     property int headerCapitalization: Font.AllUppercase
 
+    property int sortOrder: ColumnSortOrder.Unsorted
+
     property NavigationControl navigation: NavigationControl {
         name: root.objectName !== "" ? root.objectName : "TableViewColumn"
         enabled: root.enabled && root.visible
@@ -96,6 +98,16 @@ Item {
             opacity: ui.theme.buttonOpacityNormal
         }
 
+        StyledIconLabel {
+            id: sorterIcon
+            Layout.alignment: Qt.AlignVCenter
+
+            visible: root.sortOrder !== ColumnSortOrder.Unsorted
+            iconCode: root.sortOrder === ColumnSortOrder.Ascending ? IconCode.SMALL_ARROW_DOWN : IconCode.SMALL_ARROW_UP
+
+            opacity: ui.theme.buttonOpacityNormal
+        }
+
         MenuButton {
             Layout.alignment: Qt.AlignVCenter
             Layout.preferredWidth: 16
@@ -141,6 +153,11 @@ Item {
                 target: titleLabel
                 opacity: ui.theme.buttonOpacityHover
             }
+
+            PropertyChanges {
+                target: sorterIcon
+                opacity: ui.theme.buttonOpacityHover
+            }
         }
     ]
 }

src/framework/uicomponents/qml/Muse/UiComponents/internal/tableviewcell.h

@@ -47,6 +47,8 @@ class TableViewCell : public QObject
     Val value() const;
     void setValue(const Val& value);
 
+    virtual Val sortValue() const { return m_val; }
+
     void setRequestChangeFunction(const std::function<bool(int, int, const Val&)>& func);
 
     QVariant value_property() const;

src/framework/uicomponents/qml/Muse/UiComponents/internal/tableviewlistcell.h

@@ -41,6 +41,8 @@ class TableViewListCell : public TableViewCell
     QString current() const;
     void setCurrent(const QString& current);
 
+    Val sortValue() const override { return Val(m_current); }
+
 signals:
     void currentChanged();