TreeModel QML Type

Encapsulates a simple tree model. More...

• List of all members, including inherited members

Properties

• columnCount : int
• rows : var

Methods

• void appendRow(var treeRow)
• void appendRow(parent, var treeRow)
• void clear()
• variant data(index, string role)
• var getRow(rowIndex)
• QModelIndex index(list<int> treeIndex, int column)
• QModelIndex index(int row, int column, var parent)
• void removeRow(rowIndex)
• bool setData(index, variant value, string role)
• void setRow(rowIndex, var treeRow)

Detailed Description

The TreeModel type stores JavaScript/JSON objects as data for a tree model that can be used with TreeView. It is intended to support very simple models without requiring the creation of a custom QAbstractItemModel subclass in C++.

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    TreeView {
        id: treeView
        anchors.fill: parent

        selectionModel: ItemSelectionModel {}

        model: TreeModel {
            id: treeModel

            TableModelColumn {
                display: "checked"
            }
            TableModelColumn {
                display: "size"
            }
            TableModelColumn {
                display: "type"
            }
            TableModelColumn {
                display: "name"
            }
            TableModelColumn {
                display: "lastModified"
            }

            rows: [{
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Documents",
                    lastModified: "2025-07-01",
                    rows: [{
                            checked: true,
                            size: "24 KB",
                            type: "file",
                            name: "Resume.pdf",
                            lastModified: "2025-06-20",
                        }, {
                            checked: false,
                            size: "2 MB",
                            type: "folder",
                            name: "Reports",
                            lastModified: "2025-06-10",
                            rows: [{
                                    checked: true,
                                    size: "850 KB",
                                    type: "file",
                                    name: "Q2_Report.docx",
                                    lastModified: "2025-06-15",
                                }, {
                                    checked: false,
                                    size: "1.2 MB",
                                    type: "file",
                                    name: "Q3_Plan.xlsx",
                                    lastModified: "2025-06-18",
                                }]
                        }]
                },
                {
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Pictures",
                    lastModified: "2025-05-30",
                    rows: [{
                            checked: true,
                            size: "3.5 MB",
                            type: "file",
                            name: "Vacation.jpg",
                            lastModified: "2025-05-15",
                        }, {
                            checked: false,
                            size: "2.1 MB",
                            type: "file",
                            name: "Family.png",
                            lastModified: "2025-05-20",
                        }]
                }
            ]
        }

        delegate: TreeViewDelegate {}
    }
}

The model's initial data is set with either the rows property or by calling appendRow(). Each column in the model is specified by declaring a TableModelColumn instance, where the order of each instance determines its column index. Once the model's Component::completed() signal has been emitted, the columns and roles will have been established and are then fixed for the lifetime of the model.

Supported Row Data Structures

Each row represents a node in the tree. Each node has the same type of columns. The TreeModel is designed to work with JavaScript/JSON data so each row is a list of simple key-value pairs:

                {
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Pictures",
                    lastModified: "2025-05-30",
                    rows: [{
                            checked: true,
                            size: "3.5 MB",
                            type: "file",
                            name: "Vacation.jpg",
                            lastModified: "2025-05-15",
                        }, {
                            checked: false,
                            size: "2.1 MB",
                            type: "file",
                            name: "Family.png",
                            lastModified: "2025-05-20",
                        }]
                }

A node can have child nodes and these will be stored in an array associated with the "rows" key. "rows" is reserved for this purpose: only the list of child nodes should be associated with this key.

The model is manipulated via QModelIndices. To access a specific row/node, the getRow() function can be used. It's also possible to access the model's JavaScript data directly via the rows property, but it is not possible to modify the model data this way.

To add new rows, use appendRow(). To modify existing rows, use setRow(), removeRow() and clear().

Property Documentation

columnCount : int [read-only]

This read-only property holds the number of columns in the model.

The number of columns is fixed for the lifetime of the model after the rows property is set or appendRow() is called for the first time.

rows : var

This property holds the model data in the form of an array of rows.

See also getRow(), setRow(), appendRow(), clear(), and columnCount.

Method Documentation

void appendRow(var treeRow)

Appends treeRow to the root node.

See also setRow() and removeRow().

void appendRow(parent, var treeRow)

Appends a new treeRow to parent, with the values (cells) in treeRow.

treeModel.appendRow(index, {
    checked: false,
    size: "-",
    type: "folder",
    name: "Orders",
    lastModified: "2025-07-02",
    rows: [
        {
            checked: true,
            size: "38 KB",
            type: "file",
            name: "monitors.xlsx",
            lastModified: "2025-07-02"
        },
        {
            checked: true,
            size: "54 KB",
            type: "file",
            name: "notebooks.xlsx",
            lastModified: "2025-07-02"
        }
    ]
});

parent is an anonymous QML type backed by QModelIndex. If parent is invalid, treeRow gets appended to the root node.

See also setRow() and removeRow().

void clear()

Removes all rows from the model.

See also removeRow().

variant data(index, string role)

Returns the data from the TreeModel at the given index belonging to the given role.

index is an anonymous QML type backed by QModelIndex.

See also index() and setData().

var getRow(rowIndex)

Returns the treeRow at specified index in the model. rowIndex is an anonymous QML type backed by QModelIndex.

See also setRow(), appendRow(), and removeRow().

QModelIndex index(list<int> treeIndex, int column)

Returns an object referencing the given treeIndex and column, which can be passed to the data() function to get the data from that cell, or to setData() to edit the contents of that cell.

The returned object is of an anonymous QML type backed by QModelIndex.

The first parameter treeIndex represents a path of row numbers tracing from the root to the desired row and is used for navigation inside the tree. This is best explained through an example.

The root of the tree is special, as it can be referenced by an invalid QModelIndex. Node A is the first child of the root and the corresponding treeIndex is [0]. Node B is the first child of node A. Since the treeIndex of A is [0] the treeIndex of B will be [0,0]. Node C is the second child of A and its treeIndex is [0,1]. Node D is the third child of A and its treeIndex is [0,2]. Node E is the second child of the root and its treeIndex is [1]. Node F is the third child of the root and its treeIndex is [2].

With this overload it is possible to obtain a QModelIndex to a node without having a QModelIndex to its parent node.

If no node is found by the list specified, an invalid model index is returned. Please note that an invalid model index is referencing the root of the node.

See also QModelIndex and related Classes in QML and data().

QModelIndex index(int row, int column, var parent)

Returns an object referencing the given row and column of a given parent which can be passed to the data() function to get the data from that cell, or to setData() to edit the contents of that cell.

The returned object is of an anonymous QML type backed by QModelIndex.

See also QModelIndex and related Classes in QML and data().

void removeRow(rowIndex)

Removes the TreeRow referenced by rowIndex from the model. rowIndex is an anonymous QML type backed by QModelIndex.

treeModel.removeTreeRow(rowIndex)

See also clear().

bool setData(index, variant value, string role)

Inserts or updates the data field named by role in the TreeRow at the given index with value. Returns true if successful, false if not.

index is an anonymous QML type backed by QModelIndex.

See also data() and index().

void setRow(rowIndex, var treeRow)

Replaces the TreeRow at rowIndex in the model with treeRow. rowIndex is an anonymous QML type back by QModelIndex.

A row with child rows will be rejected.

All columns/cells must be present in treeRow, and in the correct order. The child rows of the row remain unaffected.

treeModel.setRow(rowIndex, {
    checked: true,
    size: "-",
    type: "folder",
    name: "Subtitles",
    lastModified: "2025-07-07",
    iconColor: "blue"
});

See also appendRow().