TableView QML Type onClicked event

Question

I am currently using a TableView in my QML file. I would like to know which cell the user clicked.. There is a post here: https://forum.qt.io/topic/84284/tableview-onclicked-slot/2 which shows the onClicked code in the QML file. However, when i tried on my code it says invalid property name. My QML file code is:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import TransactionHistoryTableModel 1.0
import tech.siotgov.DataManager 1.0
import "../../components" as Components
import "../../utils/httpRequest.js" as HttpRequest

Rectangle {
  id: root
  objectName: "TransactionHistory"
  color: "white"

  property string pageTitle: "Transaction History"

  ColumnLayout {
    id: home
    anchors.leftMargin: parent.width * 0.05
    anchors.rightMargin: parent.width * 0.05
    anchors.fill: parent
    anchors.horizontalCenter: parent.horizontalCenter

    Components.PageTitle {
        title: pageTitle
    }

    Rectangle {
      id: transactionHistoryDisplay
      color: "white"
      Layout.fillWidth: true
      Layout.preferredHeight: parent.height - 100

      Components.Table {
          model: _transactionHistoryTableModelAPI
          columnWidths: [0.4, 0.6]
          onClicked: {
                      console.log(" click ")
                      console.log(color_string)
                  }
      }      
    }

    Item { //spacer
        Layout.fillWidth: true
        Layout.fillHeight: true
        Rectangle {
            anchors.fill:  parent
            color: "white"
        }
    }
  }

  Component.onCompleted: {
      const locationId = DataManager.currentLocation.locationId;

      const d = new Date()
      d.setTime(d.getTime() - d.getTimezoneOffset()*60*1000);
      const datetimeStamp = d.toISOString().split('.')[0]

      _transactionHistoryTableModelAPI.resetTable(locationId);
      HttpRequest.query(
        "query { transactionsByLocation(fromDateTime:\"2019-01-01T07:54:34\", toDateTime:\"" + datetimeStamp + "\", location:" + locationId + ") { transactionId, datetime, items  { transactionItemId }, transactionType {name}, location_1{locationName}, location_2{locationName} } }",
        res => {
            _transactionHistoryTableModelAPI.updateTable(res.data.transactionsByLocation);
      })
  }

}

The Table.qml file is:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

TableView {

    anchors.fill: parent
    clip: true
    property var columnWidths: [0.5, 0.5]   // as fractions of parent width
                                            // preferably overwrite this when using
    columnWidthProvider: function (column) { return Math.max(parent.width * columnWidths[column], 1) }

    delegate: Rectangle {
        implicitHeight: text.implicitHeight
        border.color: "#dddddd"
        color: (heading==true)?"#dddddd":"white"
        Text {
            id: text
            text: tabledata
            width: parent.width
            wrapMode: Text.Wrap
            padding: 5
        }
    }
}

Answer 1

In a view you must set the MouseArea in the delegate and expose it through a signal from the root of the component:

Table.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

TableView {
    id: root
    anchors.fill: parent
    clip: true
    signal clicked(int row, int column) // <---
    property var columnWidths: [0.5, 0.5]   // as fractions of parent width
                                            // preferably overwrite this when using
    columnWidthProvider: function (column) { return Math.max(parent.width * columnWidths[column], 1) }

    delegate: Rectangle {
        implicitHeight: text.implicitHeight
        border.color: "#dddddd"
        color: heading ? "#dddddd" : "white"
        Text {
            id: text
            text: tabledata
            width: parent.width
            wrapMode: Text.Wrap
            padding: 5
        }
        MouseArea{
            anchors.fill: parent
            onClicked: root.clicked(model.row, model.column) // <---
        }
    }
}

*.qml

// ...
Components.Table {
    model: _transactionHistoryTableModelAPI
    columnWidths: [0.4, 0.6]
    onClicked: console.log(row, column)
}
// ...