TreeModel QML Type | Qt 6.11
Description: Encapsulates a simple tree model.

- Qt 6.11
- QML Types
- Qt.labs.qmlmodels
- TreeModel
- Qt 6.11.2 Reference Documentation

# TreeModel QML Type

Encapsulates a simple tree model. More...

Import Statement: | `import Qt.labs.qmlmodels`
Since: | Qt 6.10

- 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().

## Using the TreeModel with External JSON Sources

While the intended use of the TreeModel is to define the JSON data in-place in the QML file, you can use any JSON object with the model as long as its structure matches the structure defined by the TreeModel. If all the rows of the JSON object conform to the columns defined by the model, you can assign it directly through the rows property.

The source of the JSON object can be a file. For example, if the model is defined as

         TreeModel {
             id: treeModel
             objectName: "testModel"

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

and the JSON object stored in the file and looks like

     let folders = [
         {
             "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": "—",
             "type": "folder",
             "name": "Pictures",
             "lastModified": "2025-05-30",
             "rows": [
                 {
                     "checked": true,
                     "size": "3.5 MB",
                     "type": "file",
                     "name": "Vacation.jpg",
                     "lastModified": "2025-05-15"
                 }
             ]
         }
     ]

then this object can be provided by importing the JavaScript file as a

module

     import "TreeData.js" as JsonData

and then it can be assigned directly

         Component.onCompleted: treeView.model.rows = JsonData.folders

Warning: Ensure that the JSON data comes from a trusted source. Since the model dynamically populates its rows based on the input, malformed or untrusted JSON can lead to unexpected behavior or performance issues.

See TableModel for an another example where a JSON object is parsed into and assigned as a JavaScript array.

See also TableModelColumn and TreeView.

## 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.

Note: the returned object cannot be used to modify the contents of the model; use setTreeRow() instead.

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().