JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/sl-1.2.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/sl-1.2.6/datatables.min.js"></script>

<body>
<table id="table-general">
    <thead>
        <tr>
            <th>
                <input name="selectAll" type="checkbox" id="selectAll1" class="select-all">
                <label for="selectAll1">qweqwe</label>
            </th>  
            <th>sdfsdf</th>
            <th>sdfse</th>
            <th>werwe</th>
         </tr>
    </thead>
    <tbody>
        <tr>
            <td class="select-checkbox"></td>
            <td>dddd</td>
            <td>wwww</td>
            <td>aaasdas</td>
        </tr>
        <tr class="selected">
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>

JavaScript

$(function() {
    // DataTable for General
    let DT1 = $('#table-general').DataTable({
        "scrollY":        100,
        "scrollX":        true,
        "scrollCollapse": true,
        "fixedHeader":    true,
        "bInfo" :         false,
        scrollResize:     true,
        lengthChange:     false,
        searching:        false, 
        paging:           false,
        fixedColumns: {
            leftColumns: 1,
            rightColumns: 1
        },
        columnDefs: [ {
            className: 'select-checkbox',
            targets:   0
        }, {
            orderable: false,
            targets: [0,3]
        } ],
        select: {
            style:    'multi+shift',
            selector: 'td.cell-input'
        },
        order: [[ 1, 'asc' ]]
    });

    $('body').on( "click", "#selectAll1", function(e) {
         if ($(this).is( ":checked" )) {
            DT1.rows(  ).select();
            $(this).prop("checked", true);         
        } else {
            DT1.rows(  ).deselect();
            $(this).prop("checked", false);
        }
    });

    $(".select-checkbox").on( "click", function(e) {
        if($(this).parent().hasClass("selected")) {
            $(".select-all").prop("checked", false);
        }
        else if ($(this).parent('tr').length === $(this).parent('tr.selected').length) {
            alert("TEST, ALL SAME CLASS SELECTED");
            $(".select-all").prop("checked", true);
        }
    });
 });