TableView in QML

Take a look at how the TableView works in Qt6 with QML. If we refer to the example from the official documentation, we find this code:

 import QtQuick 2.14
 import Qt.labs.qmlmodels 1.0

 TableView {
     anchors.fill: parent
     columnSpacing: 1
     rowSpacing: 1
     clip: true

     model: TableModel {
         TableModelColumn { display: "name" }
         TableModelColumn { display: "color" }

         rows: [
             {
                 "name": "cat",
                 "color": "black"
             },
             {
                 "name": "dog",
                 "color": "brown"
             },
             {
                 "name": "bird",
                 "color": "white"
             }
         ]
     }

     delegate: Rectangle {
         implicitWidth: 100
         implicitHeight: 50
         border.width: 1

         Text {
             text: display
             anchors.centerIn: parent
         }
     }
 }

It produces this:

If we add more columns to the model in the following manner:

model: TableModel {
                    TableModelColumn { display: "name" }
                    TableModelColumn { display: "color" }
                    TableModelColumn { display: "feet" }
                    TableModelColumn { display: "fly" }

                    rows: [
                        {
                            "name": "cat",
                            "color": "black",
                            "feet": "four",
                            "fly": "no"
                        },
                        {
                            "name": "dog",
                            "color": "brown",
                            "feet": "four",
                            "fly": "no"
                        },
                        {
                            "name": "bird",
                            "color": "white",
                            "feet": "two",
                            "fly": "yes"
                        }
                    ]
                }

we have:

In this approach, not all elements are visible because each cell is of the same size. While this uniformity can be visually appealing, it may not always be practical. Next, let’s see how we can add a custom header and adjust the cells to have widths based on the size of the elements within them.

Let’s start with the header:

           HorizontalHeaderView {
                id: horizontalHeader
                anchors.left: tableView.left
                anchors.top: parent.top
                syncView: tableView
                clip: true
                model: ["Name", "Color", "Feet", "Fly"]
                delegate:
                    Rectangle {
                        implicitWidth: txt.width + dp(5)
                        implicitHeight: txt.height + dp(5)
                        color: "darkgray"
                        AppText {
                            id: txt
                            text: modelData
                            anchors.centerIn: parent
                            color: "white"
                        }

                }

            }

First, we attach the header to the left side of the table and set the syncView to the tableView. This ensures synchronization between the table and the header, meaning each header column aligns with its corresponding column in the tableView. Next, we define the labels for the header. Finally, we see in the delegate how to display the header’s cells.

The tableView:

            TableView {
                id: tableView
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: horizontalHeader.bottom
                anchors.bottom: parent.bottom
                columnSpacing: 1
                rowSpacing: 1
                clip: true
                contentWidth: parent.width
                columnWidthProvider: column => { return -1; }
                model: // is the same

                delegate: Rectangle {
                    implicitWidth: Math.max(horizontalHeader.columnWidth(column), txtRow.width) + dp(5)
                    implicitHeight: txtRow.height + dp(10)
                    border.color: "darkgray"
                    Text {
                        id: txtRow
                        text: display
                        anchors.centerIn: parent
                    }
                }
            }

The model remains the same as previously mentioned and is not included here. Regarding the positioning, the top of the table is anchored to the bottom of the header, as one would expect. The code enabling cell width to be based on the element’s width within the cell is as follows: columnWidthProvider: column => { return -1; }. The columnWidthProvider property expects a function that returns the width for a column. However, if it returns -1, the size is automatically calculated based on the size of the element in the cell.

Another important aspect to note is the use of the following code:

implicitWidth: Math.max(horizontalHeader.columnWidth(column), txtRow.width) + dp(5)

Why is this necessary? It ensures that if the text in the header of a column is wider than the text in the data cells, the size of the header remains readable. This code calculates the maximum width between the header and the row text, and then adds a small margin (dp(5)) for better visual spacing.

The final result is:

“Note: English is not my native language, so please excuse any errors. I would appreciate your assistance in correcting them.”