JSFiddle - React, Tailwind, and code Playground

by Colin Marks

HTML

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fh-3.1.4/sc-1.5.0/sl-1.2.6/datatables.css" />

  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fh-3.1.4/sc-1.5.0/sl-1.2.6/datatables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

  <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
</head>

<table id="ops-br-table" class="table-full-width table table-striped table-minimal-padding dataTable no-footer" role="grid" aria-describedby="ops-br-table_info" style="width: 1890px;">
    <thead>
        <tr role="row">
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Request Date: activate to sort column ascending" style="width: 85px;">Request Date</th>
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Operator: activate to sort column ascending" style="width: 79px;">Operator</th>
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Tour ID: activate to sort column ascending" style="width: 59px;">Tour ID</th>
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Tour Name: activate to sort column ascending" style="width: 154px;">Tour Name</th>
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Duration: activate to sort column ascending" style="width: 58px;">Duration</th>
            <th class="sorting" tabindex="0" aria-controls="ops-br-table" rowspan="1" colspan="1" aria-label="Comments: activate to sort column ascending" style="width: 248px;">Comments</th>
            <th class="sorting" tabindex="0"...

JavaScript

$.fn.dataTable.moment('ddd DD/MM/YY');
$('#ops-br-table').DataTable({
	columns: [
		{
			data: 'requestDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		},
		{ data: 'tourDetail.operator.name' },
		{ data: 'tourId', width: "5%"  },
		{ data: 'tourDetail.tourName', width: "10%" },
		{ data: 'tourDetail.tourDuration' },
		{ data: 'userComment', width: "15%" },
		{ data: 'user.friendlyIdentifier' },
		{ data: 'user.email' },
		{
			data: 'sentDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		},
		{
			data: 'plannedFirstChaseDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		},
		{
			data: 'firstChaseDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		},
		{
			data: 'plannedSecondChaseDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		},
		{
			data: 'secondChaseDate',
			//type: 'date',
			//render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
		}
	],
	order: [
		[ 0, "desc"]
	],
	pageLength: 25
});