How to use Reacat Function inside column render?

tcagkansokmen

Hi there,

Trying to use datatables.net on reactjs project.
But can't render reactjs functions inside html doms.

It gives Target container is not a DOM Element when I use code below.

const $ = require('jquery');
$.DataTable = require('datatables.net');
class DataTable extends Component { 
  componentDidMount() {
    const productsUIEvents = {
      openDeleteProductsDialog: () => {
        console.log('it works');
      }
    };
    const { authToken } = this.props;
    const { intl } = this.props;
    $(this.refs.main).DataTable({
            responsive: true,
      "processing": true,
      "serverSide": true,
      "ajax": {
        "url": INDEX_URL,
        "type": "GET",
        "headers": {
            "Authorization": "Bearer " + authToken
        },
      },
      dom: `<'row'<'col-sm-6 text-left'f><'col-sm-6 text-right'B>>
      <'row'<'col-sm-12'tr>>
      <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
      pageLength: 50,
      "language": {
      "url":"https://cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json"
      },
            order: [[0, 'desc']],
      columns: [
          { title: '#' ,data: 'id', name: 'id', order: 'desc' },
          { title: intl.formatMessage({ id: "LOCATION.COLUMN.TEAMS" }), data: 'teams_count', name: 'teams_count', "render": function (data, type, row) {
              return '<span class="label label-lg label-light-primary label-inline">'+data+'</span>';
              }
          },
          { title: intl.formatMessage({ id: "LOCATION.COLUMN.DATE" }), data: 'created_at', },
          { title: intl.formatMessage({ id: "LOCATION.COLUMN.ACTION" }), className: "text-right", data: 'created_at', name: 'created_at', "render": function(data, type, row) {
            ReactDOM.render(
              <a href="#" class="btn btn-sm btn-light-danger btn-text-primary btn-hover-primary btn-icon teklif-sil" data-toggle="tooltip" data-theme="dark" title="Sil"
              onClick={productsUIEvents.openDeleteProductsDialog}>
              <i class="ki ki-bold-close icon-md"></i>
            </a>);
          }
        }
      ]
    });
    
  }  

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You would use columns.render for that,

Colin

amastaneh

Hey Colin, he used. he talked about ReactDOM.render inside of columns.render.

colin

Ah yep, sorry. I don't know anything about React I'm afraid, so I'll need to bow out,

Colin