QML TableView with Horizontal Header - Column Width

Question

I'm developing a crossplatform application. Rigth now, I'm working on Window 10, Qt 5.15.2 MinGw 32bit. In my app I have a TableView on the qml side and a model derived from QSqlQueryModel on c++ side. I'm using QtQuick 2.15.

The TableView contains the data from a database but I needed an Header to display the column name, so I added a Row component in the TableView. The problem is with the function columnWidthProvider. I know from the doc that if I do not specify nothing, then the column's width is adjusted to make the items of a column fit inside it. But I need to know that width value so that I can give it to the Items inside the Row Header component, so that the columns are alligned to their corrispective "name".

This is my following code:

TableView {
        id: tableViewid

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: goToLapsButtonId.top
            topMargin: 10
            leftMargin: 10
            rightMargin: 10
            bottomMargin: 10
        }

        columnWidthProvider: function (column) {
            if (column === 0)
                return 0;
        }
        rowHeightProvider: function (column) {}
        topMargin: columnsHeader.implicitHeight

        model: masterController.ui_databaseController.ui_tableModel
        clip: true

        property int selectedRow : -1
        delegate: Rectangle {
            id: modelrect
            implicitWidth: textId.implicitWidth + 50
            implicitHeight: textId.implicitHeight + 10
            Text {
                id: textId
                text: display
                anchors.fill: parent
                color: row == tableViewid.selectedRow ? 'white' : 'black'
                font.bold: row == tableViewid.selectedRow
                font.pixelSize: 14
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }

            color: row == tableViewid.selectedRow ? "#AA0000ff" : "#AAffffff"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (tableViewid.selectedRow == row)
                        tableViewid.selectedRow = -1
                    else
                        tableViewid.selectedRow = row
                }
            }
        }

        Row {
            id: columnsHeader
            y: tableViewid.contentY
            z: 2
            Repeater {
                id: headerItems
                model: tableViewid.columns > 0 ? tableViewid.columns : 1
                Label {
                    width: tableViewid.columnWidthProvider(modelData)
                    height: 20
                    text: masterController.ui_databaseController.ui_tableModel.headerData(modelData, Qt.Horizontal)
                    color: '#ffffff'
                    font.pixelSize: 15
                    padding: 10
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    background: Rectangle {
                        color: "#000022"
                    }
                }
            }
        }

        onModelChanged: forceLayout()
    }

Any suggestion on how should I procede? I managed to do the opposite, using this function for columnWidthProvider:

columnWidthProvider: function (column) {
            if (column === 0)
                return 0;

            return headerItems.itemAt(column).implicitWidth + 10
        }

In this case the columns name are alligned to the columns value, but if an item inside a column is larger than the column name then is cutted off.

Thanks in advance for the help.

@MaximSkvortsov thanks for your comment, I took the structure from that link but I was still having problem with the column width of the Row Header. Fortunately from the answers in that question I found the HorizontalHeaderView element that is easier to configure and use. — Salvo

Salvo Salvo · Accepted Answer · 2021-05-31T09:45:07

I resolved my problem introducing this component I didn't know about QML HorizontalHeaderView that is available only from Qt 5.15. With this omponent I don't need anymore to resize the columns of the header because it's done automatically by the component.

QML TableView with Horizontal Header - Column Width

1 Answers