Qt Quick Controls 2 and TableView

Question

Is it OK to use TableView in Quick Controls 2.0 application? This will require to have both imports:

import QtQuick.Controls 1.4
import QtQuick.Controls 2.0

Will I get any side effects?

Another related question: it seems that TableView belongs to Quick Controls 1.0 set. Is it? Does it mean that if it's possible to use TableView then it's possible to use all the Quick Controls 1.0 controls in Quick Controls 2.0 application?

Answer 1

While it is possible to mix Qt Quick Controls 1 and 2 in the same application, the biggest issue is that Qt Quick Controls 1 are not compatible with Qt's automatic high-DPI scaling, whereas Qt Quick Controls 2 bases its scalability on that. Therefore running such application that mixes the two might not give ideal results on a high-DPI display.

Given that Qt Quick Controls 1 TableView has severe performance issues, one possible alternative is to use plain ListView from Qt Quick core with Row as a delegate. With Qt 5.9 and later, it is possible to explicitly specify the content width and flicking directions so that a vertical ListView can be also flicked horizontally. Here's an overly simple multi-column list example, something you can already try out with the latest Qt 5.9 beta:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    width: 360
    height: 360
    visible: true

    ListView {
        id: listView
        anchors.fill: parent

        contentWidth: headerItem.width
        flickableDirection: Flickable.HorizontalAndVerticalFlick

        header: Row {
            spacing: 1
            function itemAt(index) { return repeater.itemAt(index) }
            Repeater {
                id: repeater
                model: ["Quisque", "Posuere", "Curabitur", "Vehicula", "Proin"]
                Label {
                    text: modelData
                    font.bold: true
                    font.pixelSize: 20
                    padding: 10
                    background: Rectangle { color: "silver" }
                }
            }
        }

        model: 100
        delegate: Column {
            id: delegate
            property int row: index
            Row {
                spacing: 1
                Repeater {
                    model: 5
                    ItemDelegate {
                        property int column: index
                        text: qsTr("%1x%2").arg(delegate.row).arg(column)
                        width: listView.headerItem.itemAt(column).width
                    }
                }
            }
            Rectangle {
                color: "silver"
                width: parent.width
                height: 1
            }
        }

        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

Of course, this kind of simplified multi-column list does not provide such features as movable and resizable columns and other bells and whistles that were built into the good old TableView type. On the other hand, the performance is on a whole different level, so if you're targeting something else than classic desktop environments running on computers with endless resources, this route might be worth considering. ;)