JSFiddle - React, Tailwind, and code Playground

by Hendrikdb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/vanilla-datetimerange-picker.js"></script>
<script type="text/javascript" src="/selectordie.min.js"></script>
<script type="text/javascript" src="/selectordie.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/features/scrollResize/dataTables.scrollResize.min.js"></script>
<script type="text/javascript" src="~/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="~/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.3.4/js/dataTables.searchBuilder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>


<link href="https://cdn.datatables.net/colreorder/1.5.6/css/colReorder.dataTables.min.css" rel="stylesheet" />
<link...

JavaScript

$(document).ready(() => {
dataTableServiceOrder = $('#ServiceOrdersTable').DataTable({
            "fixedHeader": true,
            dom: 'QBfrtip',
            "buttons": [
                {
                    extend: 'copy',
                    text: 'Copy',
                    className: 'btn btn-primary'
                },
                {
                    extend: 'excel',
                    text: 'Excel',
                    className: 'btn btn-primary'
                },
                {
                    extend: 'pdf',
                    text: 'pdf',
                    className: 'btn btn-primary'
                }
            ],
            "colReorder": true,
            "paging": true,
            "destroy": true,
            "columns": [
                {
                    data: "Id",
                    "render": function (data, type) {
                        return '<input type="checkbox" name="id[]" value="' + data + '" />';
                    }
                },
                { data: "Account" },
                { data: "Technique" },
                { data: "Number" },
                { data: "Work Order" },
                { data: "Description" },
                {
                    data: "Start Date",
                    type: "moment",
                    "render": function (data, type) {
                        var dateObj = new Date(data);
                        if (!isNaN(dateObj)) {
                            return moment(dateObj).format("DD/MM/YYYY");
                        }
                        else {
                            return "";
                        }
                    }
                },
                { data: "Is Periodical" },
                { data: "Frequency" },
                {
                    data: "Id"
                }
            ],
            "columnDefs": [{
                "targets": 0,
                "searchable": false,
                "orderable": false,
               ...