1

I have a simple TableView with 4 TableViewColumns, I'm not usually working with qml, so I'm not really sure how to work properly inside this code.

What I want is that I need a mouse-over the TableView headers (column names). I checked all over and did not found any of a certain simple solution to my problem.

I have tried to use a tool-tip inside the TableVIewColumn but it never shows up, and I have seen that Mouse Area is not supported inside the TableViewColumn. Maybe the solution is simple but I am not aware of it for the moment.

Rectangle {
    width: parent.width
    height: parent.height

    TableView {
        id: table
        width: parent.width
        height: parent.height
        headerVisible: true

        TableViewColumn {
            id: time
            role: "t-stamp"
            title: "Time"
            width: 60
        }
        TableViewColumn {
            id: d
            role: "id"
            title: "SignId"
            width: 40
        }
        TableViewColumn {
            id: sid
            role: "s-id"
            title: "StratId"
            width: 50
        }
        TableViewColumn {
            id: stratname
            role: "strat_name"
            title: "StratName"
            width: 200
        }

        Connections{
            target: MessageTabelModel
            onUpdateView:{
                  table.resizeColumnsToContents()
            }
        }
        model: MessageTabelModel
    }
}
AAEM
  • 1,837
  • 2
  • 18
  • 26

1 Answers1

1

TableView has a headerDelegate property that contains mouse information:

In the header delegate you have access to the following special properties:

  • styleData.value - the value or text for this item
  • styleData.column - the index of the column
  • styleData.pressed - true when the column is being pressed
  • styleData.containsMouse - true when the column is under the mouse
  • styleData.textAlignment - the horizontal text alignment of the column (since QtQuickControls 1.1)

So you can use styleData.containsMouse for your needs, for example with a simple basic text:

headerDelegate: Text {
    color: styleData.containsMouse ? "red" : "black"
    text: styleData.value
    // ...
}

Or if you want more customization:

headerDelegate: Rectangle {
    height: 20
    implicitWidth: headerText.paintedWidth
    border.color: "black"
    // ...

    Text {
        id: headerText
        color: styleData.containsMouse ? "red" : "black"
        text: styleData.value
        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
}
augre
  • 2,011
  • 12
  • 18
  • hey, thanks for the answer, this is actually helpfull, just a single question I have in addition. When I add the headerDelegate and use my hover, the lines between the columns dissapear, and I dont know why. – no_name_to_display Jul 11 '19 at 10:45
  • Because your header delegate becomes the text only, so the frame disappears. You can customize the delegate entirely by wrapping the text around a Rectangle to give borders for example (see the second example I added in my answer). You might also be interested by this answer to be able to customize borders separately: https://stackoverflow.com/a/16562823/4503757 – augre Jul 11 '19 at 11:18