JSFiddle - React, Tailwind, and code Playground

by Hendrikdb

HTML

<script src="https://code.jquery.com/jquery-3.5.1.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/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>


<link href="https://cdn.datatables.net/colreorder/1.5.6/css/colReorder.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/searchbuilder/1.3.4/css/searchBuilder.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css" rel="stylesheet" />
<link href="/vanilla-datetimerange-picker.css" rel="stylesheet">
<link href="/selectordie.css" rel="stylesheet">
<link href="/filterpane.css" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">



<table id="ServiceOrdersTable" class="table table-hover dataTable no-footer" style="width: 100%; display: inline-table !important;" aria-describedby="ServiceOrdersTable_info">
                    <thead class="tbl-thead">
                        <tr><th class="dt-body-center sorting_disabled sorting_asc" rowspan="1" colspan="1"...

JavaScript

$(document).ready(() => {
 		$.fn.dataTable.moment( 'HH:mm MMM D, YY' );
    $.fn.dataTable.moment( 'ddd, MMMM Do, YYYY' );

dataTableServiceOrder = $('#ServiceOrdersTable').DataTable({
            dom: 'QBfrtip',
            "columns": [
                {
                    data: "Id"
                },
                { 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"
                }
            ],
           
        });
})