qml scrollview with table automatically go to bottom

Question

For a project I am showing data in a table, the newest data is the most relevant so I want that to be the most visible but it should also be possible to see the earlier data. The following code contains the view with a scrollbar.

    ScrollView{
        id:dataScrollView
        width: parent.width
        anchors.top: headerWrapper.bottom
        height:parent.height - headerWrapper.height

        ScrollBar.vertical.policy: ScrollBar.AlwaysOn;
        clip: true



        TableView{
            id: table
            columnSpacing: 1
            rowSpacing: 1
            clip: true
            implicitHeight: column.height - 33
            implicitWidth: column.width
            model: modelItem
            delegate: compColored
            onContentHeightChanged: {
                //new data has come in I want to scroll to the bottom
                console.log("update scroll to bottom" )
            }
        }
    }

I know exactly where to put the code but i do not know how I can make the scrollbar go to the bottom or how to set the position of the scrollbar. Can someone point me out to how I can set the position of the scrollbar?

epsilon epsilon · Accepted Answer · 2019-09-12T10:28:00

As TableView inherits Flickable, you can reposition the contentItem within the viewport simply by:

 onContentHeightChanged: {
     table.contentY = table.contentHeight - table.height
 }

and the Flickable's contentItem bottom area will be visible in the viewport.

qml scrollview with table automatically go to bottom

1 Answers