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="display" cellspacing="0" width="100%" border="1">

<thead>
  <tr>
<th></th>
  <th colspan="2">Agence1</th>
  <th colspan="3">Agence2</th>
  <th>Agence3</th>
  </tr>
</thead>
  <tr>
   <th></th>
   <th>Agent01</th>
   <th>Agent02</th>
   <th>Agent03</th>
   <th>Agent04</th>
   <th>Agent05</th>
   <th>Agent06</th>
  </tr>
  <tr>
    <td colspan="7">typoeProdut1</td>

  </tr>
  <tr>
    <td>nomProdut1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <td>nomProdut2</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr> 
 <tr>
    <td>nomProdut3</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
  </tr>
</table>

</body>
</html>

JavaScript

$(document).ready(function() {
    $('#example').DataTable();
} );