JSFiddle - React, Tailwind, and code Playground

HTML

<table id="data_table_srv" class="table table-striped table-bordered table-hover table-full-width dataTable no-footer" role="grid">
    <thead>
        <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="data_table_srv" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Nom: activate to sort column descending">Nom</th><th class="sorting" tabindex="0" aria-controls="data_table_srv" rowspan="1" colspan="1" aria-label="Courriel: activate to sort column ascending">Courriel</th><th class="sorting" tabindex="0" aria-controls="data_table_srv" rowspan="1" colspan="1" aria-label="Numéro de contrat: activate to sort column ascending">Numéro de contrat</th><th class="sorting" tabindex="0" aria-controls="data_table_srv" rowspan="1" colspan="1" aria-label="Date d'inscription: activate to sort column ascending">Date d'inscription</th><th class="nosort sorting_disabled" rowspan="1" colspan="1" aria-label="Actions">Actions</th></tr>
    </thead>
    <tbody>
        <tr class="odd"><td valign="top" colspan="5" class="dataTables_empty">Aucun enregistrement ne correspond à votre recherche.</td></tr></tbody>
</table>

CSS

/**
	*
	* find_users
	*
	* Renvoie un nombre fini d'utilisateurs qui commencent par une lettre
	* Vérifie si c'est un organisme ou un admin
	*
	* @return 	JSON
	* @access 	public
	* @final
	*
	*/
	public final function find_users(){
		$get = $this->request->get('all', true);
		$post = $this->request->post('all', true);

		$accents = array('A' => 'aAáàâäãåÁÀÂÄÃÅ',
						 'C' => 'cCçÇ',
						 'E' => 'eEéèêëÉÈÊË',
						 'I' => 'iIíìîïÍÌÎÏ',
						 'N' => 'nNñÑ',
						 'O' => 'oOóòôöõÓÒÔÖÕ',
						 'U' => 'uUúùûüÚÙÛÜ',
						 'Y' => 'ýÿÝŸ'
						);

		$caract = 'A';
		$ajax = true;

		if($caract == '#'){
			$caract = "^[^a-z|A-Z|áàâäãåçéèêëíìîïñóòôöõúùûüýÿÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸ]";
		}else {
			$caract = (isset($accents[$caract])) ? '['.$accents[$caract].']' : $caract;
			$caract = "^".$caract;
		}

		$users = new SiteUser;
		$org = $_SESSION['fusion_admin']->id;

		$rqt = "SELECT *
				  FROM  site_users
				 WHERE ";

		if (!has_role('admin')) {
			$rqt .= " `org` = {$org} AND ";
		}

		$rqt .= "`last_name` REGEXP '".$caract."'
				 ORDER BY  `last_name` ASC";


		$user_list = $users->query($rqt);

		$list_user = array();
		if(!empty($user_list)){
			foreach($user_list as $user){

				$user->first_name = utf8_encode($user->first_name);
				$user->full_name = utf8_encode($user->full_name);
				$user->last_name = utf8_encode($user->last_name);

				$informations = json_decode(utf8_encode($user->informations));
				if(is_array($informations))
					foreach($informations as $key => $info){
						$informations->key = utf8_encode($info);
					}

				$user->informations = json_encode($informations);

				$list_user[$user->id] = $user;
			}
		}

		$results = Array(
					"draw" => 1,
					"recordsTotal" => count($list_user),
					"recordsFiltered" => count($list_user),
					"data" => $list_user);

		if($ajax == false){
			return $list_user;
		} else {
			//header('Content-Type: application/json; charset=UTF-8');
			echo json_encode($results);
		}
	}

JavaScript

$(document).ready(function(e) {
    //Datatable
    $("#data_table_srv").loadDataTable();
});

//Load the DataTable
$.fn.loadDataTable = function(){
    
    var noSort = false;
    var anOpen = [];
    
    noSort = $(this).hasClass('no-sort-auto') ? true : false;
    
    $(this).DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: '../rpc.php?p=adherents&a=find_users&plg=adherents&admin=1',
            type: 'GET'
        },
        "order": (noSort) ? Array() : Array(Array(0, 'asc')),
        "autoWidth": false,
        "lengthMenu": [
            [5, 10, 15, 20, -1],
            [5, 10, 15, 20, "Tout"] // change per page values here
        ],
        "columnDefs": [
            {
                'orderable': false,
                'targets': ['nosort']
            },
            {
                type: 'date-euro',
                'targets': ['sortdate']
            },
            {"width" : "150px", "targets": "actions"}
        ],
        "retrieve" : true,
        "info": false,
        // set the initial value
        "pageLength": 20,
        "language": {
            "lengthMenu": "Afficher _MENU_ lignes",
            "zeroRecords": "Aucun enregistrement ne correspond à votre recherche.",
            "info": "Affichage de _START_ à _END_ sur _TOTAL_",
            "infoEmpty": "Affichage de 0 à 0 sur 0",
            "infoFiltered": "(filtré sur un total de _MAX_ lignes)",
            "search": "",
            "paginate": {
                "previous": "",
                "next": ""
            },
            "emptyTable": ''
        }
    });
    
    var wrapper = $(this).attr("id")+ '_wrapper';
    var $wrapper = $("#" + wrapper);
    var column = $(this).attr("id")+ '_column_toggler';
    var $column = $("#" + column);
    
    $wrapper.find('.dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Rechercher");
    
    // Modify table search input
   ...