WordWrap in TableView

sandro4912

I try to display Text data in a TableView. However WordWrap seems to get ignored and my result looks like this:

So how can I make TableView to accept the WordWrap of TextArea:

TextArea{
              id: displayText
              text: modelData
              horizontalAlignment: Text.AlignHCenter
              wrapMode: TextEdit.WordWrap
          }

Full code:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Quiz")

    TableView {
        id: tableView
        boundsBehavior: Flickable.StopAtBounds
        reuseItems: true
        clip: true

        columnWidthProvider: function (column) {return 200; }
        rowHeightProvider: function() { return -1 }
        anchors.fill: parent
        topMargin: columnsHeader.implicitHeight

        model: questionSqlTableModel

        delegate: ItemDelegate{
            id: delegateItem
            implicitHeight: displayText.height

            TextArea{
                id: displayText
                text: modelData
                horizontalAlignment: Text.AlignHCenter
                wrapMode: TextEdit.WordWrap
            }
        }

        ScrollIndicator.vertical: ScrollIndicator { }

        // display header
        Row{
            id: columnsHeader
            y: tableView.contentY
            z: 2

            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1

                Text {
                    id: labelRow
                    width: tableView.columnWidthProvider(index)
                    height: tableView.rowHeightProvider()
                    text: questionSqlTableModel.headerData(modelData, Qt.Horizontal)
                }
            }
        }
    }
}

Markkyboy

Usually, for WordWrap to be effective, you need to declare width (width of TextArea), otherwise, it does not know where to 'wrap' the text.

sandro4912

I could fix it by set width like you suggested. Is it a good approach to calculate the width out of columnWidthProvider?

My code now looks like this:

ApplicationWindow {
    visible: true
    //width: 640
    width: 1700
    height: 480
    title: qsTr("Quiz")

    TableView {
        id: tableView
        boundsBehavior: Flickable.StopAtBounds
        reuseItems: true
        clip: true

        columnWidthProvider: function (column) {
            if(column === 0) {
                return 30;
            }
            if(column === 6){
                return 100;
            }
            if(column === 7) {
                return 100
            }
            return 220;
        }
        rowHeightProvider: function() { return -1 }
        anchors.fill: parent
        topMargin: columnsHeader.implicitHeight

        model: questionSqlTableModel

        delegate: Rectangle{
            id: rect
            implicitHeight: 50
            implicitWidth: tableView.columnWidthProvider(tableView.column)
            border.width: 1

            TextArea{
                width: rect.implicitWidth
                id: displayText
                text: modelData
                wrapMode: TextArea.WordWrap
            }
        }

        ScrollIndicator.vertical: ScrollIndicator { }

        // display header
        Row{
            id: columnsHeader
            y: tableView.contentY
            z: 2

            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1

                Text {
                    id: labelRow
                    width: tableView.columnWidthProvider(index)
                    height: tableView.rowHeightProvider()
                    text: questionSqlTableModel.headerData(modelData, Qt.Horizontal)
                }
            }
        }
    }
}

Which gives me:

Problem now is the header which gets generated overlaps with the cells. How can I fix that issue?