Text wrap in TableView

[DanielJG]

I want the text in each itemDelegate to wrap when it exceeds the width of the cell. It does that as needed but the overflow causes text to overlap with other cells and clipping. I know that the row height has to increase and I have to define a rowDelegate for this behaviour.

My best idea was to monitor the Text's "onContentHeightChanged" signal handler with some logic, get the index of the row the itemDelegate belongs to and then somehow change the height of the rowDelegate which I would find using the index. My attempts couldn't even bring me close to that (lots of syntax errors [relatively new to QML] and I don't see a way to get individual rows from a TableView). This is my table so far which reproduces the wrapping issue:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item
{
    width: 600; height: 300

    ListModel{
        id: myModel
        ListElement{
            column1: "Apple"
            column2: "Bat"
            column3: "Car"
        }
        ListElement{
            column1: "Some random"
            column2: "Latin"
            column3: "Below this row"
        }
        ListElement{
            column1: "Lorem ipsum dolor sit amet, at vim atqui ocurreret"
            column2: "te quod postea"
            column3: "moderatius pro, detracto noluisse"
        }
    }

    TableView{
        id: myTable
        model: myModel
        width: parent.width; height: parent.height
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

        TableViewColumn{
            id: col1
            role: "column1"
            title: "Column 1"
        }
        TableViewColumn{
            id: col2
            role: "column2"
            title: "Column 2"
        }
        TableViewColumn{
            id: col3
            role: "column3"
            title: "Column 3"
        }

        //Spaces columns to span the entire viewport
        onWidthChanged: {
            col1.width = 0.50 * width
            col2.width = 0.30 * width
            col3.width = 0.20 * width
        }

        //Table Styling from this point on...
        style: TableViewStyle{
            id: tableStyle
            backgroundColor: "#e3ecf4"
            alternateBackgroundColor: "#fff"
            textColor: "#000"
        }

        Rectangle {
            id: tableFrameTop
            anchors{
                right: parent.right
                left: parent.left
                top: parent.top
            }
            height: 1
            color: "#a2a2a2"
        }

        headerDelegate: Rectangle{
            width: headerText.implicitWidth
            height: headerText.implicitHeight * 1.2
            gradient: Gradient{
                GradientStop{position: 1.0; color: "#dadada"}
                GradientStop{position: 0.0; color: "#f9f9f9"}
            }

            Text{
                id: headerText
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: styleData.value
                color: "#292929"
                font{
                    pixelSize: 15
                    weight: Font.DemiBold
                }
            }

            Rectangle {
                id: headerColSeparator
                anchors{
                    right: parent.right
                    top: parent.top
                    bottom: parent.bottom
                    bottomMargin: 1
                    topMargin: 1
                }
                width: 1
                color: "#cccccc"
            }

            Rectangle {
                id: headerBottomBorder
                anchors{
                    right: parent.right
                    left: parent.left
                    bottom: parent.bottom
                }
                height: 1
                color: "#a2a2a2"
            }
        }

        itemDelegate: Rectangle{
           id: itemRect
           anchors.fill: parent
           color: "transparent"

           Text {
               id: itemText
               text: styleData.value
               anchors.fill: parent
               verticalAlignment: Text.AlignVCenter
               horizontalAlignment: Text.AlignHCenter
               font.pixelSize: 14
               color: "#292929"
            //    elide: Text.ElideRight
               wrapMode: Text.WordWrap  //Wrapping text in itemDelegate
           }

           Rectangle {
               id: itemGridRight
               anchors{
                   right: parent.right
                   top: parent.top
                   bottom: parent.bottom
               }
               width: 1
               color: "#cccccc"
           }
        }

        //Todo: create horizontal grid lines in rowDelegate
       /*rowDelegate: Rectangle{


       }*/
    }
}

How can I get the rows to change their heights when I have text wrapping?