How to Customize React TreeView Icons?
This article explains how to customize React TreeView icons. The React TreeView is a graphical user interface component that allows you to represent hierarchical data in a tree structure.
The React TreeView customization can be done using the nodeTemplate support, which allows users to define a custom structure for the TreeView. By using this feature, you can render TreeView with any custom icons and images or render the TreeView with any custom element structure.
REACT
export class Template extends SampleBase {
constructor() {
this.data = dataSource;
this.fields = { dataSource: this.data.templateData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
this.cssClass = "template-tree";
}
nodeTemplate(data) {
return (<div>
<div className="treeviewdiv">
<div className="textcontent">
<span className="treeName">{data.name}</span>
</div>
{data.count &&
<div className="countcontainer">
<span className="treeCount e-badge e-badge-primary">{data.count}</span>
</div>}
</div>
</div>);
};
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className='tree-control-wrapper'>
<TreeViewComponent fields={this.fields} nodeTemplate={this.nodeTemplate} cssClass={this.cssClass}/>
</div>
</div>
</div>);
}
Feature Tour: https://www.syncfusion.com/react-components/react-tree-view
Documentation: https://ej2.syncfusion.com/react/documentation/treeview/template/
Right to left (RTL)
The React TreeView supports the right-to-left (RTL) rendering for users working in right-to-left languages such as Hebrew, Arabic, and Persian. It can be achieved using the enableRtl property.
REACT
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.fields = { dataSource: this.data.defaultData, id: 'id', text: 'name', child: 'subChild' };
this.RTL = true;
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className='tree-control_wrapper'>
<TreeViewComponent fields={this.fields} enableRtl={this.RTL}/>
</div>
</div>
</div>);
}
}
Sample: https://stackblitz.com/edit/react-gzhker?file=index.js
Customize TreeView expand/collapse icons
The TreeView expand and collapse icons can be customized using the cssClass property.
REACT
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.fields = { dataSource: this.data.defaultData, id: 'id', text: 'name', child: 'subChild' };
this.style = 'custom';
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className='tree-control_wrapper'>
<TreeViewComponent fields={this.fields} cssClass={this.style}/>
</div>
</div>
</div>);
}
}
<style>
.custom .e-list-item .e-icons {
font-family: "Customize-icon";
}
.custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {
content: '\e700';
font-size: 12px;
}
</style>
Sample: https://stackblitz.com/edit/react-gzhker-hklcem?file=index.css
Customize the appearance of tree node
The React TreeView component has a built-in option to customize the appearance of each node with icon and images by mapping the iconCss and imageUrl fields.
REACT
export class Icons extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.fields = { dataSource: this.data.iconData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className='control_wrapper'>
<TreeViewComponent id="treeview" fields={this.fields} sortOrder='Ascending'/>
</div>
</div>
</div>);
}
}
<style>
#treeview.e-treeview .e-list-img {
width: 25px;
height: 25px;
}
#treeview.e-treeview .e-list-icon {
background-repeat: no-repeat;
background-image: url(https://ej2.syncfusion.com/react/demos/src/images/icons/file_icons.png);
height: 20px;
}
#treeview.e-treeview .e-list-icon.folder { background-position: -10px -552px }
#treeview.e-treeview .e-list-icon.docx { background-position: -10px -20px }
#treeview.e-treeview .e-list-icon.ppt { background-position: -10px -48px }
#treeview.e-treeview .e-list-icon.pdf { background-position: -10px -104px }
#treeview.e-treeview .e-list-icon.images { background-position: -10px -132px }
#treeview.e-treeview .e-list-icon.zip { background-position: -10px -188px }
#treeview.e-treeview .e-list-icon.audio { background-position: -10px -244px }
#treeview.e-treeview .e-list-icon.video { background-position: -10px -272px }
#treeview.e-treeview .e-list-icon.exe { background-position: -10px -412px }
</style>
Sample: https://stackblitz.com/edit/react-kny7kh?file=index.js
