JSFiddle - React, Tailwind, and code Playground

by nicosa

HTML

<head>
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css" type="text/css" />
<link rel="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.bootstrap4.min.css"type="text/css" />
</head>

<body>
<table id="etalaseitem" class="display" style="width:100%">

</table>
</body>

<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>

JavaScript

$(document).ready( function () {
    var data = [['Bill doe'	,'erga'	,'fa',	'hdfhbsdf',	'rgsserg',	'meter',	'1000',	'BAG','yimip1','<span data-toggle="modal" data-target="modal"><a href="#" onclick="addlabel(12)" style=$j data-toggle=$m data-target="#qtyModal" data-placement="top" title=$l  >DUS 12314 <i class=$i></i></a></span>   <i class=$k data-toggle="tooltip" data-placement="top" title=$n role="button" onclick="downloadlabel(12)"></i>','<button type="button" onclick="edit(12)"></button><button type="button" onclick="delete(12)"></button><button type="button" onclick="add(12)"></button>'],['Bill doe'	,'erga'	,'fa',	'hdfhbsdf',	'rgsserg',	'meter',	'1000',	'BAG','yimip1','<span data-toggle="modal" data-target="modal"><a href="#" onclick="addlabel(12)" style=$j data-toggle=$m data-target="#qtyModal" data-placement="top" title=$l  >DUS 1235637 <i class=$i></i></a></span>   <i class=$k data-toggle="tooltip" data-placement="top" title=$n role="button" onclick="downloadlabel(12)"></i>','<button type="button" onclick="edit(12)"></button><button type="button" onclick="delete(12)"></button><button type="button" onclick="add(12)"></button>']];
    var table = $('#etalaseitem').DataTable({
    columns: [
        { title: 'Consignee', },
        { title: 'Contract', },
        { title: 'Serial', },
        { title: 'Goods Name', },
        { title: 'Spec', },
        { title: 'Unit', },
        { title: 'Unit Qty', },
        { title: 'Packaging', },
        { title: 'Purchaser', },
        { title: 'Label Number ', },
        { title: 'Action [Edit|Del|Add]', }
    ],
    data: data,
    orderFixed: [[9, 'asc']],
    rowGroup: {
        dataSrc: 9   
    },
    columnDefs: [
        {
            targets: 9,
            visible: false,
            searchable: true
        }
    ]
}); 

});