border around tableView not working

[jfinn88]

not able to get a border to display using REctangle obj or frame in tableView



Rectangle {
id: tableViewRect
width: 880
height: 490
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
border.width: 10
border.color: "lightsteelblue"
color: "transparent"
TableView {
id: tableView
anchors.fill: parent
sortIndicatorVisible: true
sortIndicatorOrder: 1
sortIndicatorColumn: 1
frameVisible: true
model: UserEventLog
style: TableViewStyle {
// frame: Rectangle {
// border.color: "lightsteelblue"
// border.width: 50
// }
headerDelegate: Rectangle {
height: textItem.implicitHeight * 1.2
width: textItem.implicitWidth
color: "lightsteelblue"
Text {
id: textItem
anchors.centerIn: parent
text: styleData.value
}
Rectangle {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 3
color: "yellow"
}
}
}
TableViewColumn {
role: "id"
title: "id"
width: 100
}
TableViewColumn {
role: "userName"
title: "User Name"
width: 200
}
TableViewColumn {
role: "eventMessage"
title: "Event Message"
width: 372
}
TableViewColumn {
role: "dateTime"
title: "Date Time"
width: 201
}
}
}


update: I get the border to kinda show up but cant adjust width an it does not wrap around the hole table...



style: TableViewStyle {
frame: Rectangle {
border{
color: "red"
width: 10
}
}


Added after 44 minutes:

found a solution: just messed around with my outer object rectangle and anchoring got a border around my tableView now! I made the rectangle little larger than tableView then enter tableView in the Rect.



Rectangle {
width: 880
height: 490
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
color: "transparent"
radius: 7
border.color: "lightsteelblue"
border.width: 5
visible: true
TableView {
id: tableView
width: 870
height: 480
anchors.centerIn: parent
sortIndicatorVisible: true
sortIndicatorOrder: 1
sortIndicatorColumn: 1
//frameVisible: true
model: UserEventLog
style: TableViewStyle {
headerDelegate: Rectangle {
height: textItem.implicitHeight * 1.2
width: textItem.implicitWidth
color: "lightsteelblue"
Text {
id: textItem
anchors.centerIn: parent
text: styleData.value
}
Rectangle {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 3
color: "yellow"
}
}
}
TableViewColumn {
role: "id"
title: "id"
width: 100
}
TableViewColumn {
role: "userName"
title: "User Name"
width: 200
}
TableViewColumn {
role: "eventMessage"
title: "Event Message"
width: 372
}
TableViewColumn {
role: "dateTime"
title: "Date Time"
width: 201
}
}
}

[wysota]

Why not simply:

TableView {
id: tv
// ...
}

Rectangle {
anchors.fill: tv
border { color: "black"; width:2 }
color: "transparent"
}

[jfinn88]

that looks little cleaner I can try that

I don't see a hole lot of difference other than the rectangle wouldn't be a parent obj of the tableView... I'm I missing something

[wysota]

My code exposes TableView interface to the outside world. Your code exposes Rectangle interface to the outside world. Since you want to have a table view with a border rather than a box with a table view inside, my code seems a more direct approach to obtain what you want.

[jfinn88]

I see... thank you for the explanation, it helped a lot in understanding what I want to achieve

[jfinn88]

I have messed around with your suggestion, it makes sense to do it like that after your explanation however it doesn't give visually what I need It puts the border inside of the table instead of around the out side is there away to make go on the outside of the table? its the fill anchor that needs changed but not sure what to try. If you use the rect obj as the parent of the table view it gives visually what I want is there any benefit to exposing the table vs a rect with a table view in it

[wysota]

it doesn't give visually what I need It puts the border inside of the table instead of around the out side
So make the box bigger by half the border size.