Hide Table Columns

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <button class="pull-right btn btn-default btn-condensed hide-column" 
                data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" 
                data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Type
        <button class="pull-right btn btn-default btn-condensed hide-column" 
                data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Attributes
        <button class="pull-right btn btn-default btn-condensed hide-column" 
                data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
...

CSS

body {
  padding: 15px;
}
.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}
.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}

/* use class to have a little animation */
.hide-col {
    width: 0px !important;
    height: 0px !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

JavaScript

$(function () {

  $('.hide-column').click(function(e){
    var $btn = $(this);
    var $cell = $btn.closest('th,td')
    var $table = $btn.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var cellIndex = $cell[0].cellIndex + 1;

    $table.find(".show-column-footer").show()
    $table.find("tbody tr, thead tr")
      .children(":nth-child("+cellIndex+")")
      .addClass('hide-col'); //.hide()
  })

  $(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td")
      .removeClass('hide-col'); //.show()

  })

	$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'})

})