JSFiddle - React, Tailwind, and code Playground

by BeerusDev

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.5.0/css/select.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"
            referrerpolicy="no-referrer"></script>
    <script src="https://cdn.datatables.net/select/1.5.0/js/dataTables.select.min.js"></script>
  </head>

  <body>
  
    <div class="container mx-auto text-center">
      <table id="forDeliveryTable" class="table table-striped table-bordered mx-5" style="width:100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Title</th>
            <th>Doc Notes</th>
            <th>Type</th>
            <th>Doc Status</th>
            <th>Meeting Date</th>
            <th>Initial Submission Date</th>
            <th>Final Submission Date</th>    
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </body>
</html>

CSS

.green {
        background-color: #b0ff90 !important;
      }

      #forDeliveryTable td {
        text-align: center;
      }

JavaScript

var dataSet = [{
  "Name": "This is a test 20221121",
  "Title": "This is a test 20221121",
  "DocNotes": "This is a test",
  "Type": "Minutes",
  "DocStatus": "5 - For Delivery",
  "InitialSubmissionDate": "",
  "FinalSubmissionDate": "",
  "MeetingDate": "11/21/2022"
},
               {
                 "Name": "This is a test 20221122",
                 "Title": "This is a test 20221122",
                 "DocNotes": "This is another test",
                 "Type": "Minutes",
                 "DocStatus": "5 - For Delivery",
                 "InitialSubmissionDate": "",
                 "FinalSubmissionDate": "",
                 "MeetingDate": "11/2/2022"
               },
               {
                 "Name": "This is a test 20221122",
                 "Title": "This is a test 20221122",
                 "DocNotes": "This is another test",
                 "Type": "Minutes",
                 "DocStatus": "1 - Draft",
                 "InitialSubmissionDate": "",
                 "FinalSubmissionDate": "",
                 "MeetingDate": "11/22/2022"
               }
              ];

$(document).ready(function () {


  var forDeliveryTable = $('#forDeliveryTable').DataTable({
    data: dataSet,
    columns: [
      { data: null,
       render: function ( data, type, row ) { 
         return '';
       }
      },
      { data: 'Name' },
      { data: 'Title' },
      { data: 'DocNotes' },
      { data: 'Type' },
      { data: 'DocStatus' },
      { data: 'MeetingDate' },
      { data: 'InitialSubmissionDate' },
      { data: 'FinalSubmissionDate', visible: false, },

    ],
    select: true,
    autoWidth: false,
    dom: 'frtp',
    createdRow: function( row, data, dataIndex ) {
      let todayDate = moment().format("MM/DD/YYYY");
      console.log(todayDate);
      let mtgDate = data[5];
      let initDate = data[6]
      if ( moment(mtgDate).isSameOrBefore(moment(initDate)) ) {
        $(row).addClass( 'green' );
      }
    },
    columnDefs: [ {
    ...