JQuery-bootgrid how to hide column only in Mobile and Tab
I would like to hide a data column in a Tab. I referred to the Bootgrid Documentation .
In the column setup I found.
data-visible="false"
It also hides the data column on PC. I need something like
.hidden-xs, .hidden-sm
source to share
There are two column settings, cssClass
and headerCssClass
, which do exactly what you ask. If you set the classes hidden-xs
and hidden-sm
inside the column header data attributes, that column will be hidden on small devices. Note that the data attributes are named and accordingly. data-css-class
data-header-css-class
<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>
source to share