I have a checkbox column which should only be visible on desktop and not on Mobile or Tabs.
There are no options available in the documentation to hide/show any columns based on the devise.
Can we do this?
In order to hide a column based on the column width use d-none d-X-block . Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.
To hide a column entirely from view, meaning it will not be displayed in either the normal or details row, simply use the visible column option and set it to false . This example shows a table where the first column ID is completely hidden from view using the data-visible column attribute.
You can do this with jQuery by toggling the specific columns according to the selection. In the demonstration, I am creating a table layout for listing the employee details and use checkboxes to hide and show the table columns using jQuery.
This is now (4.2) done as explained here: https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
For table cells you have to use e.g.
<th class="d-none d-lg-table-cell">
This will display the table cell only on large displays an upwards.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With