JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
                    <table id="example" class="display" cellspacing="0">
                       <thead>
                        <tr>
                            <th  class="nc">Numéro contrat</th>
                            <th class="ww">WW</th>
                            <th class="Marques">Marques</th>
                            <th class="Matricule">Matricule</th>
                            <th class="Clients">Clients</th>
                            <th class="Tel">Tel</th>
                            <th class="Début">Date  Sortie</th> 
                            <th class="hs">heure  Sortie</th> 
                            <th class="as">Lieu  Sortie</th> 
                            <th class="Fin" >Date Retour</th>
                            <th class="ar">Lieu  Retour</th> 
                            <th class="Prix" >Prix/j</th>
                            <th class="Jours" >Jours</th>
                            <th class="Total">Total</th>
                            <th class="Avance">Avance</th>
                            <th class="Reste">Reste</th>
                            <th class="Li">Li</th>
                            <th class="KD">Kilométrage Départ</th>
                            <th class="pv">Prochain vidange</th>
                            <th class="di">Mise en circulation</th>
                              
                            <th >Valider</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody id="tbd">
                        <?php 
                        $arr = array();
                        foreach($contrats as $contrat) {
                            
                            
                           $modif=array();
                           
                            if($contrat['lastUpdateField']!=null){
                               
                               $modif=...

JavaScript

$('#example').dataTable( {
                 "sDom": 'Rlfrtip',
                 "scrollX": true,
                 "stateSave": true
             
    } );

$( "#allcontrat" ).on( 'click', function () {
  
    var url=$("#contrats").attr("href");
     $.post(url,function(data){
     var content = '';
     
    //$('#example').dataTable().fnDestroy();
    $('#example').dataTable().fnClearTable();
     for (var i =0; i < data.contrats.length; i++) {
      
      //remplacer les nulls par un espace
       if(data.contrats[i]['apresvidange']== null)
       {
           data.contrats[i]['apresvidange']= " ";
       }
       
       
       
       if( typeof(data.colors[data.contrats[i]['user']])!== 'undefined'){ 
          
           var background=data.colors[data.contrats[i]['user']][0][0];
          content += '<tr style="background-color: '+background+';">';
        
      }
       else {
           content += '<tr>';
       }
       content +='<td class="nc">'+data.contrats[i]['contratID']+'</td>';
       content += '<td class="ww">'+data.contrats[i]['ww']+'</td>';
       content += '<td class="Marques">'+data.contrats[i]['marqueID']+'</td>';
       content += '<td class="Matricule">'+data.contrats[i]['matriculeID']+'</td>';
       content += '<td class="Clients">'+data.contrats[i]['clientID']+'</td>';
       content += '<td class="Tel">'+data.contrats[i]['contactPhone']+'</td>';
       content += '<td class="Début">'+data.contrats[i]['dateSortie']+'</td>';
       content += '<td class="hs">'+data.contrats[i]['heureSortie']+'</td>';
       content += '<td class="as">'+data.contrats[i]['AeroportS']+'</td>';
       content += '<td class="Fin">'+data.contrats[i]['dateRetour']+'</td>';
       content += '<td class="ar">'+data.contrats[i]['AeroportR']+'</td>';
       content += '<td class="Prix">'+data.contrats[i]['prix']+'</td>';
       content += '<td class="Jours">'+data.contrats[i]['nbrjour']+'</td>';
       content += '<td...