DevExtreme React - Overview

The TreeView widget is a tree-like representation of textual data.

View Demo

The following code adds a simple TreeView to your page:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import TreeView from 'devextreme-react/tree-view';
  •  
  • const hierarchicalData = [{
  • id: '1',
  • text: 'Fruits',
  • expanded: true,
  • items: [
  • { id: '1_1', text: 'Apples' },
  • { id: '1_2', text: 'Oranges' }
  • ]
  • }, {
  • id: '2',
  • text: 'Vegetables',
  • expanded: true,
  • items: [
  • { id: '2_1', text: 'Cucumbers' },
  • { id: '2_2', text: 'Tomatoes' }
  • ]
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TreeView
  • items={hierarchicalData} />
  • );
  • }
  • }
  •  
  • export default App;

Note that the data source in the code above has a hierarchical structure, however, it also supports data sources with a plain structure. See the Use Hierarchical Data and Use Plain Data articles to learn how you can customize hierarchical and plain data sources.

See Also