title: Need to disable table rows if table header is display:none using Knockout JS
body: <p>I am using Knockout JS.
  I have list of table columns in a dropdown list, on selecting a column from the list, changing the table column header <code>style = Display:none</code>. I need to make the rows also to be display none on paging/sorting. Once the column header set display:none it persisting on paging/sorting but not the rows. Here is the my table structure.</p>
  
  <pre><code>&lt;table class="mediaTable dataTableExt"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="essential persist"&gt;
                  &lt;a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#"&gt;@Model.GetLabel("Confirmation #")&lt;/a&gt; &lt;/th&gt;
  
              &lt;th class="essential"&gt;
                  &lt;a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#"&gt;@Model.GetLabel("First Name")&lt;/a&gt;
              &lt;/th&gt;
              &lt;th class="optional"&gt;
                  &lt;a data-bind="click: function () {sortGrid('cust','LastName')}" href="#"&gt;@Model.GetLabel("Last Name")&lt;/a&gt;
              &lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;!-- ko foreach: customerOrders--&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="essential persist" data-bind="text:ConfirmationNumber"&gt;
              &lt;/td&gt;
  
              &lt;td class="essential" data-bind="text:CustomerFirstName"&gt;
              &lt;/td&gt;
              &lt;td class="optional" data-bind="text:CustomerLastName"&gt;
              &lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;!-- /ko--&gt;
  &lt;/table&gt;
  </code></pre>