QML: TableView and Columns

Question

I noticed that the column that is on the right always overlaps the data from the column that is on the left. How to change this behavior?

The panel with shadow is defined into TableViewColumn.delegate. I need the panel to overlap the neighbor in the right cell.

// Minimal code example that represent a problem!

Page {
    TableView {
        anchors.fill: parent
        selectionMode: 1

        TableViewColumn {
            role: "login"
            title: "Login"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    height: 40
                    width: 150
                    color: "green"
                }
            }
        }

        TableViewColumn {
            role: "fullName"
            title: "FullName"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    height: 30
                    width: 150
                    color: "red"
                }
            }
        }

        TableViewColumn {
            role: "status"
            title: "Status"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle{
                    anchors.verticalCenter: parent.verticalCenter
                    height: 20
                    width: 150
                    color: "blue"
                }
            }
        }

        model: ListModel {
            ListElement { text: "ghdjbf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
        }

        property Component headerDelegate: BorderImage {
            property bool sortSwitcher: false
            height: 40
            id: tableHeader
            objectName: "TableHeader"

            Rectangle {
                id: viewableSection
                anchors.fill: parent
                color: "white" // "#f2f2f2"

                Text {
                    id: textItem
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignLeft
                    anchors.leftMargin: 25
                    font.pixelSize: 11
                    font.family: "Roboto"
                    text: styleData.value
                    font.bold: true
                    elide: Text.ElideRight
                    color: "#646464"
                    renderType: Text.NativeRendering
                }

                Rectangle {
                    id: bottomHeaderBorder
                    anchors.top: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 1
                    color: "#ebebeb"
                }

                Rectangle {
                    id: headerSeparator
                    z: 1
                    anchors.left: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 8
                    anchors.topMargin: 8
                    width: 1
                    color: "lightgrey"

                    MouseArea {
                        id: mouseAreaSeparator
                        hoverEnabled: true
                        anchors.fill: parent
                        cursorShape: Qt.SizeHorCursor
                        onEntered: {
                            mouseAreaSeparator.cursorShape = Qt.SizeVerCursor
                        }
                    }
                }
            }
        }

        property Component rowDelegate: Rectangle {
            id: rowDel
            objectName: "RowDelegate"
            height: 50
            //property color selectedColor: styleData.hasActiveFocus ? primaryColor : secondaryColor
            property bool selectionMaskVisible
            property bool selected: false

            Rectangle {
                id: rowSelectionMask
                anchors.fill: parent
                color: rowDel.selectionMaskVisible ? "#f2f2f2"  : "#ffffff"
                visible: parent.activeFocus ? false : true
                z: parent.activeFocus ? 1 : 2
            }

            Rectangle {
                id: activeFocusMask
                anchors.fill: parent
                color: parent.activeFocus ? styleData.row !== undefined ?  secondaryColor : "White" : "White"
                opacity: styleData.row !== undefined ? 0.9 : 0
                z: parent.activeFocus ? 2 : 1
            }

            MouseArea {
                id: rowMouseArea
                anchors.fill: parent
                hoverEnabled: true

                acceptedButtons: Qt.LeftButton | Qt.RightButton

                onEntered: {
                    if (styleData.row !== undefined)
                    {
                        rowDel.selectionMaskVisible = true
                    }
                }
                onExited: {
                    rowDel.selectionMaskVisible = false
                }
            }

            Rectangle {
                id: bottomBorder
                objectName: "BottomBorder"
                z: 2
                anchors.bottom: parent.bottom
                height: 1
                width: parent.width
                color: "#ebebeb"
                opacity: styleData.row !== undefined ? 1 : 0
            }
            Rectangle {
                id: separator
                z: 1
                anchors.left: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 1
                anchors.topMargin: 1
                width: 1
                color: "red"
            }
        }
    }
}

Answer 1

Judging from the code there is no clean solution to it.

But as you can see, the delegate of the TableViewColumn is instantiated by a Loader via a Repeater into a Row.

So to change get the first column on top of the second column, we need to change the z-index - but not of the delegate itself (as this would only affect the children of the same Loader) but of the Loader. This can be achieved e.g in the Component.onCompleted-handler.

TableViewColumn {
    role: "login"
    title: "Login"
    width: 100

    delegate: Rectangle {
        color: "transparent"
        anchors.fill: parent
        Component.onCompleted: parent.z = 3 // <- Put the loader on top of its siblings
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            height: 40
            width: 150
            color: "green"
        }
    }

    Component.onCompleted: console.log(Object.keys(this))
}