JSFiddle - React, Tailwind, and code Playground
by junto
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>JavaScript
var model = {"WorkOrders":[{"WorkOrderId":2933,"ClaimId":5945,"SupplierId":23,"SupplierText":"General Surveyor A1 (All)","DateStarted":"\/Date(1411986956293)\/","DateCompleted":"\/Date(1411986956293)\/","DatePurchaseInvoiced":"\/Date(1411986979027)\/","DateSalesInvoiced":"\/Date(1411986958433)\/","PlannedStart":null,"PlannedEnd":null,"DaysRemaining":null,"DateCancelled":null,"DateCreated":"\/Date(1411986955870)\/","DateUpdated":"\/Date(1411997867647)\/","UpdatedBy":2,"DeletedFlag":false,"ArchiveFlag":false,"ContactTelephonePrimary":"01234567890","StatusClass":"invoiced","KPIClass":"","KPIText":"No Date Set","WorkOrderType":4,"WorkOrderTypeText":"Fees","GoodsReceiverId":null,"GoodsReceiverText":null,"GoodsReceiverContact":null,"ShowFulfilment":true,"ActiveDate":"\/Date(1411986955870)\/","RequiredDate":null,"IsWorkOrderActive":true,"IsCancellable":false,"IsReassignable":false,"ExpiryDate":"\/Date(-62135596800000)\/","ReferenceNumber":null,"PurchaseOrderReference":null,"TotalRRP":36.0000,"ExcessCollected":null,"AmountSpent":null,"ClaimOwnerId":0,"ClaimOwnerText":null,"InvoiceStatus":"Sales Invoice Generated","PercentageCompleted":100,"HasPermissionToEditCosts":true},{"WorkOrderId":2934,"ClaimId":5945,"SupplierId":58,"SupplierText":"General Builder G7 (K-Z)","DateStarted":null,"DateCompleted":null,"DatePurchaseInvoiced":null,"DateSalesInvoiced":null,"PlannedStart":null,"PlannedEnd":null,"DaysRemaining":null,"DateCancelled":null,"DateCreated":"\/Date(1411991148693)\/","DateUpdated":"\/Date(1411997867643)\/","UpdatedBy":2,"DeletedFlag":false,"ArchiveFlag":false,"ContactTelephonePrimary":"01234567890","StatusClass":"new","KPIClass":"","KPIText":"No Date...