Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Tableview header
Forum Updated to NodeBB v4.3 + New Features

Tableview header

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
12 Posts 6 Posters 3.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Babs
    wrote on 4 Mar 2019, 08:41 last edited by
    #1

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

    G 1 Reply Last reply 4 Mar 2019, 10:49
    0
    • B Babs
      4 Mar 2019, 08:41

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

      G Offline
      G Offline
      gfxx
      wrote on 4 Mar 2019, 10:49 last edited by
      #2

      @Babs

      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

      bkt

      B 1 Reply Last reply 4 Mar 2019, 13:21
      0
      • G gfxx
        4 Mar 2019, 10:49

        @Babs

        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

        B Offline
        B Offline
        Babs
        wrote on 4 Mar 2019, 13:21 last edited by
        #3

        @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

        G 2 Replies Last reply 4 Mar 2019, 15:22
        0
        • B Babs
          4 Mar 2019, 13:21

          @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

          G Offline
          G Offline
          gfxx
          wrote on 4 Mar 2019, 15:22 last edited by
          #4

          @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

          bkt

          1 Reply Last reply
          0
          • B Babs
            4 Mar 2019, 13:21

            @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

            G Offline
            G Offline
            gfxx
            wrote on 8 Mar 2019, 18:34 last edited by
            #5

            @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

            bkt

            G 1 Reply Last reply 11 Mar 2019, 09:22
            0
            • G gfxx
              8 Mar 2019, 18:34

              @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

              G Offline
              G Offline
              gfxx
              wrote on 11 Mar 2019, 09:22 last edited by gfxx 3 Nov 2019, 09:29
              #6

              @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");
              

              bkt

              B 1 Reply Last reply 13 Mar 2019, 08:30
              0
              • G gfxx
                11 Mar 2019, 09:22

                @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");
                
                B Offline
                B Offline
                Babs
                wrote on 13 Mar 2019, 08:30 last edited by
                #7

                @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

                G 1 Reply Last reply 13 Mar 2019, 08:57
                0
                • B Babs
                  13 Mar 2019, 08:30

                  @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

                  G Offline
                  G Offline
                  gfxx
                  wrote on 13 Mar 2019, 08:57 last edited by
                  #8

                  @Babs these example came from 5.12

                  bkt

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    maxwell31
                    wrote on 15 Mar 2019, 11:19 last edited by maxwell31
                    #9

                    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!).

                    1 Reply Last reply
                    0
                    • N Offline
                      N Offline
                      NeoMind
                      wrote on 8 Apr 2019, 11:33 last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      • Y Offline
                        Y Offline
                        YamielAbreu
                        wrote on 17 Dec 2020, 08:32 last edited by
                        #11

                        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.

                        DiracsbracketD 1 Reply Last reply 18 Dec 2020, 05:06
                        0
                        • Y YamielAbreu
                          17 Dec 2020, 08:32

                          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.

                          DiracsbracketD Offline
                          DiracsbracketD Offline
                          Diracsbracket
                          wrote on 18 Dec 2020, 05:06 last edited by Diracsbracket
                          #12

                          @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

                          1 Reply Last reply
                          0

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved