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 List - Simple Array: Plain Structure

To bind the TreeList to an array that contains plain-structured data objects, do the following:

  1. Assign the array to the dataSource property.

  2. Specify the data fields that contain node keys in the keyExpr property and parent node keys in the parentIdExpr property.

  3. Specify the root node's key in the rootValue property if it is not 0.

  4. If each data item has a Boolean field that specifies whether this data item nests other items, assign the field's name to the hasItemsExpr property. The TreeList uses this information to render the expand button. This is required only if the UI component is bound to a remote data source.

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

The TreeList builds a tree from plain data objects based on the specified properties.