Tiny jQuery Plugin To Toggle Columns Of Html Table - Column Toggle

Column Toggle is a super tiny jQuery plugin which allows to toggle the visibility of table columns and save the current status into local storage. The plugin recognizes your th elements and automatically generate links to show / hide columns you specify.

How to use it:

1. Include the jquery.columntoggle.js file after jQuery library as shown in the code snippet below.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.columntoggle.js"></script>

2. Just call the function columntoggle() on your existing Html table.

$('table').columntoggle();

3. That's it. The plugin will automatically generate links with column names inside the container '.columntoggle-container'. Then you can apply your custom CSS styles to these links.

.columntoggle-container {
  font-size: 0.8em;
  padding: 1em;
  color: #555;
}

.columntoggle-container a { color: #000; }

.columntoggle-container a:hover { color: #f2711c }

.columntoggle-container a.inactive {
  font-weight: normal;
  color: #4183c4
}

4. Possible plugin options.

$('table').columntoggle({

  //Class of column toggle contains toggle link
  toggleContainerClass: 'columntoggle-container',

  //Text in column toggle box
  toggleLabel: 'Show/Hide columns: ',

  //the prefix of key in localstorage
  keyPrefix: 'columntoggle-',

  //keyname in localstorage, if empty, it will get from URL
  key: ''
  
});

Change log:

2016-02-20

• Detect to prevent add more togglebox to a table

---

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