How can I add a Checkbox into each of the node.

[bfang711]

I would like to add a Checkbox (maybe from material-ui) to each of the node, and change node backgroundColor to refect checkbox status (checked or not.) How to do it?
in general, seems like I cannot put complex DOM in the node, am I correct?

thank you.

[lifejuggler]

@bfang711 there is a simple way to do this using generateNodeProps;
simply pass in a button into the button props (takes in array) and then depending on the state, you can pass in a custom class like this
className={isChecked ? nodeChecked : ''}
and then put the css style in a css file or styled-component

[wuweiweiwu]

@bfang711 Also another option (with regards to rendering a checkbox) you can actually specify a function in nodeData and specify the component that is rendered. This is not very well tested so use at your own risk. example from the web demo

for ex:

{
title:  (<input/>)
}

Another alternative is to use nodeContentRenderer to custom render your nodes.

@lifejuggler is correct on how you can change background colors and add buttons. however, you will have to have to use one of the above 2 options to render a checkbox

Hope that helps!