TableView with horizontal header - Column Width

davidesalvetti

Hi all,

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. But I need to know that 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 that the column name then is cutted out.

Thanks for the help.