diff --git a/README.md b/README.md
index 7ddbe72..ea97de4 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,26 @@ Sets the treeview styling. Defaults to `src/themes/default`.
Sets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`.
+#### enableCheckbox
+`PropTypes.bool`
+Enable / disable checkbox element for each node. Defaults to `false`.
+
+#### checkboxField
+`PropTypes.string`
+To set the checkbox field value which need to be used. Defaults to `name`.
+
+#### handleCheckbox
+`PropTypes.func`
+
+Callback function when a checbox is checked / unchecked. Passes 2 attributes: the data node and it's checked boolean value.
+
+```
+handleCheckbox(node, isChecked) {
+ node.checked = isChecked;
+ this.setState({cursor: node});
+}
+```
+
#### decorators
`PropTypes.object`
@@ -157,6 +177,7 @@ const decorators = {
loading: '[optional] boolean',
decorators: '[optional] object',
animations: '[optional] object'
+ checked: '[optional] boolean'
},
```
#### id
@@ -179,3 +200,6 @@ Loading flag. It will populate the treeview with the loading component. Useful w
#### decorators / animations
Attach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above.
+
+#### checked
+Checked flag. Validate node checkbox should display as checked or not .
diff --git a/example/app.js b/example/app.js
index 9787955..59c30db 100644
--- a/example/app.js
+++ b/example/app.js
@@ -49,8 +49,14 @@ class DemoTree extends React.Component {
constructor() {
super();
- this.state = {data};
+ this.state = {data, withCheckbox: false};
this.onToggle = this.onToggle.bind(this);
+ this.withCheckbox = this.withCheckbox.bind(this);
+ this.handleCheckbox = this.handleCheckbox.bind(this);
+ }
+
+ withCheckbox() {
+ this.setState({ withCheckbox: !this.state.withCheckbox });
}
onToggle(node, toggled) {
@@ -78,6 +84,11 @@ class DemoTree extends React.Component {
this.setState({data: filtered});
}
+ handleCheckbox(node, isChecked) {
+ node.checked = isChecked;
+ this.setState({cursor: node});
+ }
+
render() {
const {data: stateData, cursor} = this.state;
@@ -95,9 +106,13 @@ class DemoTree extends React.Component {