JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
  <thead>
    <tr>
      <th>
      </th>
      <th scope="col">
        2011
      </th>
      <th scope="col">
        01/12
      </th>
      <th scope="col">
        02/12
      </th>
      <th scope="col">
        03/12
      </th>
      <th scope="col">
        04/12
      </th>
      <th scope="col">
        05/12
      </th>
      <th scope="col">
        06/12
      </th>
      <th scope="col">
        07/12
      </th>
      <th scope="col">
        08/12
      </th>
      <th scope="col">
        09/12
      </th>
      <th scope="col">
        10/12
      </th>
      <th scope="col">
        11/12
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        Nombre de bananes
      </th>
      <td>
        4
      </td>
      <td>
        0
      </td>
      <td>
        1
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        2
      </td>
      <td>
        0
      </td>
      <td>
        1
      </td>
      <td>
        0
      </td>
      <td>
        7
      </td>
      <td>
        6
      </td>
      <td>
        0
      </td>
    </tr>
    <tr>
      <th scope="row">
        Nombre de fraises
      </th>
      <td>
        40
      </td>
      <td>
        50
      </td>
      <td>
        10
      </td>
      <td>
        60
      </td>
      <td>
        70
      </td>
      <td>
        20
      </td>
      <td>
        80
      </td>
      <td>
        10
      </td>
      <td>
        40
      </td>
      <td>
        70
      </td>
      <td>
        60
      </td>
      <td>
        90
      </td>
    </tr>
  </tbody>
</table>

<a href="#">inverser</a>

CSS

td { padding:5px; border:1px solid #ccc;}
th { background-color:grey ; padding:2px; }

JavaScript

$("a").click(function() {
 
    var $this = $("#myTable");
    var newrows = [];
    $this.find("tr").each(function(){
        var i = 0;
        $(this).find("th").each(function(){
            i++;
            if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
            newrows[i].append($(this));
        });
        $(this).find("td").each(function(){
            i++;
            if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
            newrows[i].append($(this));
        });
    });
    $this.find("tr").remove();
    $.each(newrows, function(){
        $this.append(this);
    });
    
    $this.find("thead").html("<tr>"+$this.find("tr").html()+"</tr>");
    $this.find("tbody tr").first().remove();
    
  });