I am using bootgrid table. Here I am trying to show the columns based on user preference.
For example, there are 4 columns in the table. If the user uncheck the 3rd column. Remaining 1st, 2nd and 4th column will be visible.
My issue is that, after the page load, bootgrid shows all the columns. But I want to show only the columns which is preferred by users before page load.
$(function() {
$('#data-table').bootgrid();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.1.1/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.1.1/dist/js/bootstrap.min.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.js'>
</script>
<table class="table table-bordered" id="data-table">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender" data-visible="false">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
<th data-column-id="imgsrc"
data-identifier="true"
data-type="string"
data-visible="false">Img src</th>
<th data-column-id="image" data-formatter="link">Link</th>
<th data-column-id="commands"
data-formatter="commands"
data-sortable="false">Commands</th>
</tr>
</thead>
<tbody>
<tr>
<td>10238</td>
<td>eduardo@pingpong.com</td>
<td>14.10.2013</td>
<td>
https://placeholdit.imgix.net/~text?txtsize=23
</td>
</tr>
<tr>
<td>10243</td>
<td>eduardo@pingpong.com</td>
<td>19.10.2013</td>
<td>https://placeholdit.0&h=50</td>
</tr>
<tr>
<td>10248</td>
<td>eduardo@pingpong.com</td>
<td>24.10.2013</td>
<td>https://placeholdit.imgix.n&h=50</td>
</tr>
</tbody>
</table>