HorizontalHeaderView QML Type

Provides a horizontal header view to accompany a TableView. More...

• List of all members, including inherited members

Properties

• model : QVariant
• movableColumns : bool (since 6.8)
• syncView : TableView
• textRole : QString

Detailed Description

A HorizontalHeaderView provides a styled table header. It can either be used as an independent view or header for a TableView.

You can add a header for a TableView by assigning the TableView to the syncView property of HorizontalHeaderView. The header and the table will then be kept in sync while flicking.

By default, HorizontalHeaderView displays header data from the sync view's model. If you don't wish to use header data from that model, or you don't use a syncView, you can assign a model explicitly to the model property.

By default, textRole is set to "display", meaning that data from the model's Qt::DisplayRole will be used. You can set this to another role name in order to have that data displayed instead.

The application is responsible for placing the header at the correct location in the scene. You can add as many headers as you want to a single TableView, which can be useful if you for example want to place headers on all four sides of the table.

The following snippet shows how you can add a horizontal and vertical header view to a table view:

 import QtQuick
 import QtQuick.Controls
 import Qt.labs.qmlmodels

 ApplicationWindow {
     visible: true
     width: 640
     height: 480
     title: qsTr("HeaderView")

     Rectangle {
         anchors.fill: parent
         // The background color will show through the cell
         // spacing, and therefore become the grid line color.
         color: Application.styleHints.appearance === Qt.Light ? palette.mid : palette.midlight

         HorizontalHeaderView {
             id: horizontalHeader
             anchors.left: tableView.left
             anchors.top: parent.top
             syncView: tableView
             clip: true
         }

         VerticalHeaderView {
             id: verticalHeader
             anchors.top: tableView.top
             anchors.left: parent.left
             syncView: tableView
             clip: true
         }

         TableView {
             id: tableView
             anchors.left: verticalHeader.right
             anchors.top: horizontalHeader.bottom
             anchors.right: parent.right
             anchors.bottom: parent.bottom
             clip: true

             columnSpacing: 1
             rowSpacing: 1

             model: TableModel {
                 TableModelColumn { display: "name" }
                 TableModelColumn { display: "color" }

                 rows: [
                     {
                         "name": "cat",
                         "color": "black"
                     },
                     {
                         "name": "dog",
                         "color": "brown"
                     },
                     {
                         "name": "bird",
                         "color": "white"
                     }
                 ]
             }

             delegate: Rectangle {
                 implicitWidth: 100
                 implicitHeight: 20
                 color: palette.base
                 Label {
                     text: display
                 }
             }
         }
     }
 }

A HorizontalHeaderView will have resizableColumns set to true by default.

See also VerticalHeaderView.

Property Documentation