1.0.16 • Published 5 years ago
react-sortable-tree-theme-material-ui v1.0.16
React Sortable Tree Material-UI Theme
Features
- You can click anywhere on a node to drag it.
- More compact design, with indentation alone used to represent tree depth.
Usage
npm install --save react-sortable-tree-theme-material-ui
import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import MaterialTheme from 'react-sortable-tree-theme-material-ui';
export default class Tree extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [ { children: [ { title: 'Box' } ], expanded: true, title: 'Layout' } ]
};
}
render() {
return (
<div style={{ height: 400, overflowX: 'hidden', overflowY: 'auto' }}>
<SortableTree
generateNodeProps={
rowInfo => ({
buttons: (
<i className='material-icons' style={{ fontSize: 18 }}>
more_vert
</i>
),
icons: (
<i className='material-icons' style={{ fontSize: 18 }}>
drag_indicator
</i>
),
title: (
<Fragment>
<i className='material-icons' style={{ color: '#1890FF', fontSize: 18, marginRight: 6 }}>link</i>
<span>{rowInfo.node.title}</span>
</Fragment>
)
})
}
isVirtualized={false}
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
theme={MaterialTheme}
/>
</div>
);
}
}
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.6-previous
5 years ago
1.0.7
5 years ago
1.0.6-next
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago