using scrollview in tableview qml

MrErfan

Insert Table within the scroll, I do it because I can I change the color and scroll Position
please guide me.

    ScrollView
    {
        width: tbl.width
        height: tbl.height
        anchors.fill: tbl
        
        style: ScrollViewStyle {
            handle: Item {
                implicitWidth: 14
                implicitHeight: 26
                Rectangle {
                    color: "red"
                    anchors.fill: parent
                    anchors.topMargin: 6
                    anchors.leftMargin: 4
                    anchors.rightMargin: 4
                    anchors.bottomMargin: 6
                }
            }
            scrollBarBackground: Item {
                implicitWidth: 14
                implicitHeight: 26
            }
        }

        TableView {
            id : tbl
            width: 500
            height: 400
            TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                width: 200
            }
            model: "100"
        }
    }

johnsmith

But TableView inherits from ScrollView, so you get the scroll-related features in TableView too, I don't think you need to insert the TableView in a ScrollView.

What are you trying to achieve and why do you not simply change the style of the scrollbars in the tableview as instructed in the other topic you posted? TableView provides a list view with scroll bars, styling and header sections, and it should be possible to modify the styling to do what you want with the color and the position.

MrErfan

thanks for your response ,
My tried for the perfect custom table, I have designed a custom table that has remained just scroll .

MrErfan

I used once in the table of style, but also the style I want to scroll, you got two the style I use?

        TableView {
            id : tbl
            width: 500
            height: 400

            TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                width: 200
            }
            model: "100"
                    style:TableViewStyle {

                        rowDelegate: Rectangle{
                            height: 50

                        }
                        frame: Rectangle {
                            border{
                                color: "white"
                            }
                        }
                    }
//style2
            style: ScrollViewStyle {
                handle: Rectangle {
                    implicitWidth: 14
                    implicitHeight: 26
                    Rectangle {
                        color: "red"
                        anchors.fill: parent
                        anchors.topMargin: 6
                        anchors.leftMargin: 4
                        anchors.rightMargin: 4
                        anchors.bottomMargin: 6
                    }
                }
                scrollBarBackground: Item {
                    implicitWidth: 14
                    implicitHeight: 26
                }
            }

johnsmith

So according to your code example, you want the handle to be red, and the frame around the view to be white, right?

Then what you do is put what you have on the ScrollViewStyle on your TableViewStyle, like this, because as previously explained in both topics you started, TableView inherits from ScrollView, so the properties from the parent class can be used in the classes that inherit them:

    TableView {
        id : tbl
        width: 500
        height: 400

        TableViewColumn {
            role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                width: 200
            }
            model: "100"
            style:TableViewStyle {
                rowDelegate: Rectangle{
                    height: 50
                }

                frame:Rectangle {
                    border{
                        color: "white"
                    }
                }
                handle: Rectangle {
                    implicitWidth: 14
                    implicitHeight: 26
                    Rectangle {
                        color: "red"
                        anchors.fill: parent
                        anchors.topMargin: 6
                        anchors.leftMargin: 4
                        anchors.rightMargin: 4
                        anchors.bottomMargin: 6
                    }
                }
                scrollBarBackground: Item {
                    implicitWidth: 14
                    implicitHeight: 26

                }
            }
        }
   }

The above code, plus some more code for a window and a menubar produces the following:

Example

MrErfan

Thank you very much ,
Now the only problem I have left to right scrolling

johnsmith

@MrErfan The right to left scrollbar will appear when necessary, just resize the view so it's too small to show your data both from top to bottom and from left to right:

TableView {
        id : tbl
        width: 200
        height: 200
        //rest of the code is the same as above
}

I just tested it and the above makes the view show both scrollbars, and both have the red and white styling you wanted.

MrErfan

Sorry wrong, I have right to left scrolling