DeveloperNote.com

QT 5.13 supports SplitView and TableView but without TableHeader yet. Probably TableHeader can be implemented with the overlays. And there is an interesting example of implementation of table header with the source code.

The information provided below is outdated.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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 { }
}