QML: TableView and Columns - qml

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