Need to disable table rows if table header is display:none using Knockout JS

Question

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 style = Display:none. 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.

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
            <td class="essential persist" data-bind="text:ConfirmationNumber">
            </td>

            <td class="essential" data-bind="text:CustomerFirstName">
            </td>
            <td class="optional" data-bind="text:CustomerLastName">
            </td>

        </tr>
    </tbody>
    <!-- /ko-->
</table>

Answer 1

You can use the visible binding to hide both the headers and the column data.

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist" data-bind="visible: $root.hidden() != 'ConfirmationNumber'">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential" data-bind="visible: $root.hidden() != 'FirstName'">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional" data-bind="visible: $root.hidden() != 'LastName'">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
        <th class="essential persist" data-bind="visible: hidden() != 'ConfirmationNumber'"> <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> 
        </th>
        <th class="essential" data-bind="visible: hidden() != 'FirstName'"> <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>

        </th>
        <th class="optional" data-bind="visible: hidden() != 'LastName'"> <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>

        </th>
        </tr>
    </tbody>
    <!-- /ko-->
</table>

Demo: http://jsfiddle.net/knjtov16/1/