Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

TableView full example



  • Hi!

    I am struggling to understand how to work with a TableView in QML. I am only using QML at the moment and I would like to achieve a table with column headers, not editable cells with text where one column needs to be different. The text for the different column needs some tweaking so the text from the model needs to be passed to a function for some conversion first.
    That is the first step. A second step would be to add sorting but I have no looked at that yet.

    So far I got this:

         TableView {
                width: parent.width
                model: myModel
    
               TableViewColumn { role: "name"; title: qsTr("Name")}
               TableViewColumn { role: "check"; title: qsTr("Check"); delegate: checkCell }
               TableViewColumn { role: "sr"; title: qsTr("SR")}
               TableViewColumn { role: "cost"; title: qsTr("Cost")}
               TableViewColumn { role: "duration"; title: qsTr("Duration")}
               TableViewColumn { role: "proptery"; title: qsTr("Property")}
            }
    
        Component {
            id: checkCell
            Label {
                text: logic.getAttr(styleData.value,3)
            }
        }
    
        TableModel {
            id: myModel
    
            TableModelColumn { display: "name"}
            TableModelColumn { display: "check"}
            TableModelColumn { display: "sr"}
            TableModelColumn { display: "cost"}
            TableModelColumn { display: "duration"}
            TableModelColumn { display: "proptery"}
        }
    
        Component.onCompleted: {
            myModel.appendRow({
                                 name: "Test 1",
                                 check: "in/kl/kk",
                                 sr: 4,
                                 cost: "5 €",
                                 duration: "3 Second",
                                 property: "B"
            })
    

    The result is a table with correct headers but all cells are filled with "Test 1" besides the check cell. This on is empty. I added a log to the getAttr-function. It is never called.

    I am not sure what I am doing wrong and I was not able to find a full example explaining all these things. Could someone point me to a good example explaining how to use TableViewColumn?


  • Qt Champions 2018

    You are using TableView from Qt Quick Controls 1 which doesn't work with table models but with list models.
    Table models have multiple columns, list models have single column with multiple roles in it.

    If you want to use a TableModel, use the new TableView from Qt Quick : https://doc.qt.io/qt-5/qml-qtquick-tableview.html



  • Thanks for the hint. I am understanding now what I did wrong. TableViewColumn does not work with QtQuick.Controls 2.15. But I need QtQuick.Controls 2.15 for other reasons.

    Do I understand the situation correct that what I want to achieve is not possible with QtQuick.Controls 2.15? Having a column with a different delegate? Headings? Sorting?


Log in to reply