JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id="main">
  <div>
    <button rv-on-click="toggle">
      Toggle
    </button>
  </div>
  <div>
    Dynamic headers sould be visible: {d.showDynamicHeaders}
  </div>
  <table>
    <thead>
      <tr>
        <th>Fixed header</th>
        <th>Fixed header</th>
        <th class="dynamic-header" rv-each-item="items" rv-class-visible="d.showDynamicHeaders" >
          {item.name}
        </th>
      </tr>
    </thead>
  </table>
</div>

CSS

th.dynamic-header {
  color: blue;
}

th.dynamic-header:not(.visible) {
  display: none !important;
}

th {
  border: 1px solid gray;
}

div {
  margin: 10px 0px;
}

JavaScript

$(function(){
  
  var rvcontext = {};
  var rview = rivets.bind($("#main"), rvcontext);  
  rvcontext.d = {};
  rvcontext.d.showDynamicHeaders = true;
  
  rvcontext.items = [
    {
      name : "Dynamic header 1"
    },{
      name : "Dynamic header 2"
    },{
      name : "Dynamic header 3"
    }
  ];
  
  rvcontext.toggle = function(){
    rvcontext.d.showDynamicHeaders = !rvcontext.d.showDynamicHeaders;
  }

});