DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Tree View - Plain Data Structure

The TreeView's plain (one-dimensional) array contains items each of which references its parent item.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Use either of the following properties to bind the component to plain data:

  • items[]
    Assigns a local array as shown in this demo.

  • dataSource
    Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.

Each object in the TreeView's plain data structure should include the following fields:

  • id
    Unique item identifier.

  • parentId
    Identifier of the parent item.

  • text
    Text displayed by the item.

You can respectively use the keyExpr, parentIdExpr, and displayExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].

In this demo, nodes use the icon and expanded properties. These properties specify the icon and whether a node is collapsed or expanded. Some nodes also include the developer-defined price field.