HorizontalHeaderView QML Type | Qt Quick Controls | Qt 6.11.1
Description: Provides a horizontal header view to accompany a TableView.

- Qt 6.11
- Qt Quick Controls
- QML Types
- HorizontalHeaderView
- Qt 6.11.1 Reference Documentation

# HorizontalHeaderView QML Type

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

Import Statement: | `import QtQuick.Controls`
Inherits: | TableView

- List of all members, including inherited members

## Properties

- model : QVariant
- movableColumns : bool `(since 6.8)`
- syncView : TableView
- textRole : string

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

Note: In order to show the header data of a QAbstractItemModel, HorizontalHeaderView will internally wrap the model's header data in an independent proxy model. This model shares no model items with the application model. This means that if you call functions such as index(), the model index you get back will belong to the proxy model and not the application model.

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

### model : QVariant

This property holds the model providing data for the horizontal header view.

By default, horizontal header view 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 this property. If model is a QAbstractTableModel, it's header data will be used. Otherwise, if it's a QAbstractItemModel, data will be used.

In addition to QAbstractItemModels, you can also assign other kinds of models to this property, such as JavaScript arrays.

See also TableView, model, and QAbstractTableModel.

### movableColumns : bool `[since 6.8]`

This property allows the user to move columns in the view. The default value is `false`.

Note: If this property is set, the HorizontalHeaderView allows the user to drag and drop columns at the required position. When syncView is enabled, any change will be applied to the corresponding view item.

This property was introduced in Qt 6.8.

### syncView : TableView

This property holds the TableView to synchronize with.

Once this property is bound to another TableView, both header and table will synchronize with regard to column widths, column spacing, and flicking horizontally.

If the model is not explicitly set, then the header will use the syncView's model to label the columns.

See also model and TableView.

### textRole : string

This property holds the model role used to display text in each header cell.

When the model has multiple roles, textRole can be set to determine which role should be displayed.

It is the delegate's responsibility to respect the assigned textRole when presenting data from the model. While HorizontalHeaderViewDelegate and VerticalHeaderViewDelegate handle this automatically, custom delegates must implement this behavior explicitly.

If model is a QAbstractItemModel then it will default to "display"; otherwise it is empty.

A warning is given if the model's roleNames() doesn't provide the role specified in textRole. The warning can be silenced by setting the textRole.

See also QAbstractItemModel::roleNames().