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.
  • 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