ScrollView with a table automatically goes 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.

How I can set the position of the scrollbar?

Answer 1

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.