how to sort QML TableView in QtQuick 2?

Question

I want to implement a sortable TableView with custom roles with Qt 5.1. But I don't know what to do more to make it sorted when user clicked on header.

in my Qt .pro file, I added:

!android: !ios: !blackberry: qtHaveModule(widgets): QT += widgets

in main.cpp, I used QtWidgets/QApplication as global app instance, and used qmlRegisterType for my new model class(see below):

qmlRegisterType<PositionModel>("MyDataModule", 1, 0, "PositionModel");

PositionModel is declared following:

class PositionModel : public QAbstractTableModel
{
    Q_OBJECT
public:
    enum PositionRoles {
        CustomRol1 = Qt::UserRole + 1,
        CustomRow2,
        PositionRoleMaxPlus1
    };

    explicit PositionModel(QObject *parent = 0);

    int rowCount(const QModelIndex &parent = QModelIndex()) const;
    int columnCount(const QModelIndex &parent = QModelIndex()) const;

    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
    QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const;

    bool setData(const QModelIndex &index, const QVariant &value, int role);

    void setData(QList<QObject*> data);

protected:
    QHash<int, QByteArray> roleNames() const;

private:
    QList<QObject*> m_data;

signals:

public slots:

};

and implemented as following:

PositionModel::PositionModel(QObject *parent) :
    QAbstractTableModel(parent)
{
}

QHash<int, QByteArray>
PositionModel::roleNames() const {
    QHash<int, QByteArray> roles;
    roles[CustomRole1] = "CustomRole1";
    roles[CustomRole2] = "CustomRole2";
    return roles;
}


int
PositionModel::rowCount(
        const QModelIndex &parent) const
{
    return m_data.size();
}

int
PositionModel::columnCount(
        const QModelIndex &parent) const
{
    return 2; // two custom rows
}

QVariant
PositionModel::data(
        const QModelIndex &index, int role) const
{
    if (!index.isValid() || (role != Qt::DisplayRole && role<Qt::UserRole))
        return QVariant();


    MyObject* myobj=dynamic_cast<MyObject*>(m_data[index.row()]);
    switch(role){
    case CustomRole1:
    {
        return QVariant(myobj->attribute1());
        break;
    }
    case CustomRole2:
    {
        return QVariant(myobj->attribute2());
        break;
    }
    default:
    {
        break;
    }

    }

    return QVariant();
}

QVariant
PositionModel::headerData(
        int section, Qt::Orientation orientation, int role) const
{
    if (role != Qt::DisplayRole && role<Qt::UserRole)
        return QVariant();


    if (orientation == Qt::Horizontal)
    {
        switch (section)
        {
        case 0:
            return tr("CustomRole1");
        case 1:
            return tr("CustomRole2");
    }
    return QVariant();
}

bool 
PositionModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
    return false;
}

void
PositionModel::setData(QList<QObject*> data)
{
    m_data=data;
}

and my .qml file is:

import QtQuick 2.1
import QtQuick.Controls 1.0
import StockModule 2.0

TableView {
    id: positionlisttable
    sortIndicatorVisible: true
    model: mydata.currentPosition // here "mydata" is an instance of MyData class and is set as a context property to QML. "currentPosition" is a Q_PROPERTY in MyData class, and its return type is QAbstractItemData*.

    TableViewColumn {
        role: "CustomRole1"
        title: "CustomRole1"
        width: 80
    }
    TableViewColumn {
        role: "CustomRole2"
        title: "CustomRole2"
        width: 80
    }
}

and in MyData class:

/*QAbstractItemModel*/QObject*
MyData::currentPosition() const
{
    PositionModel* newmd=new PositionModel();
    newmd->setData(m_d->data());
    QSortFilterProxyModel *filterModel = new QSortFilterProxyModel();
    filterModel->setSourceModel(newmd);
    filterModel->setSortRole(PositionModel::CustomRole1);
    filterModel->setDynamicSortFilter(true);
    return filterModel;
}

so now what should I continue to do to make it sortable?

DmitryARN DmitryARN · Accepted Answer · 2014-01-07T15:28:24

Add the following code to the QML:

TableView
{
...
    onSortIndicatorColumnChanged: model.sort(sortIndicatorColumn, sortIndicatorOrder)
    onSortIndicatorOrderChanged: model.sort(sortIndicatorColumn, sortIndicatorOrder)
}

Make sure that your C++ model has the accessible sort() method, for example:

class MySortFilterProxyModel : public QSortFilterProxyModel
{
    Q_OBJECT
    ...
    Q_INVOKABLE virtual void sort(int column, Qt::SortOrder order = Qt::AscendingOrder)
    {
        qDebug("Sorting by column %d", column);
        QSortFilterProxyModel::sort(column, order);
    }
}

You can name the method in a different way, I prefer to override the existing method sort().

how to sort QML TableView in QtQuick 2?

1 Answers