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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

---

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

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

To copy to clipboard, switch view to plain text mode 

[wysota]

Why not simply:

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

TableView {
  id: tv
 // ...
}

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

To copy to clipboard, switch view to plain text mode 

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