jQuery Plugin To Show / Hide Columns Of HTML Table - hide_columns

File Size: 10.9 KB
Views Total: 7008
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Show / Hide Columns Of HTML Table - hide_columns

Just another jQuery plugin that provides you capabilities to show / hide specified columns of your html table.

See also:

How to use it:

1. Make sure jQuery is included in the webpage, than include the hide_cols.js and stylesheet hide_cols.css after jQuery.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="css/hide_cols.css" rel="stylesheet">
<script src="js/hide_cols.js"></script>

2. Wrap your html table into a DIV container called 'hide-cols'.

<div class="hide-cols">
  <table id="demo" class="table">
        <th>First Name</th>
        <th>Last Name</th>

3. Create an empty DIV container to place the controls which allow to 'unhide' all or specified table columns.

<div id="show"></div>

4. Call the function on the table and done.


5. Plugin's default settings.


  hideColumn: '&times;',
  unhideColumn: '<span class="glyphicon glyphicon-eye-open"></span>  Column',
  unhideAll: '<span class="glyphicon glyphicon-eye-open"></span>  All Columns',
  autoSort: true


This awesome jQuery plugin is developed by RayHyde. For more Advanced Usages, please check the demo page or visit the official website.