Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved TableView header hides first elements

    QML and Qt Quick
    2
    3
    389
    Loading More Posts
    • 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.
    • S
      sandro4912 last edited by sandro4912

      I have the following. Issue. I implemented a TableView with Header.

      Since Headers are not directly supported I implemented it with the model I use from C++. Overall everything works except one Issue.

      On startup of the program the table looks like this:

      Screenshot_20200613_191138.png

      However when I try to scroll up I realize the first two rows were under the Header:

      Screenshot_20200613_191227.png

      Now table view implementation with header looks like this:

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      import com.sysmon 1.0
      
      Item {
          id: root
      
          TableView {
              id: tableView
      
              columnWidthProvider: function (column) {
                  if(column === 5){
                      return tableView.width
                  }
                  return 100;
              }
      
              anchors.fill: parent
              boundsBehavior: Flickable.StopAtBounds
      
              topMargin: columnsHeader.implicitHeight
      
              model: ProcessTableModel {
                  id: processTableModel
              }
      
              ScrollBar.vertical: ScrollBar {
                  policy: ScrollBar.AlwaysOn
              }
              clip: true
      
              delegate: Rectangle {
                  implicitWidth: 80
                  implicitHeight: 20
                  Text {
                      text: display
                  }
              }
      
              Row {
                  id: columnsHeader
                  y: tableView.contentY
                  z: 2
                  Repeater {
                      model: tableView.columns
                      Label {
                          width: tableView.columnWidthProvider(modelData)
                          height: 35
                          text: processTableModel.headerData(modelData, Qt.Horizontal)
                          color: "green"
                          verticalAlignment: Text.AlignVCenter
      
                          background: Rectangle { color: "#FFFFFF" }
                      }
                  }
              }
      
              ScrollIndicator.horizontal: ScrollIndicator { }
          }
      }
      

      Let me know if you need to see the C++ code aswell.
      The full program can be found in my repo here:

      https://github.com/SandroWissmann/System-Monitor

      edit: Please let me know if you need more information.

      Or is there a better approach to get header in a qml TreeView?

      1 Reply Last reply Reply Quote 0
      • S
        sandro4912 last edited by

        I adjusted the size in the repeater to the same sizes as rectangle:

            delegate: Rectangle {
                implicitWidth: 80
                implicitHeight: 20
                Text {
                    text: display
                }
            }
        
            Row {
                id: columnsHeader
                y: tableView.contentY
                z: 2
                Repeater {
                    model: tableView.columns
                    Label {
                        width: tableView.columnWidthProvider(modelData)
                        height: 20     // Changed here same as in Rectangle implicitHeigth
                        text: processTableModel.headerData(modelData, Qt.Horizontal)
                        color: "green"
                        verticalAlignment: Text.AlignVCenter
        
                        background: Rectangle { color: "#FFFFFF" }
                    }
                }
            }
        

        No still the first element is hidden under the header.

        It simply looks like on start im not scrolled to the beginning of the table.

        Can I scroll to the start in the program to fix this?

        1 Reply Last reply Reply Quote 0
        • sudarshand
          sudarshand last edited by

          Use topMargin property of Table View.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post