JSFiddle - React, Tailwind, and code Playground

by prtome

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/css/dataTables.colVis.css">
<div id="tableBC">

</div>

JavaScript

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
   // alert($('input', td).prop('checked'))
        return $('input', td).prop('checked') ? '1' : '0';
    } );
}


var table= "<table class=\"cell-border productsBC dataTable no-footer\" id=\"productsBC\" ><thead><tr><th><input type=\"checkbox\" id=\"select_allCB\"></th><th>Categorie</th><th>Nom</th><th>Prod</th></tr></thead><tbody><tr id=\"tr_0\" ><td ><input type=\"checkbox\" id=\"check_0\" name=\"check_0\" class=\"check_bcs\"></td><td>alpha</td><td>avec bc</td><td>food</td></tr><tr id=\"tr_1\"><td ><input type=\"checkbox\" id=\"check_1\" name=\"check_1\" class=\"check_bcs\"></td><td>beta</td><td>avec bc</td><td>moi</td></tr><tr id=\"tr_2\"><td ><input type=\"checkbox\" id=\"check_2\" name=\"check_2\" class=\"check_bcs\"></td><td>burro</td><td>beurre salé</td><td>food</td></tr></tbody></table>";

$('#tableBC').html(table);

var mTableBC = $('#productsBC').DataTable({
          "pageLength": 30,
          dom: 'ZBlfrtip',
          aaSorting: [],
          select:true,
          colreorder:true,
          columnDefs: [
              {
                  "targets": 0,
                  "orderDataType": "dom-checkbox"
                }
            ],
          buttons: [
            {
                  extend: 'colvis',
                  text: 'colvis',
                  postfixButtons: [ {extend:'colvisRestore' ,text:'colvisRestor'}]
              }
            ],
          "lengthMenu": [[ 15, 30, 50, 75, 100,-1],[ 15, 30, 50, 75, 100,'all']]
        });