<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[QML TableView control add MouseArea  Mouse click on the item can not be selected]]></title><description><![CDATA[<p dir="auto">Customize the QML TableView style, add the MouseArea event to the rowDelegate, Mouse click on the item can not be selected.</p>
<p dir="auto">Thanks soo much to everyone :-)</p>
<pre><code>import QtQuick 2.6
import QtQuick.Controls 2.2 as Control2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Private 1.0


ApplicationWindow {
    id: mainWindow
    width: 1080
    height: 676
    color: "#00000000"
    title: "QML TableView Sample"
    visible: true

    ListModel {
        id: fileListModel
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
    }

    TableView {
        id: tableView
        anchors.fill: parent
        sortIndicatorVisible: true//sortEnabled
        selectionMode: SelectionMode.ExtendedSelection
        alternatingRowColors: false
        Keys.enabled: true
        enabled: true
        model: fileListModel

        /*! The background color. */
        property color backgroundColor: tableView.backgroundVisible ? "#FFFFFF" : "transparent"

        /*! The alternate background color. */
        property color alternateBackgroundColor: "#FFFFFF"


        style: TableViewStyle {

            rowDelegate: Rectangle {
                id: delegateRect
                height: 30
                property color selectedColor: styleData.hasActiveFocus ? "#07c" : "#4DA6FF"
                color: styleData.selected ? selectedColor :
                                            !styleData.alternate ? tableView.alternateBackgroundColor : tableView.backgroundColor

                Rectangle {
                    id: hoverRect
                    anchors.fill: parent
                    color: "#00000000"

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        propagateComposedEvents: true

                        onClicked: {
                            //hoverRect.color = "#4DA6FF"
                            //hoverRect.opacity = 0.5
                            mouse.accepted = false
                        }

                        onEntered: {
                            hoverRect.color = "#4DA6FF"
                            hoverRect.opacity = 0.1
                            //mouse.accepted = false
                        }

                        onExited: {
                            hoverRect.color = "#00000000"
                            hoverRect.opacity = 1.0
                            //mouse.accepted = false
                        }

                    }

                }
            }

            itemDelegate: Item {
                id: delegateItem
                height: Math.max(30, label.implicitHeight * 1.2)
                property int implicitWidth: label.implicitWidth + 20

                Text {
                    id: label
                    objectName: "label"
                    width: parent.width
                    anchors.leftMargin: 26
                    anchors.left: parent.left
                    anchors.right: parent.right
                    horizontalAlignment: styleData.textAlignment
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: 1
                    elide: styleData.elideMode
                    text: styleData.value !== undefined ? styleData.value : ""
                    color: styleData.textColor
                    renderType: Text.NativeRendering
                    visible: true

                }
            }

        }

        TableViewColumn {
            title: qsTr("Name")
            role: "fileName"
            width: 275
        }

        TableViewColumn {
            title: qsTr("Modify time")
            role: "modifyTime"
            width: 140
        }

        TableViewColumn {
            title: qsTr("Type")
            role: "fileType"
            width: 140
        }

        TableViewColumn {
            title: qsTr("Size")
            role: "fileSize"
            width: 80
        }

    }

}


</code></pre>
<p dir="auto"><img src="https://ddgobkiprc33d.cloudfront.net/d7f165e9-dd75-4cb4-b43c-044890ac533b.png" alt="alt text" class=" img-fluid img-markdown" /></p>
<p dir="auto"><a href="https://ddgobkiprc33d.cloudfront.net/d7f165e9-dd75-4cb4-b43c-044890ac533b.png" target="_blank" rel="noopener noreferrer nofollow ugc">0_1508724478214_2.png</a></p>
]]></description><link>https://forum.qt.io/topic/84299/qml-tableview-control-add-mousearea-mouse-click-on-the-item-can-not-be-selected</link><generator>RSS for Node</generator><lastBuildDate>Tue, 27 Oct 2026 04:45:33 GMT</lastBuildDate><atom:link href="https://forum.qt.io/topic/84299.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 19 Oct 2017 01:57:58 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to QML TableView control add MouseArea  Mouse click on the item can not be selected on Mon, 07 May 2018 11:42:32 GMT]]></title><description><![CDATA[<p dir="auto">Hi, any solution to this one?</p>
]]></description><link>https://forum.qt.io/post/456770</link><guid isPermaLink="true">https://forum.qt.io/post/456770</guid><dc:creator><![CDATA[MTOLANI]]></dc:creator><pubDate>Mon, 07 May 2018 11:42:32 GMT</pubDate></item></channel></rss>