react-pretty-treeview v1.0.34

react-pretty-treeview

Install

npm i --save react-pretty-treeview

Update Table

Props

Import for using

import TreeView from 'react-pretty-treeview';

 <TreeView
  labelStyle=''
  treeStyle=''
  activeName='revlon-lipstick'
  data={[
    {
      name: 'revlon test',
      description: '',
      status: 'disable',
      open: true,
      itemSize: 5,
      createdDate: 1522846151,
      updatedDate: 1522897770,
      childs: []
    }
  ]}
  onSelected={ action('onSelected')}
/>

Custom style

//style for treeview node
span.tree-view-node:first-child:before{
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  left: -15px;
  top: 0px;
  background-color: #ddd;
}
span.tree-view-node:last-child:before{
  content: '';
  width: 1px;
  height: 0%;
  position: absolute;
  left: -15px;
  top: 0px;
  background-color: #ddd;
}
span.tree-view-node span{
  padding-top: 10px;
  margin-left: 30px;
  position: relative;
  list-style: none;
  display: block;
}

//style for treeview label
.tree-view-label{
  cursor: pointer;
  padding: 5px 15px;
  display: inline-block;
  position: relative;
  background-color: #eee;
}
.tree-view-label:hover{
  background: rgba(0,0,0,0.05);
}
.tree-view-label:before{
  content: '';
  width: 1px;
  height: 82%;
  position: absolute;
  left: -15px;
  top: -10px;
  background-color: #ddd;
}

.tree-view-label:after{
  content: '';
  width: 15px;
  height: 1px;
  position: absolute;
  left: -15px;
  top: 50%;
  background-color: #ddd;
}
.tree-view-label.active{
  background-color: #ddd;
  color: #333;
}
.tree-view-label.active:hover{
  background: #eee;
}