TableView QML Type

C++ Models▲

#include <qqml.h>
#include <QAbstractTableModel>

class TableModel : public QAbstractTableModel
{
    Q_OBJECT
    QML_ELEMENT
    QML_ADDED_IN_MINOR_VERSION(1)

public:
    int rowCount(const QModelIndex & = QModelIndex()) const override
    {
        return 200;
    }

    int columnCount(const QModelIndex & = QModelIndex()) const override
    {
        return 200;
    }

    QVariant data(const QModelIndex &index, int role) const override
    {
        switch (role) {
            case Qt::DisplayRole:
                return QString("%1, %2").arg(index.column()).arg(index.row());
            default:
                break;
        }

        return QVariant();
    }

    QHash<int, QByteArray> roleNames() const override
    {
        return { {Qt::DisplayRole, "display"} };
    }
};

import QtQuick 2.12
import TableModel 0.1

TableView {
    anchors.fill: parent
    columnSpacing: 1
    rowSpacing: 1
    clip: true

    model: TableModel {}

    delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: 50
        Text {
            text: display
        }
    }
}

QML Models▲

import QtQuick 2.14
import Qt.labs.qmlmodels 1.0

TableView {
    anchors.fill: parent
    columnSpacing: 1
    rowSpacing: 1
    clip: true

    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: 50
        border.width: 1

        Text {
            text: display
            anchors.centerIn: parent
        }
    }
}

TableView recycles delegate items by default, instead of instantiating from the delegate whenever new rows and columns are flicked into view. This approach gives a huge performance boost, depending on the complexity of the delegate.

When an item is flicked out, it moves to the reuse pool, which is an internal cache of unused items. When this happens, the TableView::pooled signal is emitted to inform the item about it. Likewise, when the item is moved back from the pool, the TableView::reused signal is emitted.

Any item properties that come from the model are updated when the item is reused. This includes index, row, and column, but also any model roles.

If an item has timers or animations, consider pausing them on receiving the TableView::pooled signal. That way you avoid using the CPU resources for items that are not visible. Likewise, if an item has resources that cannot be reused, they could be freed up.

If you don't want to reuse items or if the delegate cannot support it, you can set the reuseItems property to false.

The following example shows a delegate that animates a spinning rectangle. When it is pooled, the animation is temporarily paused:

Component {
    id: tableViewDelegate
    Rectangle {
        implicitWidth: 100
        implicitHeight: 50

        TableView.onPooled: rotationAnimation.pause()
        TableView.onReused: rotationAnimation.resume()

        Rectangle {
            id: rect
            anchors.centerIn: parent
            width: 40
            height: 5
            color: "green"

            RotationAnimation {
                id: rotationAnimation
                target: rect
                duration: (Math.random() * 2000) + 200
                from: 0
                to: 359
                running: true
                loops: Animation.Infinite
            }
        }
    }
}

When a new column is flicked into view, TableView will determine its width by calling the columnWidthProvider function. TableView does not store row height or column width, as it's designed to support large models containing any number of rows and columns. Instead, it will ask the application whenever it needs to know.

TableView uses the largest implicitWidth among the items as the column width, unless the columnWidthProvider property is explicitly set. Once the column width is found, all other items in the same column are resized to this width, even if new items that are flicked in later have larger implicitWidth. Setting an explicit width on an item is ignored and overwritten.

If you change the values that a rowHeightProvider or a columnWidthProvider return for rows and columns inside the viewport, you must call forceLayout. This informs TableView that it needs to use the provider functions again to recalculate and update the layout.

Since Qt 5.13, if you want to hide a specific column, you can return 0 from the columnWidthProvider for that column. Likewise, you can return 0 from the rowHeightProvider to hide a row. If you return a negative number, TableView will fall back to calculate the size based on the delegate items.

The following example shows how to set a simple columnWidthProvider together with a timer that modifies the values the function returns. When the array is modified, forceLayout is called to let the changes take effect:

TableView {
    id: tableView

    property var columnWidths: [100, 50, 80, 150]
    columnWidthProvider: function (column) { return columnWidths[column] }

    Timer {
        running: true
        interval: 2000
        onTriggered: {
            tableView.columnWidths[2] = 150
            tableView.forceLayout();
        }
    }
}

All new items that are instantiated from the delegate are parented to the contentItem with the z value, 1. You can add your own items inside the Tableview, as child items of the Flickable. By controlling their z value, you can make them be on top of or underneath the table items.

Here is an example that shows how to add some text on top of the table, that moves together with the table as you flick:

TableView {
    id: tableView

    topMargin: header.implicitHeight

    Text {
        id: header
        text: "A table header"
    }
}

This property holds the spacing between the columns.

The default value is 0.

This property can hold a function that returns the column width for each column in the model. It is called whenever TableView needs to know the width of a specific column. The function takes one argument, column, for which the TableView needs to know the width.

Since Qt 5.13, if you want to hide a specific column, you can return 0 width for that column. If you return a negative number, TableView calculates the width based on the delegate items.

See Also▲

This property holds the number of rows in the table.

If the model is a list, columns will be 1.

This property is read only.

This property holds the table height required to accommodate the number of rows in the data model. This is usually not the same as the height of the view, which means that the table's height could be larger or smaller than the viewport height. As a TableView cannot always know the exact height of the table without loading all rows in the model, the contentHeight is usually an estimate based on the initially loaded table.

If you know what the height of the table will be, assign a value to contentHeight, to avoid unnecessary calculations and updates to the TableView.

See Also▲

This property holds the table width required to accommodate the number of columns in the model. This is usually not the same as the width of the view, which means that the table's width could be larger or smaller than the viewport width. As a TableView cannot always know the exact width of the table without loading all columns in the model, the contentWidth is usually an estimate based on the initially loaded table.

If you know what the width of the table will be, assign a value to contentWidth, to avoid unnecessary calculations and updates to the TableView.

See Also▲

The delegate provides a template defining each cell item instantiated by the view. The model index is exposed as an accessible index property. The same applies to row and column. Properties of the model are also available depending upon the type of Data Model.

A delegate should specify its size using implicitWidth and implicitHeight. The TableView lays out the items based on that information. Explicit width or height settings are ignored and overwritten.

See Also▲

This property holds the model that provides data for the table.

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 TableModel, ListModel, XmlListModel, or ObjectModel, or provided by a custom C++ model class. The C++ model must be a subclass of QAbstractItemModel or a simple list.

See Also▲

This property holds whether or not items instantiated from the delegate should be reused. If set to false, any currently pooled items are destroyed.

See Also▲

This property can hold a function that returns the row height for each row in the model. It is called whenever TableView needs to know the height of a specific row. The function takes one argument, row, for which the TableView needs to know the height.

Since Qt 5.13, if you want to hide a specific row, you can return 0 height for that row. If you return a negative number, TableView calculates the height based on the delegate items.

See Also▲

This prope