columnz plug-in

The columnz jQuery plugin.

by mikecallaghan

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h3>columnz</h3>
    <p>HTML tables are common for viewing columnar data on a web page. However, sometimes there may be columns you do not necessarily want to see. Enter the Columnz, a jQuery plug-in, and let your users choose which columns they want to see. Simply include the columnz.js and columnz.css files into your project, and wire up a simple call in your document ready function. </p>
    <p>When applied to a table, each table header will receive a close icon that appears on mouseover. The table itself will be moved very slightly to the right to make room for a small dropdown menu icon that can be used to hide and restore columns.</p>
    <h3>Usage</h3>
    <p>$('tableSelector').columnz();</p>
    <h3>Example</h3>
    <p><input id="applyButton" type="button" value=" Click to apply columnz plug-in "></p>
        <h3>Results</h3>
    <p>
    <table id='orderTable'>
        <thead>
            <tr>
                <th>Order Date
                </th>
                <th>Region</th>
                <th>Rep</th>
                <th>Item</th>
                <th>Units
                </th>
                <th>Cost
                </th>
                <th>Total
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1/6/10
                </td>
                <td>East</td>
                <td>Jones</td>
                <td>Pencil</td>
                <td>95
                </td>
                <td>1.99 
                </td>
                <td>189.05 
                </td>
            </tr>
            <tr>
                <td>1/23/10
                </td>
                <td>Central</td>
                <td>Kivell</td>
                <td>Binder</td>
                <td>50
                </td>
                <td>19.99 
                </td>
                <td>999.50 
                </td>
            </tr>
            <tr>
            ...

CSS

/*Generic body and table styles */
body{font-family:arial,sans-serif;font-size:small;}
h1,h2,h3{font-size:larger; font-weight:bold;}
p{padding-top:5px;padding-bottom:5px;}
table{margin-left:10px;}
td,th{padding:0 10px 0 10px;}
tr td:first-child,
tr th:nth-child(5),
tr th:nth-child(6),
tr th:nth-child(7),
tr td:nth-child(5),
tr td:nth-child(6),
tr td:nth-child(7)
{text-align:right;}
tr:nth-child(even) {background-color: #cccccc; color: #222222;}
th{background-color: #333333; color: #dddddd; }

/* columnz styles */
th a.columnzClose {
    display: none;
}

.columnzHidden {
    display: none;
}

.columnzFadeOut {
    opacity: 0;
    -moz-transition: opacity linear .333s;
    -o-transition: opacity linear .333s;
    -webkit-transition: opacity linear .333s;
    transition: opacity linear .333s;
}

th:hover a.columnzClose {
    display: block;
}

a.columnzClose {
    background-image:...

JavaScript

(function ($) {
    $.fn.columnz = function () {
        var $table = this,
            hide = $.browser.msie ? function(e) {
                $(e).hide();
            } : function(e) {
                $(e).fadeOut(300);
            },
            show = $.browser.msie ? function(e) {
                $(e).show();
            } : function(e) {
                $(e).fadeIn(300);
            },
            $wrapper,
            isInitialized = $table.data('columnzInitialized');
        
        
        if (isInitialized === true) return $table;

        $table.wrap('<div class="columnzSelectionWrapper" />');
        $table.before($('<a class="columnzDropdown">&nbsp;</a><div class="columnzSelection"><ul></ul></div>'));
        $wrapper = $table.closest('.columnzSelectionWrapper');

        // Create a click handler for our menu button to display the selection of column checkboxes.
        $('a.columnzDropdown').click(function (e) {
            var $e = $(e.currentTarget),
            $menuDiv = $e.siblings('.columnzSelection');

            $menuDiv.stop().slideToggle('fast');
        });

        $table.find('tr:first th')
            .addClass('columnz') // Sets up the positioning for the child elements
            .each(function (i, e) {
                var child = i + 1,
                // Create a link to use as a column close icon
                $link = $('<span class="wrappingSpanToFixIE9"><a class="columnzClose" data-column="' + child + '">&nbsp;</a></span>'),

                // Create a checkbox for this column to add to the dropdown menu
                text = $(e).text(),
                $checkbox = $('<li><label><input class="columnzCheckbox" type="checkbox" data-column="' + child + '" checked="checked" />&nbsp;' + text + '</label></li>');

                // Add the checkbox to the dropdown menu
                $('div.columnzSelection ul').append($checkbox);

                // Add the close icon to the table header
               ...