Qt Quick Controls 2 has TableView but without the header yet

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:

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 { }
}

4 Responses to Qt Quick Controls 2 has TableView but without the header yet

    1. dmitriano says:

      Very good!

    2. Crawl.W says:

      I think it’s scanty for the scene involving headerview(vertical and horizontal), or delegate item of differrent column.

Leave a Reply

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