Qt Quick Controls 2 does not support TableView

Qt Quick Controls 2 does not support TableView and looks like they are not going to support it, some notable missing features from Qt Quick Controls 1 also are Action, SplitView and TreeView, so the following QML code would not work:

TableView {

    TableViewColumn {
        role: "time"
        title: qsTr("date/time:")
        width: parent.width - 30
    }

    TableViewColumn {
        role: "score"
        title: qsTr("result:")
        width: 30
    }

    model: boardModel.list

    ScrollIndicator.vertical: ScrollIndicator { }
}

But there is a solution with ListView, so there can be something like this:

ListView {
    id: listView
    Layout.fillWidth: true
    Layout.topMargin: 15
    Layout.bottomMargin: 20
    height: 0.2 * window.height
    spacing: 5

    contentWidth: headerItem.width
    flickableDirection: Flickable.HorizontalAndVerticalFlick

    header: Row {
        spacing: 1
        function itemAt(index) { return repeater.itemAt(index) }
        Repeater {
            id: repeater
            model: [qsTr("date/time:"), qsTr("result:")]
            Label {
                text: modelData
                font.bold: true
                padding: 10
                //background: Rectangle { color: "silver" }
            }
        }
    }

    function columnWidth(index) { return listView.headerItem.itemAt(index).width }

    model: boardModel.list

    delegate: GridLayout {
        id: grid
        columns: 2
        rows: 1
        width: contentWidth
        flow: GridLayout.LeftToRight

        Text {
            Layout.alignment: Qt.AlignVCenter
            text: time
            width: contentWidth - columnWidth(1)
        }

        Text {
            Layout.alignment: Qt.AlignRight
            text: score
            font.pixelSize: 16
            width: columnWidth(1)
        }
    }

    ScrollIndicator.vertical: ScrollIndicator { }
}

Leave a Reply

Your email address will not be published. Required fields are marked *