Congratulations to our 2022 Qt Champions!

TableView highlight column on mouse-over

  • I have a TableView and would like to highlight the column that the mouse is over.
    I can do the visual part by drawing a rectangle in the itemDelegate.

    What I am struggling with is getting the column index the mouse is over.
    I found the function tableView.__listView.columnAt() but it always returns -1

    Here is the relevant part of my tableView qml...

    property int mouseColumn: 0
    itemDelegate: Item {
    	 id: item
    	 Rectangle {
    		  anchors.fill: parent
    		  color: "Green"
    		  visible: {
    		      // highlight the column the mouse is over
    				if(styleData.column == tableView.mouseColumn)
    	MouseArea {
    		anchors.fill: parent
    		hoverEnabled: true
    		onPositionChanged: {
    			var coordinates = item.mapToItem(tableView, mouse.x, mouse.y)
    			// TODO: how to find column index at coordinates, columnAt always returns -1 for some reason
    			tableView.mouseColumn = tableView.__listView.columnAt(coordinates.x)

  • Ive been looking into this a bit more myself and ive found that the TableView headerVisible property makes a big difference. I am currently hiding the header.

    When headerVisible=false then tableView.__listView.columnAt(x) always returns -1.

    When headerVisible=true then tableView.__listView.columnAt(x) works correctly.

    Id like to keep the table's header hidden if possible, hopefully a workaround for tableView.__listView.columnAt(x) is possible.

    Also, im on Windows with Qt5.5.1 mingw if that makes any difference.