The simple React.js wrapper for jstree table
npm install react-jstree-tableshell
npm install react-jstree-table
`
And include in your project:
`javascript
import TreeView from 'react-jstree-table';
`
Components's Props
$3
It is a required prop. It containes a JSON data for tree. See jsTree to get more information
about appropriate JSON data structure.
$3
It is an optional event handler for the changed event, which occurs when one or more nodes
have been selected. See example below for this prop's usage details.
React.js (ES6) usage example:
`javascript
import React, {Component} from 'react';
import TreeView from 'react-jstree-table';
export class Tree extends Component {
constructor(props) {
super(props);
this.state = {
data: {
core: {
data: [
{
text: 'Root node', children: [
{text: 'Child node 1'},
{text: 'Child node 2'}
]
}
]
}
},
selected: [],
};
}
handleClick() {
const newData = this.state.data.core.data[0].children.slice();
newData.push({text: 'New child node'});
this.setState({
data: {
core: {
data: [
{
text: 'Root node', children: newData
}
]
}
}
});
}
handleChange(e, data) {
this.setState({
selected: data.selected,
})
}
render() {
const data = this.state.data;
return (
this.handleChange(e, data)} />
Selected nodes: {this.state.selected.join(', ')}
);
}
}
`
IMPORTANT! If you use webpack, you have to install and configure css loaders and file-loader to load
.gif and .jpg files in webpack.conf.js, for example:
`
loaders: [
{
test: /\.css$/,
loaders: [
'style',
'css',
'postcss'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel'
]
},
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
loader: 'file-loader'
},
]
``