{"id":11858,"date":"2025-05-08T10:02:20","date_gmt":"2025-05-08T08:02:20","guid":{"rendered":"https:\/\/www.basyskom.de\/?p=11858"},"modified":"2025-05-08T10:59:13","modified_gmt":"2025-05-08T08:59:13","slug":"modern-tableview-in-qml-whats-new-in-qt-6-8-and-beyond","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/modern-tableview-in-qml-whats-new-in-qt-6-8-and-beyond\/","title":{"rendered":"Modern TableView in QML: What\u2019s New in Qt 6.8 and Beyond"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Some history on TableView in QML<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

When implementing applications for our clients, one question that comes up consistently is whether some data could be displayed in a table-like format. Since the majority of our Qt-based projects make use of QtQuick for the UI, the answer often has been “yes, but…”.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The complexity of such a task has changed quite a lot over the years. With the flexibility of QML creating something like a table has been possible from the very start, it has mostly been a question of how much time one was willing to spend on implementing it. It made sense that at some point something like a TableView, similar to the existing view items, would be made available as part of the framework itself. So with Qt 5.1 (released in 2013) a first implementation of TableView was included in the QtQuickControls1 module (QtQuickControls2 didn’t exist until Qt 5.7). Back then the focus was more on providing appropriate alternatives to the objects that QtWidgets provided. Performance issues prevented or at least limited its usage for embedded or mobile uses cases, requiring potentially time consuming custom implementations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

When Qt 5.12 was released five years later, TableView finally became part of the QtQuick module and an addition to existing views like ListView and GridView. Although limited in its capabilities, it was a reasonable starting point for implementing common use cases like selecting cells, highlighting, resizing or moving rows or columns. With some additional effort one could also implement cell editing, since naively using TextInput elements for each cell slowed things down quite noticeably, especially for larger models. The overall performance also increased significantly, due to the TableView only creating the delegates that were currently visible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Two years later Qt 5.15 added two essential view items to the QtQuickControls2 module: HorizontalHeaderView<\/a> and VerticalHeaderView<\/a>. They allowed adding appropriate horizontal and vertical headers to an existing TableView, without the need for custom implementations. Both of these views are TableViews themselves and can be easily synched with the actual table, resulting in the expected behavior when scrolling larger tables.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

The current state<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

With Qt 6 several years later, further enhancements have found their way into the TableView. Selection is now customizable in several ways, allowing selecting by row, column or by individual cells by setting a selectionBehavior<\/a> (Qt 6.4). This behavior can be further adapted by setting selectionMode<\/a> to single, contiguous or extended mode (Qt 6.6). Rows and columns can also be resized<\/a> (Qt 6.5), and, when used in combination with HorizontalHeaderView or VerticalHeaderView, even moved<\/a> (Qt 6.8). One very significant enhancement was made regarding editing (Qt 6.5). A common editDelegate<\/a> can now be specified, which will be instantiated when needed, according to the configured editTriggers<\/a>. The purpose of the default delegate of the TableView is to only display the current cell value, which can now be done by a lightweight component. No need to use a TextInput for each cell just to make it editable or come up with a mechanism to track the cell that a user currently wants to edit. And if you’re going to use the recently released Qt 6.9, it becomes even simpler: the new TableViewDelegate<\/a> component does most of the work for you and provides suitable editing functionality and visualization.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

With these relatively new capabilities it has become much easier to implement a full-fledged table with almost all of the expected functionality. Very few things remain that require a custom implementation, sorting and filtering for example. Although the Qt.labs.qmlmodels module provides a TableModel<\/a> type that serves its purpose for some very simple use cases, you’re most probably\u00a0going to write your own model based on QAbstractTableModel, which you can then combine with a QSortFilterProxyModel, that can take care of sorting and filtering the data accordingly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As we can see a lot has happened, especially with Qt 6, to allow implementing useful table representations with QML. If you want to try it out for yourself you can check out a small example project<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\tCheckout the Example\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/a>\n\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Over the years, the capabilities of QtQuick’s TableView have evolved dramatically-from early custom implementations to well supported feature in Qt 6.8 and newer. In this article we explore the progression of QtQuick\/QML’s TableView, outline the limitations of early versions, and highlight newer features such as custom selection modes, header synchronization, and lightweight editing delegates. Check it out.<\/p>","protected":false},"author":25,"featured_media":4011,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2,8],"tags":[126,15],"class_list":["post-11858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-qt","tag-qml","tag-qt"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/11858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/comments?post=11858"}],"version-history":[{"count":55,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/11858\/revisions"}],"predecessor-version":[{"id":11915,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/11858\/revisions\/11915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media\/4011"}],"wp:attachment":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media?parent=11858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/categories?post=11858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/tags?post=11858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}