JSFiddle - React, Tailwind, and code Playground

by wenyi

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>A</th>
        <th >B</th>
        <th >C</th>
      </tr>
  
      <tr>
        <th>No</th>
        <th >A Name</th>
        <th >Pricing info</th>
      </tr>
       <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
      </tr>


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

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
}, {
  "id": 2,
  "name": "Item 2",
  "price": "$2",
  "amount": 8
}, {
  "id": 3,
  "name": "Item 3",
  "price": "$3",
  "amount": 2
}, {
  "id": 4,
  "name": "Item 4",
  "price": "$4",
  "amount": 90
}, {
  "id": 5,
  "name": "Item 5",
  "price": "$5",
  "amount": 2
}, {
  "id": 6,
  "name": "Item 6",
  "price": "$6",
  "amount": 3
}, {
  "id": 7,
  "name": "Item 7",
  "price": "$7",
  "amount": 7
}, {
  "id": 8,
  "name": "Item 8",
  "price": "$8",
  "amount": 39
}, {
  "id": 9,
  "name": "Item 9",
  "price": "$9",
  "amount": 78
}, {
  "id": 10,
  "name": "Item 10",
  "price": "$10",
  "amount": 30
}, {
  "id": 11,
  "name": "Item 11",
  "price": "$11",
  "amount": 32
}, {
  "id": 12,
  "name": "Item 12",
  "price": "$12",
  "amount": 12
}, {
  "id": 13,
  "name": "Item 13",
  "price": "$13",
  "amount": 76
}, {
  "id": 14,
  "name": "Item 14",
  "price": "$14",
  "amount": 10
}, {
  "id": 15,
  "name": "Item 15",
  "price": "$15",
  "amount": 9
}, {
  "id": 16,
  "name": "Item 16",
  "price": "$16",
  "amount": 8
}, {
  "id": 17,
  "name": "Item 17",
  "price": "$17",
  "amount": 1
}, {
  "id": 18,
  "name": "Item 18",
  "price": "$18",
  "amount": 99
}, {
  "id": 19,
  "name": "Item 19",
  "price": "$19",
  "amount": 100
}, {
  "id": 20,
  "name": "Item 20",
  "price": "$20",
  "amount": 109
}]

$(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');
  });
});