JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/u/bs-3.3.6/jqc-1.12.3,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.1,b-colvis-1.2.1,b-flash-1.2.1,b-html5-1.2.1,b-print-1.2.1,cr-1.3.2,fc-3.2.2,fh-3.1.2,kt-2.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/u/bs-3.3.6/jqc-1.12.3,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.1,b-colvis-1.2.1,b-flash-1.2.1,b-html5-1.2.1,b-print-1.2.1,cr-1.3.2,fc-3.2.2,fh-3.1.2,kt-2.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.js"></script>
<!DOCTYPE html>
<html>
<body>
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

<thead>
  <tr>
  <th></th>
  <th></th>
  <th colspan="2">Agence1</th>
  <th colspan="3">Agence2</th>
  <th>Agence3</th>
  </tr>

  <tr>
    <th></th>
    <th></th>
   <th>Agent01</th>
   <th>Agent02</th>
   <th>Agent03</th>
   <th>Agent04</th>
   <th>Agent05</th>
   <th>Agent06</th>
  </tr>
</thead>
  <tr>
    <td>typProduit01</td>
    <td>nomProdut1-1</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>6</td>
  </tr>
  <tr>
      <td>typProduit01</td>
    <td>nomProdut1-2<td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr> 
 <tr>
     <td>typProduit01</td>
    <td>nomProdut1-2td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr>
  
  <tr>
      <td>typProduit02</td>
    <td>nomProdut2-1td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr> 
 <tr>
     <td>typProduit02</td>
    <td>nomProdut2-2td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr>
  
   <tr>
     <td>typProduit03</td>
    <td>nomProdut3-1td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr>
  
  <tr>
      <td>typProduit03</td>
    <td>nomProdut3-2td>
    <td>0</td>
   ...

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable({
     'iDisplayLength': 1000,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
    
        "columnDefs": [
            { "visible": false, "targets": 0 }
        ],
        "order": [[ 0, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="7">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
  // Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
            table.order( [ 2, 'desc' ] ).draw();
        }
        else {
            table.order( [ 2, 'asc' ] ).draw();
        }
    } );

} );