Back to Blog home

Table View with Qt Quick

Published on Thursday May 26, 2011 by Jens Bache-Wiig in Qt Quick Labs Qt Uncategorized | Comments

If you have been using Qt Quick on the desktop, chances are that you have already run into the limitations of ListView. ListView gives you a convenient way to represent a basic flickable list of items. But most desktop applications need more than that to present things like play-lists and albums. I realised that this was a big limitation for the Qt Quick Desktop Components, so I wanted to see how feasible it would be to add this functionality on top of ListView.

The result is TableView. And it looks like this:

Here is a short video showing it in action. I also made some screenshots from other platforms: mac, windows, and kde. Regular mac users might notice that I moved the header column to actually sit above the scroll bar. (edit: added video recorded on a mac)

It is designed to work well with the existing models supported by Qt Quick such as ListModel and XmlListModel. But since the one-dimensional ListModel doesn't have a concept of columns, we need to provide a mapping between columns and properties. So the model for the view above looks like this:

ListModel {
id: dataModel
ListElement { title:"Image title";  credit:"some author";  source:"http:/..." }
ListElement { title:"Another title";  credit:"some author";  source:"http:/..." }
}

And to create a table view:

TableView {
model: dataModel
TableColumn {
property: "title"
caption: "Title"
width: 120
}
TableColumn {
property: "credit"
caption: "Credit"
width: 120
}
TableColumn {
property: "source"
caption: "Image source"
width: 200
}
}

Note that the ordering and width properties provide only the initial configuration of the view. The user is free to resize or re-arrange columns. At first sight, mapping only a single property per column might look like a limitation. However, if you need more than one property per item, you can simply use a nested ListElement:

ListElement { firstColumn: ListElement { description: <span style="color: #008000;">"Bananas"</span>; color: <span style="color: #008000;">"yellow"</span> } }

By default the TableView will provide a plain delegate with basic elided text items in each cell.
However, where Qt Quick really shine is in how easy it is to customize. This is currently possible by overriding the rowDelegate, itemDelegate and headerDelegate. So for instance if you need a very basic editable item delegate you can do something like this:

itemDelegate:
TextInput {
text: itemValue
onAccepted: model.setProperty(rowIndex, itemProperty, text)
}

This might not be the solution for everything yet. Known limitations include limited keyboard navigation and lack of multiple selection. Aside from that, all of this works rather well on top of any regular Qt 4.7 build so you can start playing with it today by cloning this repository:

http://qt.gitorious.org/qt-components/desktop

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.