JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/sl-1.2.6/datatables.min.css"/>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/sl-1.2.6/datatables.min.js"></script>
<div style="padding: 20px;">


<table id="companylist" class="display" style="width: 100%;">

</table>
</div>

JavaScript

$(document).ready(function() {
$('#companylist').dataTable( {
   dom: '<lf> <t><ip><"clear">',
		data: [{"company_id":"181","name":"TEST 118","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"182","name":"TEST 119","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"75","name":"TEST 12","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"183","name":"TEST 120","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"184","name":"TEST 121","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"185","name":"TEST 122","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"186","name":"TEST 123","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"},{"company_id":"187","name":"TEST 124","regoffice_city":"","regoffice_country":"United Kingdom","is_customer":"0","is_supplier":"0"}],
   bPaginate:true,
   scrollX: "100%",
   columnDefs: [ {
           orderable: false,
           className: 'checkbox-select dt-center',
           targets:   0
       } ],
       select: {
           style:    'os',
           selector: 'td:first-child'
       },
   order: [[ 0, "desc" ]],
   scrollCollapse: true,
   bAutoWidth: true,

    aLengthMenu: [ 10, 25, 50, 75, 100 ],
    select: true,
        "columns": [
          { data: null,
             render: function(data) {
             console.log(data);
             //return '<input type="checkbox" name="selectcompanyid">';
             return '<div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input checkboxdt" id="tableDefaultCheck" value="'+ data.company_id+ '"></div>';
             //return '<input class="checkboxdt"...