https://github.com/grovertb/react-sortable-tree-theme-material-ui
https://github.com/grovertb/react-sortable-tree-theme-material-ui
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/grovertb/react-sortable-tree-theme-material-ui
- Owner: grovertb
- License: mit
- Created: 2019-09-04T19:21:16.000Z (almost 7 years ago)
- Default Branch: next
- Last Pushed: 2020-02-18T23:27:10.000Z (over 6 years ago)
- Last Synced: 2025-03-27T18:50:01.752Z (over 1 year ago)
- Language: JavaScript
- Size: 366 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```sh
npm install --save react-sortable-tree-theme-material-ui
```
```jsx
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 (
({
buttons: (
more_vert
),
icons: (
drag_indicator
),
title: (
link
{rowInfo.node.title}
)
})
}
isVirtualized={false}
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
theme={MaterialTheme}
/>
);
}
}
```