How do I make QML TableView have two columns with a single header?

Question

table view with various columns and rows

Each column of TableView is bound to a model item.

How can I make two columns with only one header like in the picture? “Column 1” contains two columns, “F-1” and “drop here”.

Maybe you can solve this by specifying a custom delegate in the TableViewColumn. see here — Florian Schmidt
Or as a workaround, use custom item delegate divided to 2 cells — folibis
will you do me a favor to show some examples? i'm new for qml. Thx. — Jim

folibis folibis · Accepted Answer · 2016-08-11T08:45:09

Here some simple example:

import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 1.4


Window
{
    width: 600
    height: 500
    visible: true

    ListModel {
        id: myModel
        ListElement {
            column1: "A1"
            column2: "A2"
            column3: "A3"
        }
        ListElement {
            column1: "B1"
            column2: "B2"
            column3: "B3"
        }
        ListElement {
            column1: "C1"
            column2: "C2"
            column3: "C3"
        }
    }

    TableView {
        id: myTable
        anchors.fill: parent
        anchors.margins: 5
        TableViewColumn {
            role: "column1"
            title: "Column1"
            width: myTable.width / 3
            horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "column2"
            title: "Column2"
            width: myTable.width / 3
            horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "column3"
            title: "Column3"
            width: myTable.width / 3
            horizontalAlignment: Text.AlignHCenter
        }
        model: myModel
        itemDelegate: Item {
            Row {
                id: row
                anchors.fill: parent
                Text {
                    width: row.width/2
                    text: styleData.value
                    horizontalAlignment: Text.AlignHCenter
                }
                Text {
                    width: row.width/2
                    text: "drop here"
                    color: "red"
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }
    }
}

How do I make QML TableView have two columns with a single header?

1 Answers