Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

WordWrap in TableView



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

    b2e28dfd-d360-41b8-bed5-98d21a978273-image.png

    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)
                    }
                }
            }
        }
    }
    


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



  • 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:

    c8aab3e5-908f-49d9-9385-10ea9ae67e91-image.png

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


Log in to reply