Datatables.net with ReactJS, render a ReactJS component in a column

I will answer my own question for other developers. What i did is the following:

columnDefs: [{  targets: 5,  createdCell: (td, cellData, rowData, row, col) =>    ReactDOM.render(      <a style={{ cursor: 'pointer' }}        onClick={() => this.props.goto(cellData) }>        <i className="icon-fontello-edit"></i>      </a>, td),} // ... the rest of the code

The createdCell method receives the actual dom element, so you can render the react component directly there, the only problem is that you cannot render Links, that is because the router needs a context and that context is lost. So the best way is to use a method to go to the specific route, which in this case goto is this.props.router.push passed from the parent.

Maybe you could utilize ReactDOM.render. The function takes in a component and a container, so you could initialize your links as empty nodes with your props as data-types. Then in componentDidMount, you could loop through and call a function that looks like this:edit: the Link component requires the react context to navigate around implicitly and I don't think reactDOM.render reconciles your context object with the one that it creates. Best bet would be to create a custom link component to use here that uses the browserHistory(react-router v3) or just history library to navigate.

componentDidMount() { function populateLinks(node) {   const linkURL = node.dataset.linkURL;   reactDOM.render(<Link to={linkURL}>Hello</Link>, node);  }$('.link-div').get().forEach(populateLinks);}

It looks like you would specify a specific dom node to render with something like this:

$('#example').dataTable( {  "columnDefs": [ {    "targets": 0,    "data": "download_link",    "render": function ( data, type, full, meta ) {      return `<div class="link-div" data-linkURL=${data}></div>`;    }  } ]} );

Let me know how it goes!