JSFiddle - React, Tailwind, and code Playground

HTML

<button>Col 1</button>
<button>Col 2</button>
<button>Col 3</button>    
<hr>
<button>Col 1, Col 2</button>
<button>Col 1, Col 3</button>
<button>Col 2, Col 1</button>
<button>Col 2, Col 3</button>
<button>Col 3, Col 1</button>
<button>Col 3, Col 2</button>
<hr>
<button>Col 1, Col 2, Col 3</button>
<button>Col 1, Col 3, Col 2</button>
<button>Col 2, Col 1, Col 3</button>
<button>Col 2, Col 3, Col 1</button>
<button>Col 3, Col 1, Col 2</button>
<button>Col 3, Col 2, Col 1</button>
<hr>

<table id="mainTable">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
      </tr>
      <tr>
          <td>data</td>
          <td>
               <table class="nestedTable">
                   <tr><th>Col 1</th><th>Col 3</th></tr>
                   <tr>
                       <td>nested data</td><td>nested data 1</td>
                    </tr>
               </table>
          </td>
          <td>data</td>
      </tr>
    </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid silver;
  padding: 0.5em;
}

th {
  background: #def;
}

JavaScript

$('button').click(function() {
  
  var arr= $(this).text().split(', '),
      tr= $('#mainTable > tbody > tr, #mainTable > thead > tr');

  $('> th, > td', tr).hide();

  $.each(arr, function(_, val) {
    var col=  $('> th', tr)
                .filter(function() {
                  return $(this).text()===val;
                })
                .index();

    $(tr).append(function() {
      return $('> td, > th', this).eq(col).show();
    });
  });
});