QML TableView delegate row height with multi-line text

jars121

I've got a question similar to this unanswered SO post.

I have a simple TableView as follows:

TableView {
    id: myTableView
    anchors.fill: parent

    model: TableModel {
        id: myTableModel

        TableModelColumn {display: "name"}
        TableModelColumn {display: "age"}
        TableModelColumn {display: "data"}

        rows: [
            {
                "name": "Tim"
                "age": "20"
                "data": "Nothing here!"
            },
            {
                "name": "Sam"
                "age": "22"
                "data": "Nothing here either!"
            },
            {
                "name": "Alex"
                "age": "19"
                "data": "Multiple lines of\ntext here!"
            }
        ]
    }

    delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: //This should be dynamic based on maximum lineCount for the entire row, not just this particular cell

        Label {
            text: display
            anchors.centerIn: parent
        }
    }
}

As shown in the example above, the first two rows will not cause issue, as their 'data' column cells contain a single line of text (ignoring column width and potential wrapping for the sake of this example). However, the third row contains a '\n' character in its 'data' column cell, causing that cell to have a lineCount of 2.

How can I allow for multiple lines of text like this within the TableView delegate? The delegate pertains to each cell of the TableView, so I'm not sure how to assign the required implicitHeight for each cell (i.e. each delegate) within the row based on the row's maximum lineCount.

jars121

A bit of an update to this question. I'm now using the QtQuick Controls 1 version of TableView, as I need the ability to drag-resize the columns (which it doesn't look like the QtQuick Control 2 version of TableView offers).

I've still not been able to account for multi-line text and automatic row resizing. I'd be very appreciative of any thoughts or suggestions!

jars121

I've made a bit of progress.

I found this post on SO, which showed a way of producing a dynamic height for each row within the rowDelegate element:

rowDelegate: Rectangle {
    height: (myModel.get(styleData.row).lineCount || 1) * 20
}

I've modified this for my particular use case, and now have the following:

rowDelegate: Rectangle {
    
    Component.onCompleted: {
        height = myTableModel.get(styleData.row).data.split("\n").length * 20
    }
}

Note that in the above snippet, my 'myTableModel' refers to a ListModel (in my updated code), not the TableModel shown in my original post.

The above code works, but it doesn't provide a complete solution. If my TableView were to be expanded to incorporate additional columns, a Math.max() calculation would have to be performed to process the .split("\n").length value of every single column, which doesn't seem like an efficient solution. The more pressing concern, is that this approach only caters to multi-line text strings that have explicit '\n' newline characters. The solution should also be able to account for text strings that have wrapped.

Any ideas?