JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<header>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/fh-3.1.8/r-2.2.7/sp-1.2.2/sl-1.3.3/datatables.min.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/fh-3.1.8/r-2.2.7/sp-1.2.2/sl-1.3.3/datatables.min.js"></script>
</header>
  <body>
    <table id="commArray" class="display dataTable dtr-inline" role="grid" aria-describedby="commArray_info" style="width: 1497px;">
        <thead>
          <th>Login</th>
          <th>Reference Facture</th>
          <th>Referance Projet</th>
          <th>Referance Commande</th>
          <th>Date Création Facture</th>
          <th>Date Réglement Limites</th>
          <th>Date Commande</th>
          <th>Nom Client</th>
          <th>Code Postal</th>
          <th>Montant facturé</th>
        </thead>
        <tbody>
        <tr>
            <td>GFG</td>
            <td><a href="/17280" target="_blank">4005719</a></td>
            <td><a href="/13992" target="_blank">AF0010175</a></td>
            <td><a href="/3333" target="_blank">2005268</a></td>
            <td>2020-09-01 09:33:24</td>
            <td>2020-09-30</td>
            <td>2020-07-21</td>
            <td><a href="/4282" target="_blank">MAIRIE DE LA FERTÉ GAUCHER</a></td>
            <td>77</td>
            <td>3723€</td>
        </tr>
        <tr class="even">
            <td>GFG</td>
            <td><a href="/17628" target="_blank">4006036</a></td>
            <td><a href="/14656" target="_blank">AF0010802</a></td>
            <td><a href="/3641" target="_blank">2005568</a></td>
            <td>2021-03-25 11:26:09</td>
            <td>2021-04-24</td>
           ...

JavaScript

//Defined datatable Configuration
    const datatableOBJ = 
    {
                searchPanes: {
                    cascadePanes: true,
                    viewTotal: true
                },
                 buttons: [
                    {
                        extend: "excel",
                        text:"Exporter",
                    },
                 ],
                 //Display new total on draw update
                 drawCallback: function(){
                    const api = this.api();
                    //Get data from 9th column
                    const pageTotal = api.column(9, { page: "current"} ).data();
                    let sum = 0;
                    for(let i = 0; i < pageTotal.length; i++) {
                        //Parse and add row value to sum
                        sum+=parseFloat(pageTotal[i].substring(0,pageTotal[i].length-1))
                    }
                    //Edit footer value
                    const table = document.getElementById("commArray");
                    table.tFoot.rows[0].cells[1].innerText = Math.round(sum * 100) / 100 + "€"
                    
                },
                //add search panes only if user as right to view every result
                
                //Indicate element order @see(https://datatables.net/reference/option/dom)
                dom: "PlBfrtip",
                responsive: true,
                fixedHeader: {
                    header: true,
                    footer: true,
                },
                lengthMenu: [
                    [-1,2,5,10],
                    ["Afficher Tous","2","5","10"]
                ],
                //Edit button langage to french
                language:{
                    searchPanes: {
                        clearMessage: "Suprimer les Filtres",
                        collapse: {0: "Filtres", _: "Filtres (%d)"},
                    },
                    decimal:"",
                    emptyTable:"Pas de données...