How to use resizeToContents() in a TableView?

[Sikarjan]

Hi,

I am just do not understand on how to use the resizeToContents() method. Where do I have to put that? I am not able to find an example using this method.

Here is the table I want to use. Can someone show me how the columns are resized?

    TableView {
        id: propertyTable
        y: 165
        height: 150
        anchors.right: parent.right
        anchors.rightMargin: root.standardMargin
        anchors.left: parent.left
        anchors.leftMargin: root.standardMargin

        model: propertyModel

        TableViewColumn {
            role:"name"
            title: qsTr("Property")

        }
        TableViewColumn {
            role: "mod"
            title: qsTr("Mod")
        }
        TableViewColumn {
            role: "startValue"
            title: qsTr("Start Value")
        }
        TableViewColumn {
            role: "value"
            title: qsTr("Value")
        }
    }

Thanks

[A Former User]

Hi! Here is an example for how to resize the first column by clicking a button:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id: root
    visible: true
    width : 500
    height: 500

    TableView {
        id: propertyTable
        y: 165
        height: 150
        anchors.right: parent.right
        anchors.rightMargin: root.standardMargin
        anchors.left: parent.left
        anchors.leftMargin: root.standardMargin

        model: ListModel {
            id: libraryModel
            ListElement {
                title: "A Masterpiece"
                author: "Gabriel"
            }
            ListElement {
                title: "Brilliance"
                author: "Jens"
            }
            ListElement {
                title: "Outstanding"
                author: "Frederik"
            }
        }

        TableViewColumn {
            id: nameColumn
            role:"title"
            title: qsTr("Property")

        }
        TableViewColumn {
            role: "author"
            title: qsTr("Mod")
        }
    }

    Button{
        id : view
        text: "Click me"
        anchors.bottom: parent.bottom
        onClicked: nameColumn.resizeToContents()
    }
}

[Sikarjan]

Thanks for the hint. But clicking a button does not seam to be very practical. I want to use the table to display information and make sure that it is displayed properly.
I tried to use Component.onCompleted instead but this gives me an error:

QtQuick/Controls/TableViewColumn.qml:143: TypeError: Cannot read property '__listView' of null

[A Former User]

The implementation of TableView has been changed due to performance resons (see docs and this bug). Basically this means that you can no longer trust TableView's onCompleted handler. But the following seems to work:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id: root
    visible: true
    width : 500
    height: 500

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        Component.onCompleted:  propertyTable.resizeAllColumns()
    }

    TableView {
        id: propertyTable
        anchors.fill: parent

        model: libraryModel

        function resizeAllColumns() {
            for (var i=0; i<columnCount; ++i)
                getColumn(i).resizeToContents()
        }

        TableViewColumn {
            id: nameColumn
            role:"title"
            title: qsTr("Property")

        }
        TableViewColumn {
            id: authorColumn
            role: "author"
            title: qsTr("Mod")
        }
    }

}

[Sikarjan]

Thanks again for helping. But it is not really working for me. My model is a XmlListModel and I tried your code with status == ready and onComplete but nothing. When I add a button and connect the function to onClicked your code works nicely...

Unfortunately the length of the table header is not considered. I believe this is a two year old bug.

At the moment I am using

width: title.length*factor

This seems to work okay for now. I am just curious if it will work on other screens as well.