A jQuery plugin that hides and shows table columns

Bonus: a nifty CSS table striping

This jQuery plugin adds a "hide" button to each column of a normal table, that hides the column when clicked. A button appears beneath the table for each hidden column allowing you to restore it, plus an "unhide all" button.

The zebra striping is done with just one CSS entry, layering the opacity of each second row and column.

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6
First Row 1	First Row 1	First Row 1	First Row 1	First Row 1	First Row 1
Row 2	Row 2	Row 2	Row 2	Row 2	Row 2
Row 3	Row 3	Row 3	Row 3	Row 3	Row 3
Row 4	Row 4	Row 4	Row 4	Row 4	Row 4
Row 5	Row 5	Row 5	Row 5	Row 5	Row 5
Last Row 6	Last Row 6	Last Row 6	Last Row 6	Last Row 6	Last Row 6

Download from Github

How to use this plugin

1. Link the files you need

Include the jQuery script at the bottom of your page, e.g. through a CDN:

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

Then include the minimized version of the script:

<script src="[path to your script]/jquery.hide_cols.min.js"></script>

Change [path to your script] to where it resides, eg "js".

2. Create your HTML table markup

This is very simple: create a table:


<table id="myTable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
  </tr>
  <tr>
    <td>First Row 1</td>
    <td>First Row 1</td>
		
    etc.

3. Call the plugin

Then initialize the plugin, telling it in which table it needs to affect:

<script>
  $(<name of the table here, e.g. "#myTable">).hideCols();
</script>

You can run the plugin on multiple tables:

<script>
  $('#myTable, #myTable2, #myTable3').hideCols();
</script>

You can change the text in the buttons via the settings:

<script>
  $(<name of the table here, e.g. "#myTable">).hideCols({
    hideColumn: '&times;', // this creates the × character
    unhideColumn: 'Unhide Column',
    unhideAll: 'Unhide All Columns'
  });
</script>

Sort

The buttons to unhide the columns are sorted automatically. To turn this off and add a sort button, set the autoSort to "false":

<script>
  $(<name of the table here, e.g. "#myTable">).hideCols({
    autoSort: false
  });
</script>

4. The CSS

The zebra striping is simply done by giving each second row and each second column an RGBA colour with an opacity. Where they overlap, the opacity is doubled or even trebled, thus making them darker and creating the plaid effect:

tr:nth-child(even),
td:nth-child(even) {
  background: rgba(172, 242, 172, 0.4);
}

Load the css file "hide_cols.css" into the <HEAD> section of your page:


						<link rel="stylesheet" href="[path to your css file]/hide_cols.css">

Change [path to your css file] to where it resides, eg "css/".

Download from Github

This project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.

Please drop in on my portfolio site www.rayhyde.nl