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

QtQuick Controls2 TableView



  • 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


  • Qt Champions 2018

    @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.



  • Amazing!
    Thank you so much


Log in to reply