CODEWITHSUNDEEP
qtqmlscrollbarqtquickcontrols2
Sven van den Boogaart
Sven van den Boogaart

Reputation: 12327

ScrollView with a table automatically goes to bottom

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?

Upvotes: 1

Views: 2207

Answers (2)

imahgin
imahgin

Reputation: 11

In Qt6, the simplest solution is this:

TableView {
    ...

    onRowsChanged: {
        positionViewAtRow(rows - 1, TableView.AlignVCenter)
    }
}

Upvotes: 0

epsilon
epsilon

Reputation: 2969

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.

Upvotes: 4

Related Questions