Disabling Toggle Functionality for a Specific Column in Bootstrap Table

Question

I have column toggle functionality enabled on my Bootstrap Table. I would like to disable the toggle functionality for one of the displayed columns on the table. I read the documentation through this link: https://examples.bootstrap-table.com/index.html#column-options/switchable.html#view-source . However, I do NOT initialize my table columns as show in the example in the link. Instead, the following code is how I initialize my table columns.

[index.php]

<table

id="table"

data-toolbar="#toolbar"

data-search="true"

data-show-refresh="true"

data-show-fullscreen="true"

data-show-columns="true"

data-show-columns-toggle-all="true"

data-show-export="true"

data-minimum-count-columns="2"

data-pagination="true"

data-id-field="id"

data-page-list="[10, 25, 50, 100, all]"

data-side-pagination="server"

data-response-handler="responseHandler"

data-url="data1.json">

</table>

[script.js]

\var $table = $('#table')
var $remove = $('#remove')
var selections = []

function viewFormatter(value, row, index) {

return [

'<a class="detail-btn btn btn-warning column-toggle" href="javascript:void(0)" role="button" title="Detail">',

'Detail',

'</a>

].join('')
}

function initTable() {

var icons = {

columns: 'bi bi-layout-sidebar-inset-reverse',

fullscreen: 'bi bi-arrows-fullscreen'

}

$table.bootstrapTable('destroy').bootstrapTable({

icons: icons,

height: 550,

locale: 'en-US',

columns: [
{

title: 'ID',

field: 'id',

align: 'center',

valign: 'middle',

sortable: true
},

{
title: 'Nama',

field: 'nama',

align: 'center',

sortable: true,

align: 'center'
}, 

{
title: 'E-mail',

field: 'email',

align: 'center',

valign: 'middle',
}, 

{
title: 'Nomor Telepon',

field: 'telepon',

align: 'center',

valign: 'middle'
}, 

{
title: 'Lokasi',

field: 'lokasi',

align: 'center',

valign: 'middle',

sortable: true
}, 

{
title: 'View',

field: 'view',

align: 'center',

formatter: viewFormatter

}]

})

$table.on('all.bs.table', function (e, name, args) {
console.log(name, args)
})
}

$(function() {
initTable()
})\

The column above that I would like to disable its column toggle ability is the 'View' column.

I saw in the 'Column Switchable' documentation of Bootstrap Table that if you initialized the table columns or fields through HTML, you can specify the 'data-switchable' option for a particular column/field to disable its column toggle ability. I thought it would be the same case for when initializing the table columns/fields through JavaScript where I can just specify column toggle ability using 'switchable' attribute and set to 'false'. Unfortunately, Bootstrap Table does not provide the equivalent functionality of 'data-switchable' on table initialization in JavaScript.

Answer 1

Apparently, there is a trick to know the equivalent name of the property to that of its attribute. What I mean is the documentation seems to encourage developers to define the table column headers through HTML instead of JavaScript. For example, the switchable column option in the Bootstrap Table documentation shows its usage as follow.

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-show-columns="true"
  data-url="json/data1.json">
  <thead>
  <tr>
    <th data-field="id" data-switchable="false">ID</th>
    <th data-field="name">Item Name</th>
    <th data-field="price" data-switchable-label="Custom price label">Item Price</th>
  </tr>
  </thead>
</table>

In defining the column headers, the data-switchable attribute is used to disable the column toggling for that particular column.

However, I initialize the Bootstrap Table using the example in the following link:

https://examples.bootstrap-table.com/#welcome.html

Since I defined the column headers in JavaScript instead of directly in the HTML code like the example above, I cannot use the data-switchable attribute. And so, I try to guess what is its equivalent property name for that attribute. In the documentation, I saw that to define the title of the column header, the data-title is used if the table column headers are defined directly in HTML. Meanwhile, in my code as I initialize the table column headers in JavaScript, the title of the column headers uses the title property. And so, from there I thought that the equivalent property name of the data-switchable attribute must be switchable to which I can set to false to disable the column toggling for one of the column headers. Voila! It works.

Thus, if I want to disable the column toggle for this column header called View, I can just use the switchable property and set it to a Boolean value of false.

{
title: 'View',

field: 'view',

align: 'center',

switchable: false,

formatter: viewFormatter

}

I am still a web developer beginner so I apologize if anything I said may come out wrong. Hope this helps anyone who initialize the Bootstrap Table in JavaScript!