JSFiddle - React, Tailwind, and code Playground

by Ben Craig

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<table id="stock" border="1" style="width:200px;">
    <thead>
        <tr>
            <th></th>
            <th>name</th>
            <th>status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="takenstock">
            <td><input type="checkbox"/></td>
            <td>Item1</td>
            <td>taken/Stock</td>
        </tr>
        <tr class="takenstock">
            <td><input type="checkbox"/></td>
            <td>Item2</td>
            <td>taken/SOLD</td>
        </tr>
         <tr>
            <td><input type="checkbox"/></td>
             <td>Item3</td>
            <td>stock</td>
        </tr>
         <tr>
            <td><input type="checkbox"/></td>
             <td>Item4</td>
            <td>SOLD</td>
        </tr>
    </tbody>
</table>
<input type="checkbox" id="hide"/> <label>Hide Taken</label>

JavaScript

$('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false, 	"aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();	

$('#hide').click(function() {
    if ($(this).is(':checked')) {
        oTable.row('.takenstock, .takensold').remove().draw(true);
        $('label').text("Show taken");
    } else {
        oTable.draw();
        $('label').text("Hide taken");
    }
});