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 Babs

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

    gfxxG Offline
    gfxxG Offline
    gfxx
    wrote on 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
    0
    • gfxxG gfxx

      @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 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

      gfxxG 2 Replies Last reply
      0
      • B 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

        gfxxG Offline
        gfxxG Offline
        gfxx
        wrote on 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

          @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

          gfxxG Offline
          gfxxG Offline
          gfxx
          wrote on 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

          gfxxG 1 Reply Last reply
          0
          • gfxxG 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

            gfxxG Offline
            gfxxG Offline
            gfxx
            wrote on last edited by gfxx
            #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
            0
            • gfxxG 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");
              
              B Offline
              B Offline
              Babs
              wrote on 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

              gfxxG 1 Reply Last reply
              0
              • B 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

                gfxxG Offline
                gfxxG Offline
                gfxx
                wrote on last edited by
                #8

                @Babs these example came from 5.12

                bkt

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  maxwell31
                  wrote on 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 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 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
                      0
                      • Y 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.

                        DiracsbracketD Offline
                        DiracsbracketD Offline
                        Diracsbracket
                        wrote on 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