qml - How to make a cell editable in qt tableview -

i try make cell editable using tableview in qt. have found few examples , came following:

            tableview {                 id: tableview                 objectname: "tableview"                 horizontalscrollbarpolicy: -1                 selectionmode: selectionmode.singleselection                  layout.minimumwidth: 300                 layout.fillheight: true                 layout.fillwidth: true                  model: trackableinfomodel                  itemdelegate: rectangle {                     text {                         anchors.verticalcenter: parent.verticalcenter                         text: styledata.value                     }                     mousearea {                         id: cellmousearea                         anchors.fill: parent                         onclicked: {                             if(styledata.column === 2){                                   //do                             }                         }                     }                 } 

from found looks need itemdelegate paint each cell. add mousearea cell , check cell selected. in case need react on cells in column 2.

the thing when use code shown above error that:

javascipt blocks not supported in qt quick ui form. (m223)

because of tried register property alias cellmousearea this:

property alias cellmousearea : cellmousearea

however leads error:

qrc:/editpageform.ui.qml:24 invalid alias reference. unable find id "cellmousearea"

and i'm lost. maybe, started off wrong way. if shed light i'd highly appreciate it.

thank you

overlay cell textinput on click.

import qtquick 2.7 import qtquick.controls 1.4 import qtquick.layouts 1.0  applicationwindow {     visible: true     width: 640     height: 480     title: qstr("hello world")      tableview {         id: tableview         objectname: "tableview"         horizontalscrollbarpolicy: -1         selectionmode: selectionmode.singleselection         anchors.fill: parent          tableviewcolumn {             id: titlecolumn             title: "title"             role: "title"             movable: false             resizable: false             width: tableview.viewport.width - authorcolumn.width         }          tableviewcolumn {             id: authorcolumn             title: "author"             role: "author"             movable: false             resizable: false             width: tableview.viewport.width / 3         }          model: listmodel {             id: librarymodel             listelement {                 title: "a masterpiece"                 author: "gabriel"             }             listelement {                 title: "brilliance"                 author: "jens"             }             listelement {                 title: "outstanding"                 author: "frederik"             }         }          itemdelegate: rectangle {             text {                 anchors { verticalcenter: parent.verticalcenter; left: parent.left }                 color: "black"                 text: styledata.value             }              mousearea {                 id: cellmousearea                 anchors.fill: parent                 onclicked: {                     // column index 0 based                     if(styledata.column === 1){                         loader.visible = true                         loader.item.forceactivefocus()                     }                 }             }              loader {                 id: loader                 anchors { verticalcenter: parent.verticalcenter; left: parent.left}                 height: parent.height                 width: parent.width                 visible: false                 sourcecomponent: visible ? input : undefined                  component {                     id: input                     textfield {                         anchors { fill: parent }                         text: ""                         onaccepted:{                             // stuff                             loader.visible = false                         }                          onactivefocuschanged: {                             if (!activefocus) {                                 loader.visible = false                             }                         }                     }                 }             }         }     } }