How to get column data from QtQuickControls 1 with TableView in QML?

Question

I am using import QtQuick.Controls 1.4 as CC. Whenever I click on first column, the output I get is undefined whereas I am able to get the data of the rest of the columns.

That first column has a delegate.
What is the way to get data from the first column which has a delegate?

import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4 as CC
import QtQuick.Controls.Styles 1.4

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    CC.TableView
    {
        height: 400; width: 600

        style: TableViewStyle
        {
            headerDelegate: Rectangle
            {
                height: 20
                color: "lightsteelblue"
                Text
                {
                    width: parent.width
                    text: styleData.value
                }
            }


            rowDelegate: Rectangle
            {
                color: "blue"
                height: 30

                MouseArea
                {
                    id: ma
                    anchors.fill: parent
                    onClicked:
                    {
                        console.log(styleData.value)
                    }
                }

            }

            itemDelegate: Rectangle
            {
                color: "blue"
                height: 30

                Text
                {
                    text: styleData.value
                }

                MouseArea
                {
                    id: ma1
                    anchors.fill: parent
                    onClicked:
                    {
                        console.log(styleData.value)
                    }
                }

            }
        }

        CC.TableViewColumn
        {
            role: "aaa"
            title: "AAA"
            width: 100

            delegate: Item
            {
                Rectangle
                {
                    anchors.left: parent.left
                    id: pic
                    radius: 100
                    height: 15; width: 15; color: "red"
                }

                Text
                {
                    anchors.left: pic.right
                    anchors.leftMargin: 10
                    text: styleData.value
                }
            }
        }
        CC.TableViewColumn
        {
            role: "bbb"
            title: "BBB"
            width: 100
        }

        CC.TableViewColumn
        {
            role: "ccc"
            title: "CCC"
            width: 100
        }

        model: ListModel
        {
            id: mymodel
            ListElement
            {
               aaa : "Banana1"
               bbb : "Apple1"
               ccc : "zzz1"
            }
            ListElement
            {
                aaa : "Banana2"
                bbb : "Apple2"
                ccc : "zzz2"
            }
        }
    }
}

Answer 1

For the old (edited) question:
You should use styleData.row instead of styleData.value in the console log lines

For the new question:
Your column has a delegate, which overrides the item delegate of the table. Then, when the first column is clicked, it is actually the delegate of the row which calls console log.

You can fix that by changing the column delegate to:

CC.TableViewColumn
{
    role: "aaa"
    title: "AAA"
    width: 100

    delegate: Item
    {
        Rectangle
        {
            anchors.left: parent.left
            id: pic
            radius: 100
            height: 15; width: 15; color: "red"
        }

        Text
        {
            id: text_id
            anchors.left: pic.right
            anchors.leftMargin: 10
            text: styleData.value
        }
        MouseArea
        {
            id: ma2
            anchors.fill: parent
            onClicked: {

                console.log(text_id.text)
            }
        }
    }
}