How to use TableView with ListModel data in QtQuickControls2?

Question

How to insert Columns in this table with style delegates?

I am using QtQuick.Controls 2, so TableViewColumn which belongs to older QtQuick cannot be used here.

https://www.qt.io/blog/2016/10/06/qt-quick-controls-2-1-and-beyond

Some notable missing features from Qt Quick Controls 1 are Action, SplitView, TableView, and TreeView.

If it is not supported at all, then what is the way to form a table in QML?

What is the way out?

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

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

    TableView
    {
        height: 200; width: 200
        columnSpacing: 1
        rowSpacing: 1

        x: 10; y: 10

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


        delegate: Rectangle
                    {
                        implicitWidth: 100
                        implicitHeight: 50
                        color: "red"
                        border.color: "black"
                        Text
                        {
                            text: mymodel.data(1,"aaa")
                        }
                    }

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log( mymodel.display)
            }
        }
    }

Answer 1

You were on a right way, just missed few points.

Please, refer to your updated code that works:

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

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("TableView example")

  TableView {
    height: 200
    width: 200
    columnSpacing: 1
    rowSpacing: 1
    x: 10
    y: 10

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

    delegate: Rectangle {
      implicitWidth: 100
      implicitHeight: 50
      color: "red"
      border.color: "black"
      Text {
        anchors.centerIn: parent
        text: aaa
      }
      Text {
        color: "cyan"
        anchors {
          bottom: parent.bottom
          horizontalCenter: parent.horizontalCenter
        }
        text: bbb
      }
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log("Clicked on delegate:")
          console.log(" - Attached model property:", model)
          console.log(" - Attached model.aaa:", model.aaa)
          console.log(" - Attached model.bbb:", model.bbb)
        }
      }
    }
  }
}

You can use ListModel without problems with TableView. To access to content you can refer to model property and/or access by respective property name (as in my example).