How to use Reacat Function inside column render?

How to use Reacat Function inside column render?

tcagkansokmentcagkansokmen Posts: 1Questions: 1Answers: 0
edited July 2020 in Free community support

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.

Answers

  • colincolin Posts: 10,945Questions: 0Answers: 1,864

    You would use columns.render for that,

    Colin

  • amastanehamastaneh Posts: 1Questions: 0Answers: 0

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

  • colincolin Posts: 10,945Questions: 0Answers: 1,864

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

    Colin

Sign In or Register to comment.