Tableview header

Babs

Hello. Anyone get an idea of how to set title for each column in new TableView on qml side and c++ side?

gfxx

import QtQuick 2.3
import QtQuick.Controls 2.3
import QtQuick.Controls 1.4 as C /* for make possible work controls 1.4 and 2.3 in the same page*/

/* your page layout and style code*/


                  C.TableView {
                       id: tableViewUser
                       x: 8
                       y: 8
                       width: 1152
                       height: 675
                       verticalScrollBarPolicy: 2
                       anchors.fill: parent
                       clip: true


                       C.TableViewColumn {
                           title: "User id"  /***************  !!!!   ********************/
                           role: "IDuser"
                           width: title.length * 10
                       }

regards

Babs

@gfxx I was talking about the new tableview in qt 5.12. This one is the one from QtQuick Controls. Anyway thank you for your response

gfxx

@Babs sorry I've unistall 5.12 so not can try .... but I think (for the Qt blog 5.12 tableView is only a special type of ListView) is similar to item{ text: .... where item are column .... but never try on 5.12 .... Please modify the title in somethings like "qt5.12 tableview header" .... so you can obtain more precise help.

regards

gfxx

@Babs I've istall today 5.12 ... same problem so I return to

import QtQuick.Controls 1.4 as C

If you have find the solutions ...

regards

gfxx

@gfxx I reply to my questions and @Babs question .... the solution is provided by qt example:

   TableView {
        id: tableView
        anchors.top: parent.top
        anchors.left: parent.left
        TableViewColumn{ role: "timestamp" ; title:  "Month"; width: tableView.width / 2 }
        TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: tableView.width / 4 }
        TableViewColumn{ role: "income" ; title: "Income" ; width: tableView.width / 4 }
/* TableViewColumn{ role: "timestamp" ; title: nameColumn1 ; width: tableView.width / 2 }
        TableViewColumn{ role: "expenses" ; title: nameColumn2 ; width: tableView.width / 4 }
        TableViewColumn{ role: "income" ; title: nameColumn3 ; width: tableView.width / 4 }  if you would set column name from c++ main*/

        itemDelegate: Item {
            Text {
                id: delegateText
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width
                anchors.leftMargin: 4
                anchors.left: parent.left
                anchors.right: parent.right
                color: styleData.textColor
                elide: styleData.elideMode
                text: customText
                horizontalAlignment: styleData.textAlignment

                property string originalText: styleData.value
                property string customText

                onOriginalTextChanged: {
                    if (styleData.column === 0) {
                        if (delegateText.originalText !== "") {
                            var pattern = /(\d\d\d\d)-(\d\d)/
                            var matches = pattern.exec(delegateText.originalText)
                            var colIndex = parseInt(matches[2], 10) - 1
                            delegateText.customText = matches[1] + " - " + graphAxes.column.labels[colIndex]
                        }
                    } else {
                        delegateText.customText = originalText
                    }
                }
            }
        }

        model: graphData.model

So I see that my first reply was ok.

for C++ side

auto* ctx = engine.rootContext();
ctx->setContextProperty("nameColumn1", "myColumn1");
ctx->setContextProperty("nameColumn2", "myColumn2");
ctx->setContextProperty("nameColumn3", "myColumn3");

Babs

@gfxx Your are using tableview for qt quick control 1.4. A new tableview was released from version 5.12 and is more efficient. I am talking about this one.
https://doc.qt.io/qt-5/qml-qtquick-tableview.html

gfxx

@Babs these example came from 5.12

maxwell31

As far as I understood it, you need to make headers on your own, e.g. outside of the table (which is a shame QT!).

NeoMind

So is this still the case or has headers been added now in TableView. because i still do not see them.

YamielAbreu

More than 1 year later, I am having the same issue with tableview on QML, having a table on QML with headers is not easy or well documented. This is really a shame if you want to use QML for desktop applications.

Diracsbracket

@YamielAbreu
Faced the same problem, and found a sketch of a "solution" here:
https://stackoverflow.com/questions/55610163/how-to-create-a-tableview-5-12-with-column-headers