How to make qml TableView row height dynamically adapt to content

Question

The problem is the following:

If the length of the text is longer than the width of the cell, the text is wrapped, but the height of the row is not increased. which displays the rest of the text chopped. My other question is, how to adapt the height of each cell to the text contained in it?

Here's the QML part:

Window {
id: window
visible: true
width: 440
height: 400
title: qsTr("Table test")

ListModel {
    id: stringsModel

    ListElement {
        ID: 0
        String: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
    }
    ListElement {
        ID: 1
        String: 'This is a test string'
    }ListElement {
        ID: 1
        String: 'This is another test string'
    }
}

TableView {
    anchors.fill: parent
    frameVisible: false
    model: stringsModel

    TableViewColumn { role: "ID"; title: "ID"; width: window.width / 2 }
    TableViewColumn { role: "String"; title: "String"; width: window.width / 2; delegate: stringDelegate;}

    Component {
        id: stringDelegate
        Item {
            id: stringItem
            Text {
                id: stringTxt
                width: parent.width
                text: styleData.value
                wrapMode: TextEdit.WordWrap
            }
        }
    }
}

}

Answer 1

Your delegate's root item should define its implicitHeight property. Something like this:

Component {
    id: stringDelegate
    Item {
        id: stringItem
        implicitHeight: stringTxt.paintedHeight
        Text {
            id: stringTxt
            width: parent.width
            text: styleData.value
            wrapMode: TextEdit.WordWrap
        }
    }
}