QML TableView with dynamic number of columns

Question

I am trying to use QML TableView to display QAbstractTableModel . The missing part of the equation seems to be the inability to have a variable number of columns in the TableView , despite the redefinition of QAbstractItemModel::roleNames , which Qt should indicate the number and name of my columns. I tried to verify this using only QML:

 import QtQuick 2.0 import QtQuick.Controls 1.1 Rectangle { anchors.fill: parent property real showImage: 1.0 width: 500 TableView { id: myTable model: myModel // TableViewColumn { // role: "title"; title: "Name"; width: 200 // } } ListModel { id: myModel ListElement { title: "item one" } ListElement { title: "item two" } } } 

When this is done, nothing is displayed, despite the TableView mode containing the ListElement with the roles defined in them.

However, if the above code is uncommented and defined by the TableViewColumn , then the column will display data for this role as expected, but the table still does not display other roles. Obviously, this will only work for a statically determined number of columns, and not for my case, when the number of columns is unknown until runtime.

The above example is basically the same as my real life example, except that my model is defined in C ++.

It seems that this could already be asked here , but he received no answer.

EDIT: I tried calling the javascript function:

 function addColumnToTable(roleName) { var columnString = 'import QtQuick 2.3; import QtQuick.Controls 1.2; TableViewColumn {role: "' + roleName + '"; title: "' + roleName + '"; width: 40}'; var column = Qt.createQmlObject( columnString , myTable , "dynamicSnippet1") myTable.addColumn(column); } 

From C ++:

 QVariant roleName = "name"; QObject *root = view->rootObject(); QMetaObject::invokeMethod(root, "addColumnToTable", Q_ARG(QVariant, roleName)); 

This allowed me to dynamically add columns from C ++, although not from the model / view architecture. Yoanda's decision is much better than that.

Answer 1

You can dynamically create as many TableViewColumn as you need using the resources property of your TableView .

You will need to add a method to your custom model class, which will provide you with the role names that you want to display.

QML:

 Component { id: columnComponent TableViewColumn{width: 100 } } TableView { id: view anchors.fill: parent resources: { var roleList = myModel.customRoleNames var temp = [] for(var i=0; i<roleList.length; i++) { var role = roleList[i] temp.push(columnComponent.createObject(view, { "role": role, "title": role})) } return temp } model: myModel 

MyModel.h:

 class MyModel: public QAbstractListModel { Q_OBJECT Q_PROPERTY(QStringList userRoleNames READ userRoleNames CONSTANT) public: explicit MyModel(QObject *parent = 0); enum MyModelRoles { UserRole1 = Qt::UserRole + 1, UserRole2, ... }; QStringList userRoleNames(); int rowCount(const QModelIndex & parent = QModelIndex()) const; QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const; ... private: QHash<int, QByteArray> roleNames() const; ... }; 

MyModel.cpp:

 ... ... QHash<int, QByteArray> MyModel::roleNames() const { QHash<int, QByteArray> roles = QAbstractListModel::roleNames (); roles[UserRole1] = "whatever"; roles[UserRole2] = "youwant"; return roles; } QStringList MyModel::userRoleNames() // Return ordered List of user-defined roles { QMap<int, QString> res; QHashIterator<int, QByteArray> i(roleNames()); while (i.hasNext()) { i.next(); if(i.key() > Qt::UserRole) res[i.key()] = i.value(); } return res.values(); } ... ... 

Answer 2

The resource solution does not work for me (Qt 5.6). TableView is not updated.

This works for me:

 Component{ id: columnComponent TableViewColumn{width: 30 } } TableView { id: tableView model: listModel property var titles: somethingDynamic property var curTitles: { var t=[] for(var i=0;i<columnCount;i++){ t.push(getColumn(i).title) } return t } onTitlesChanged:{ for(var i=0;i<titles.length;i++){ if(curTitles.indexOf(titles[i])==-1){ var column = addColumn(columnComponent) column.title=titles[i] column.role=titles[i] } } for(var i=curTitles.length-1;i>=0;i--){ if(titles.indexOf(curTitles[i])==-1){ removeColumn(i) } } } } 

}

It also correctly updates drag and drop columns.