JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta name="viewport" content="width=device-width, initial-scale=2.0">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.24/r-2.2.7/sp-1.2.2/sl-1.3.3/datatables.min.css"/>

    <script type="text/javascript"
            src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.24/r-2.2.7/sp-1.2.2/sl-1.3.3/datatables.min.js"></script>
</head>
<table id="echeancier" class="display" style="width:100%">
    <thead>
    <tr>
        <th>Année</th>
        <th>Mois</th>
        <th>Reférance Projet</th>
        <th>Client</th>
        <th>Département</th>
        <th>Mobilier</th>
        <th>Comercial</th>
        <th>Montant Propal</th>
        <th>Montant Réaliser</th>
        <th>Indice de surté</th>
        <th>ADJU</th>
        <th>MOE</th>
        <th>MOA</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>2021</th>
        <th>4</th>
        <th>AF005529</th>
        <th><a href="/societe?socid=4800">MAIRIE DE BORDEAUX</a></th>
        <th>33</th>
        <th>AV norm x7 (ACROPOSE ) / Cor = bagatelle de chez SERI</th>
        <th>JDV</th>
        <th><a href="/comm/propal/card.php?id=10023">1167€</a></th>
        <th><a href="/commande/card.php?id=">€</a></th>
        <th>Rouge</th>
        <th><a href="/societe?socid=11234">MOTER S.A.S.</a></th>
        <th><a href="/societe?socid=4155">EXIT PAYSAGISTES ASSOCIÉS</a></th>
        <th><a href="/societe?socid=35801">BORDEAUX EURATLANTIQUE</a></th>
    </tr>
    <tr>
        <th>2021</th>
        <th>2</th>
        <th>AF0010567</th>
        <th><a href="/societe?socid=5742">MAIRIE DE SAINT AMAND MONTROND</a></th>
        <th>18</th>
        <th>GA Regate</th>
        <th>JDV</th>
        <th><a href="/comm/propal/card.php?id=14654">5049€</a></th>
        <th><a href="/commande/card.php?id=">€</a></th>
        <th>Aucun</th>
        <th><a href="/societe?socid="></a></th>
        <th><a href="/societe?socid="></a></th>
        <th><a...

JavaScript

$("#echeancier").DataTable({
    searchPanes: {
            viewTotal: true,
            cascadePanes: true,
            columns: [0,1,4,6,9]
    },
    dom: "Pfrtip",
    order: [[ 0, "asc" ], [ 1, "asc" ]],
    responsive: true,
    orderMulti: true,
    lengthMenu: [
            [ 25, 50, 100, -1 ],
            [ "25", "50", "100", "Afficher Tous" ]
        ],
   language:{
      decimal:"",
      emptyTable:"Pas de données disponible dans la table",
      info:"Affiche _PAGE_ sur _PAGES_",
      infoEmpty:"Aucune données disponible",
      infoFiltered:"(flitrer depuis un total de _MAX_ total lignes)",
      infoPostFix:"",
      thousands:",",
      lengthMenu:"Affiche _MENU_ ligne par page",
      loadingRecords:"Chargement...",
      processing:"Traitement...",
      search:"Rechercher:",
      zeroRecords:"Aucune données trouver",
      paginate:{
         first:"Premier",
         last:"Dernier",
         next:"Suivant",
         previous:"Precedent"
      },
      aria:{
         sortAscending:": activer pour trier par ordre ascendant",
         sortDescending:": activer pour trier par ordre descendant"
      }
   }
   });