JSFiddle - React, Tailwind, and code Playground

by Felipe Zura

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://rawgit.com/riggzh/bootstrap-table/f325dcffa0e98cba177853007856823ea27fc402/src/extensions/print/bootstrap-table-print.js"></script>
<div class="container">
  <h1>showColumn/hideCoulumn</h1>
  <p>
    Show/Hide the specified column.
    <br>
    <code>$table.bootstrapTable('showColumn', 'name');</code>
    <br>
    <code>$table.bootstrapTable('hideColumn', 'name');</code>
  </p>
  <div id="toolbar">
    <button id="button" class="btn btn-default">showColumn</button>
    <button id="button2" class="btn btn-default">hideCoulumn</button>
  </div>
  <table id="table" data-toggle="table" data-toolbar="#toolbar" data-height="460" data-show-print="true">
    <thead>
  
       <tr>
       <th data-field="id">ID<hr>b<hr>c</th>th>

<th data-field="name">name</th>th>

       <th data-field="price">price<hr>h<hr>g</th>th>

      </tr>


    </thead>
  </table>
</div>
</body>

JavaScript

var $table = $('#table'),
  $button = $('#button'),
  $button2 = $('#button2');

var data = [{
  "id": 0,
  "name": "Item 0",
  "price": "$0",
  "amount": 3
}, {
  "id": 1,
  "name": "Item 1",
  "price": "$1",
  "amount": 4
}, ]


$(function() {
  $table.bootstrapTable('load', {
    data: data
  });
  console.log($table.bootstrapTable('getOptions').columns);
  $button.click(function() {
    $table.bootstrapTable('showColumn', 'name');
  });
  $button2.click(function() {
    $table.bootstrapTable('hideColumn', 'name');
  });
});