How to change the color (background, text) of header of TableView in Qt5?

Question

I use TableView for my application in Qt5. It's possible to change color (background, text and alternate) of rows of this table, but there is no options for changing color of headers (titles).

How to do that?

Answer 1

Mitch's example was a great basis, but it was not working entirely nice for me. The resize line was not shown properly and I also wanted to have a bottom line. This worked better for me (tested on Qt5.12):

    SystemPalette { id: myPalette; }

    style: TableViewStyle {
        backgroundColor: myPalette.base
        headerDelegate: Item {
            height: textLine.implicitHeight * 1.2 + 1

            Rectangle {
                color: myPalette.light
                height: textLine.implicitHeight * 1.2
                Text {
                    id: textLine
                    anchors.fill: parent
                    color: myPalette.text
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: styleData.textAlignment
                    text: styleData.value
                    anchors.leftMargin: 8
                    elide: Text.ElideRight
                    renderType: Text.NativeRendering
                }
            }
            Rectangle {
                anchors.left: parent.left 
                anchors.right: parent.right 
                height: 1
                y: textLine.implicitHeight * 1.2
                color: myPalette.mid 
            }
            Rectangle {
                anchors.top: parent.top 
                anchors.bottom: parent.bottom 
                width: 1
                anchors.right: parent.right
                color: myPalette.mid
            }
        }
    }

I also rely on the palette. This has the added benefit of working with macOS dark mode as well as bright mode.

Actually, mid is a bit dark for dark mode... but in dark mode, I find many contrasts a bit weak anyways in macOS, so maybe that's still fine, you need to try out yourself. Sadly, Qt's documentation of Palette again lacks any notice of which color is for borders. Maybe, it's just missing entirely.

Answer 2

There are options for it: headerDelegate. You can use the one in TableView or TableViewStyle. Here's an example with a headerDelegate implementation taken from the Base style:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Window {
    id: win
    width: 360
    height: 360
    visible: true

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    TableView {
        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }
        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
        model: libraryModel

        style: TableViewStyle {
            headerDelegate: Rectangle {
                height: textItem.implicitHeight * 1.2
                width: textItem.implicitWidth
                color: "lightsteelblue"
                Text {
                    id: textItem
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: styleData.textAlignment
                    anchors.leftMargin: 12
                    text: styleData.value
                    elide: Text.ElideRight
                    color: textColor
                    renderType: Text.NativeRendering
                }
                Rectangle {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 1
                    anchors.topMargin: 1
                    width: 1
                    color: "#ccc"
                }
            }
        }
    }
}

As you may have noticed, there is a "colour glitch" at the end of the header (see screenshot above). That is because, by default, the backgroundColor property is set to white. Changing it to match the header color solves the issue, i.e. add the following line to your TableViewStyle implementation:

backgroundColor : "lightsteelblue"