jQuery-bootgrid how to hide column only in Mobile and Tab

Question

I would like to hide the data column in Tab. I referred Bootgrid Documentation.

In Column setting I found.

data-visible="false"

It hides the data column in PC also. I need something like

 .hidden-xs, .hidden-sm

Answer 1

There are two column settings called cssClass and headerCssClass which do exactly what you ask. If you set hidden-xs and hidden-sm classes inside the column header data attributes, that column will be hidden on small devices. Note that data attributes are called data-css-class and data-header-css-class respectively.

<thead>
    <tr>
        <th data-column-id="id" data-visible="false">ID</th>
        <th data-column-id="firstname">First Name</th>
        <th data-column-id="lastname" data-order="asc">Last Name</th>
        <th data-column-id="registerdate" 
            data-css-class="hidden-xs hidden-sm" 
            data-header-css-class="hidden-xs hidden-sm">Date</th>
    </tr>
</thead>