TableView

Provides a list view with scroll bars, styling and header sections. More...

Inherits ScrollView

This type was introduced in QtQuick.Controls 1.0.

Properties

Signals

Methods

Detailed Description

A TableView is similar to ListView, and adds scroll bars, selection, and resizable header sections. As with ListView, data for each row is provided through a model:

ListModel {
   id: libraryModel
   ListElement{ title: "A Masterpiece" ; author: "Gabriel" }
   ListElement{ title: "Brilliance"    ; author: "Jens" }
   ListElement{ title: "Outstanding"   ; author: "Frederik" }
}

You provide title and size of a column header by adding a TableViewColumn as demonstrated below.

TableView {
   TableViewColumn{ role: "title"  ; title: "Title" ; width: 100 }
   TableViewColumn{ role: "author" ; title: "Author" ; width: 200 }
   model: libraryModel
}

The header sections are attached to values in the model by defining the model role they attach to. Each property in the model will then be shown in their corresponding column.

You can customize the look by overriding the itemDelegate, rowDelegate, or headerDelegate properties.

The view itself does not provide sorting. This has to be done on the model itself. However you can provide sorting on the model, and enable sort indicators on headers.

Property Documentation

alternatingRowColors : bool

This property is set to true if the view alternates the row color. The default value is true.


backgroundVisible : bool

This property determines if the background should be filled or not.

The default value is true.

Note: The rowDelegate is not affected by this property


read-onlycolumnCount : int

The current number of columns


contentFooter : Component

This is the content footer of the TableView


contentHeader : Component

This is the content header of the TableView


currentRow : int

The current row index of the view. The default value is -1 to indicate that no row is selected.


headerDelegate : Component

This property defines a delegate to draw a header.

In the header delegate you have access to the following special properties:

  • styleData.value - the value or text for this item
  • styleData.column - the index of the column
  • styleData.pressed - true when the column is being pressed
  • styleData.containsMouse - true when the column is under the mouse

headerVisible : bool

This property determines if the header is visible. The default value is true.


itemDelegate : Component

This property defines a delegate to draw a specific cell.

In the item delegate you have access to the following special properties:

  • styleData.selected - if the item is currently selected
  • styleData.value - the value or text for this item
  • styleData.textColor - the default text color for an item
  • styleData.row - the index of the row
  • styleData.column - the index of the column
  • styleData.elideMode - the elide mode of the column
  • styleData.textAlignment - the horizontal text alignment of the column

Example:

itemDelegate: Item {
    Text {
        anchors.verticalCenter: parent.verticalCenter
        color: styleData.textColor
        elide: styleData.elideMode
        text: styleData.value
    }
}

model : model

This property holds the model providing data for the table view.

The model provides the set of data that is used to create the items in the view. Models can be created directly in QML using ListModel, XmlListModel or VisualItemModel, or provided by C++ model classes.

Example model:

model: ListModel {
    ListElement{ column1: "value 1" ; column2: "value 2" }
    ListElement{ column1: "value 3" ; column2: "value 4" }
}

See also ListView::model and Data Models.


read-onlyrowCount : int

The current number of rows


rowDelegate : Component

This property defines a delegate to draw a row.

In the row delegate you have access to the following special properties:

  • styleData.alternate - true when the row uses the alternate background color
  • styleData.selected - true when the row is currently selected
  • styleData.row - the index of the row

section.property : string

section.criteria : enumeration

section.delegate : Component

section.labelPositioning : enumeration

These properties determine the section labels.

See also ListView::section.


sortIndicatorColumn : int

Index of the current sort column. The default value is 0.


sortIndicatorOrder : enumeration

This sets the sorting order of the sort indicator The allowed values are:

  • Qt.AscendingOrder - the default
  • Qt.DescendingOrder

sortIndicatorVisible : bool

This property shows or hides the sort indicator The default value is false.

Note: The view itself does not sort the data.


Signal Documentation

activated(int row)

Emitted when the user activates an item by mouse or keyboard interaction. Mouse activation is triggered by single- or double-clicking, depending on the platform.

row int provides access to the activated row index.


clicked(int row)

Emitted when the user clicks a valid row by single clicking

row int provides access to the clicked row index.


doubleClicked(int row)

Emitted when the user double clicks a valid row.

row int provides access to the clicked row index.


Method Documentation

addColumn( column)

Adds a column and returns the added column.

The column argument can be an instance of TableViewColumn, or a Component. The component has to contain a TableViewColumn. Otherwise null is returned.


getColumn( index)

Returns the column at the given index or null if the index is invalid.


insertColumn( index, column)

Inserts a column at the given index and returns the inserted column.

The column argument can be an instance of TableViewColumn, or a Component. The component has to contain a TableViewColumn. Otherwise null is returned.


moveColumn( from, to)

Moves a column from index to another.


positionViewAtRow( row, mode)

Positions the view such that the specified row is at the position defined by mode:

  • ListView.Beginning - position item at the top of the view.
  • ListView.Center - position item in the center of the view.
  • ListView.End - position item at bottom of the view.
  • ListView.Visible - if any part of the item is visible then take no action, otherwise bring the item into view.
  • ListView.Contain - ensure the entire item is visible. If the item is larger than the view the item is positioned at the top of the view.

If positioning the row creates an empty space at the beginning or end of the view, then the view is positioned at the boundary.

For example, to position the view at the end at startup:

Component.onCompleted: table.positionViewAtRow(rowCount -1, ListView.Contain)

Depending on how the model is populated, the model may not be ready when TableView Component.onCompleted is called. In that case you may need to delay the call to positionViewAtRow by using a Timer.

Note: This method should only be called after the component has completed.


removeColumn( index)

Removes and destroys a column at the given index.


rowAt( x, y)

Returns the index of the visible row at the point x, y in content coordinates. If there is no visible row at the point specified, -1 is returned.

Note: This method should only be called after the component has completed.