JavaScript/jQuery TreeView - Customize Node Appearance

For minor customization of nodes, you can define specific fields in node data objects. For example, the following code adds an icon to each node.

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

If you need a more flexible solution, define an itemTemplate.

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

You can also customize individual nodes. Declare them using the dxItem component.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import TreeView, { Item } from 'devextreme-react/tree-view';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TreeView>
  • <Item>
  • <i>Apples</i>
  • </Item>
  • <Item>
  • <p>Oranges</p>
  • </Item>
  • </TreeView>
  • );
  • }
  • }
  •  
  • export default App;
See Also