QtQuick Controls2 TableView

dxm_surfer

Hello,

I need a table view in my application. Currently I am using Qt 5.11 and I would be willing to migrate to 5.12 if necessary. Currently running on Linux x86_64.

I know that 5.12 introduced the TableView control, but it does not fit my needs (yet), it is very basic. Most important for me are row and column headers that have the OverlayHeader behavior of the ListView. This does not seem possible with TableView.

So in order to build a table myself I tried to combine two ListViews, one for the content and the column headers, and one for the row headers (code see below). Unfortunately, the 'solution' has some glitches. Most notably, after playing a bit, the two lists differ in their y position (see screenshot). As you can see in the code, the contentY of the inner list is bound to contentY of the outer list.

Can anybody reproduce this issue & give me some advice?

Code is based on the accepted answer on stackoverflow

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Window 2.11

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent
        color: '#222222'

        ListView {
            id: listView

            anchors.fill: parent
            anchors.margins: 10

            ListView {
                id: rowTitleList

                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: 180

                clip: true
                contentWidth: headerItem.width
                flickableDirection: Flickable.VerticalFlick
                headerPositioning: ListView.OverlayHeader
                contentY: listView.contentY

                model: 100

                header: Rectangle {
                    width: 180
                    height: 35
                    color: '#222222'
                    z: 10
                }

                delegate: Column {
                    id: delegate2
                    property int row: index

                    Rectangle {
                        color: '#333333'
                        width: listView.headerItem.itemAt(column).width
                        height: 60
                        Text {
                            anchors.fill: parent
                            anchors.margins: 10

                            color: '#aaaaaa'
                            font.pixelSize: 15
                            text: qsTr("%1x%2").arg(delegate2.row).arg(column)
                            verticalAlignment: Text.AlignVCenter
                        }
                    }
                    Rectangle {
                        color: "#222222"
                        width: parent.width
                        height: 2
                    }
                }
            }

            clip: true
            contentWidth: headerItem.width
            flickableDirection: Flickable.HorizontalAndVerticalFlick
            headerPositioning: ListView.OverlayHeader

            header: Row {
                spacing: 2
                z: 10
                function itemAt(index) { return repeater.itemAt(index) }

                Rectangle {
                    width: 180
                    height: 35
                    color: 'transparent'
                }

                Repeater {
                    id: repeater
                    model: ["C1", "C2", "C3", "C4", "C5", "C6", "C7"]
                    Label {
                        width: 300
                        height: 35
                        text: modelData
                        color: '#aaaaaa'
                        font.pixelSize: 15
                        padding: 10

                        background: Rectangle { color: "#333333" }
                    }
                }
            }

            model: 100
            delegate: Column {
                id: delegate
                property int row: index

                Row {
                    spacing: 2

                    Rectangle {
                        width: 180
                        height: 60
                        color: 'transparent'
                    }

                    Repeater {
                        model: 7
                        Rectangle {
                            color: 'transparent'
                            width: listView.headerItem.itemAt(column).width
                            height: 60
                            Text {
                                anchors.fill: parent
                                anchors.margins: 10

                                color: '#aaaaaa'
                                font.pixelSize: 15
                                text: qsTr("%1x%2").arg(delegate.row).arg(column)
                                verticalAlignment: Text.AlignVCenter
                            }
                        }
                    }
                }
                Rectangle {
                    color: "#555555"
                    x: 180
                    width: parent.width - 180
                    height: 2
                }
            }

            ScrollIndicator.horizontal: ScrollIndicator { }
            ScrollIndicator.vertical: ScrollIndicator { }
        }
    }
}

table with offset

Thanks in advance

GrecKo

@dxm_surfer said in QtQuick Controls2 TableView:

Most important for me are row and column headers that have the OverlayHeader behavior of the ListView. This does not seem possible with TableView.

It is possible.

import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Window 2.11
import TableModel 0.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: '#222222'

    TableView {
        id: tableView

        columnWidthProvider: function (column) { return 300; }
        rowHeightProvider: function (column) { return 60; }
        anchors.fill: parent
        leftMargin: rowsHeader.implicitWidth
        topMargin: columnsHeader.implicitHeight
        model: TableModel {}
        delegate: Item {
            Text {
                text: display
                anchors.fill: parent
                anchors.margins: 10

                color: '#aaaaaa'
                font.pixelSize: 15
                verticalAlignment: Text.AlignVCenter
            }
        }
        Rectangle { // mask the headers
            z: 3
            color: "#222222"
            y: tableView.contentY
            x: tableView.contentX
            width: tableView.leftMargin
            height: tableView.topMargin
        }

        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2
            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1
                Label {
                    width: tableView.columnWidthProvider(modelData)
                    height: 35
                    text: "Column" + modelData
                    color: '#aaaaaa'
                    font.pixelSize: 15
                    padding: 10
                    verticalAlignment: Text.AlignVCenter

                    background: Rectangle { color: "#333333" }
                }
            }
        }
        Column {
            id: rowsHeader
            x: tableView.contentX
            z: 2
            Repeater {
                model: tableView.rows > 0 ? tableView.rows : 1
                Label {
                    width: 180
                    height: tableView.rowHeightProvider(modelData)
                    text: "Row" + modelData
                    color: '#aaaaaa'
                    font.pixelSize: 15
                    padding: 10
                    verticalAlignment: Text.AlignVCenter

                    background: Rectangle { color: "#333333" }
                }
            }
        }

        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

TableView headers

TableModel is taken from the example in the TableView documentation
Note that TableView is not part of Qt Quick Controls 2 but is directly in the Qt Quick module.

dxm_surfer

Amazing!
Thank you so much