title: Datatables.net with ReactJS, render a ReactJS component in a column
body: <p>i have the following component with datatables:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router'
  
  
  import { PanelContainer, Panel, PanelBody, Grid, Row, Col } from '@sketchpixy/rubix'
  
  import $ from 'jquery'
  import DataTable from 'datatables.net'
  
  $.DataTable = DataTable
  
  const columns = [{
    title: '&lt;input type="checkbox" /&gt;',
    data: 'check',
  }, {
    title: 'Foto',
    data: 'avatar',
  }, {
    title: 'Nombre',
    data: 'name',
  }, {
    title: 'Dirección',
    data: 'address',
  }, {
    title: 'Clasificación',
    data: 'clasification',
  }, {
    title: 'Editar',
    data: 'editLink',
    render: x =&gt; `&lt;a href="${x}"&gt;&lt;i class="icon-fontello-edit"&gt;&lt;/i&gt;&lt;/a&gt;`, // &lt;-- this line i'm interested!
  }]
  
  class Table extends Component {
    transform(content) {
      return content.map(x =&gt; ({
        ...x,
        check: '&lt;input type="checkbox" /&gt;',
        avatar: '&lt;img src="/public/imgs/app/nico.jpg" width="40" height="40" style="border-radius: 100%;"&gt;',
        clasification: `&lt;i class="${x.clasification.icon}"&gt;&lt;/i&gt; ${x.clasification.name}`,
      }))
    }
  
    componentDidMount(nextProps, nextState) {
      this.table = $(this.refs.main).DataTable({
        dom: '&lt;"data-table-wrapper"tip&gt;',
        data: [],
        columns,
        language: {
          info: 'Mostrando _START_-_END_ de _TOTAL_ puntos',
          infoEmpty: 'No hay puntos',
          paginate: {
            next: 'Siguiente',
            previous: 'Anterior',
          },
        },
      })
    }
  
    componentWillUpdate() {
      this.table.clear()
      this.table.rows.add(this.transform(this.props.data))
      this.table.draw()
    }
  
    componentWillUnmount() {
      $('.data-table-wrapper')
      .find('table')
      .DataTable()
      .destroy(true)
    }
  
    render() {
      return (
          &lt;table
            className="table table-striped hover"
            cellSpacing="0"
            width="100%"
            ref="main"
          /&gt;
      )
    }
  }
  
  export default p =&gt;
    &lt;PanelContainer&gt;
      &lt;Panel&gt;
        &lt;PanelBody&gt;
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Col xs={12}&gt;
                &lt;Table data={p.data} /&gt;
  
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Grid&gt;
        &lt;/PanelBody&gt;
      &lt;/Panel&gt;
    &lt;/PanelContainer&gt;
  </code></pre>
  
  <p>The problem is that, with datatables, i need to render a Link with react router, using an anchorlink () is not a solution because it will re-render the whole page. So i need to render a custom component in the column with the specified link. The link is constructed with the ID.</p>