React Tree View - Plain Data Structure

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

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import TreeView, { type TreeViewTypes } from 'devextreme-react/tree-view'; import service, { type ProductType } from './data.ts'; const products = service.getProducts(); const App = () => { const [currentItem, setCurrentItem] = useState(products[0]); const selectItem = useCallback((e: TreeViewTypes.ItemClickEvent & { itemData: ProductType }) => { setCurrentItem({ ...e.itemData }); }, [setCurrentItem]); return ( <div className="form"> <TreeView id="simple-treeview" items={products} dataStructure="plain" displayExpr="name" parentIdExpr="categoryId" keyExpr="ID" width={300} onItemClick={selectItem} /> {currentItem.price && ( <div id="product-details"> <img alt={currentItem.name} src={currentItem.icon} /> <div className="name">{currentItem.name}</div> <div className="price">{`$${currentItem.price}`}</div> </div> )} </div> ); }; export default App;

import React, { useCallback, useState } from 'react'; import TreeView from 'devextreme-react/tree-view'; import service from './data.js'; const products = service.getProducts(); const App = () => { const [currentItem, setCurrentItem] = useState(products[0]); const selectItem = useCallback( (e) => { setCurrentItem({ ...e.itemData }); }, [setCurrentItem], ); return ( <div className="form"> <TreeView id="simple-treeview" items={products} dataStructure="plain" displayExpr="name" parentIdExpr="categoryId" keyExpr="ID" width={300} onItemClick={selectItem} /> {currentItem.price && ( <div id="product-details"> <img alt={currentItem.name} src={currentItem.icon} /> <div className="name">{currentItem.name}</div> <div className="price">{`$${currentItem.price}`}</div> </div> )} </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#simple-treeview, #product-details { display: inline-block; } #product-details { vertical-align: top; width: 400px; height: 420px; margin-left: 20px; } #product-details > img { border: none; height: 300px; width: 400px; } #product-details > .name { text-align: center; font-size: 20px; } #product-details > .price { text-align: center; font-size: 24px; } .dark #product-details > div { color: #f0f0f0; } .hidden { visibility: hidden; }

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.