JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tbody>
    <tr>
      <td>(empty)</td>
      <td>Heading 1</td>
      <td>Heading 2</td>
    </tr>
 <tr>
  <td>Heading A</td>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
  <td>Heading B</td>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
  <td>Heading C</td>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
 </tbody>
</table>
<button id = "Swap">Swap</button>

JavaScript

$('#Swap').on('click', function() {
   var t= document.getElementsByTagName('tbody')[0],
    r= t.getElementsByTagName('tr'),
    cols= r.length, rows= r[0].getElementsByTagName('td').length,
    cell, next, tem, i= 0, tbod= document.createElement('tbody');

    while(i<rows){
        cell= 0;
        tem= document.createElement('tr');
        while(cell<cols){
            next= r[cell++].getElementsByTagName('td')[0];
            tem.appendChild(next);
        }
        tbod.appendChild(tem);
        ++i;
    }
    t.parentNode.replaceChild(tbod, t);
});