columnManager

Description:
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
It’s supporting tables with colspans and rowspans, too!

Demo and Example page.

Files: (last update: 2008-01-17 - v 0.2.5)

License:
The plugin is available under both MIT and GPL licenses (as jQuery itself). This means that you can choose the license that best suits your project, and use it accordingly.

Usage and Examples:
Please take a look at the demo page and the source of the jquery.columnmanager.js file.

Available options:

  • listTargetID - string - The ID attribute of the element the column header list will be added to. Default value: null
  • onClass - string - A CSS class that is used on the items in the column header list, for which the column state is visible. Works only with listTargetID set! Default value: ”
  • offClass - string - A CSS class that is used on the items in the column header list, for which the column state is hidden. Works only with listTargetID set! Default value: ”
  • hideInList - array - An array of numbers. Each column with the matching column index won’t be displayed in the column header list. Index starting at 1! Default value: [] (all columns will be included in the list)
  • colsHidden - array - An array of numbers. Each column with the matching column index will get hidden by default. The value is overwritten when saveState is true and a cookie is set for this table. Index starting at 1! Default value: []
  • saveState - boolean - Save a cookie with the sate information of each column. Requires jQuery cookie plugin. Default value: false
  • onToggle - function - Callback function which is triggered when the visibility state of a column was toggled through the column header list. The passed parameters are: the column index(integer) and the visibility state(boolean). Default value: null
  • show - function - Function which is called to show a table cell. The passed parameters are: the table cell (DOM-element). Default value: a functions which simply sets the display-style to block (visible)
  • hide - function - Function which is called to hide a table cell. The passed parameters are: the table cell (DOM-element). Default value: a functions which simply sets the display-style to none (invisible)

Changelog:

  • v 0.2.5 - 2008-01-17
    • change: added options “show” and “hide”. with these functions the user can control the way to show or hide the cells
    • change: added $.fn.showColumns() and $.fn.hideColumns which allows to explicitely show or hide any given number of columns
  • v 0.2.4 - 2007-12-02
    • fix: a problem with the on/off css classes when manually toggling columns which were not in the column header list
    • fix: an error in the createColumnHeaderList function incorectly resetting the visibility state of the columns
    • change: restructured some of the code
  • v 0.2.3 - 2007-12-02
    • change: when a column header has no text but some html markup as content, the markup is used in the column header list instead of “undefined”
  • v 0.2.2 - 2007-11-27
    • change: added the ablity to change the on and off CSS classes in the column header list through $().toggleColumns()
    • change: to avoid conflicts with other plugins, the table-referencing data in the column header list is now stored as an expando and not in the class name as before
  • v 0.2.1 - 2007-08-14
    • fix: handling of colspans didn’t work properly for the very first spanning column
    • change: altered the cookie handling routines for easier management
  • v 0.2.0 - 2007-04-14
    • change: supports tables with colspanned and rowspanned cells now
  • v 0.1.4 - 2007-04-11
    • change: added onToggle option to specify a custom callback function for the toggling over the column header list
  • v 0.1.3 - 2007-04-05
    • fix: bug when saving the value in a cookie
    • change: toggleColumns takes a number or an array of numbers as argument now
  • v 0.1.2 - 2007-04-02
    • change: added jsDoc style documentation and examples
    • change: the column index passed to toggleColumns() starts at 1 now (conforming to the values passed in the hideInList and colsHidden options)
  • v 0.1.1 - 2007-03-30
    • change: changed hideInList and colsHidden options to hold integer values for the column indexes to be affected
    • change: made the toggleColumns function accessible through the jquery object, to toggle the state without the need for the column header list
    • fix: error when not finding the passed listTargetID in the dom

The plugin was successfully tested on Firefox 2, Opera 9.10/9.20 and IE 6/IE 7.

31 Responses to “columnManager”

  1. […] columnManager (tags: jquery) […]

  2. You may want to look at the source of my Table Lib for a function to calculate the effective colIndex of a cell in a table with col/rowspans. You can incorporate it into your plugin if you wish.

    One question: Why not just insert COL tags and hide/show those instead? Wouldn’t it improve performance on large tables? I would like to see an example on your site with 500 rows to see how well it performs.

  3. Matt,

    I’ve already thought about using your function but haven’t got an idea how to handle this. On a cell with a colspan I’d probably have to change the colspan value when toggling on of the columns it spans over (or something like this). Handling rowspans is probably easier. I guess I’ll give it a shot, when i get the time.

    Here’s a demo with about 1000 rows.
    On my machine with FF2 it takes about a second to toggle.
    I’ll try your suggestion with the col-tags, would be nice to speed it up. :)

    Thanks!

  4. Was the plugin ever implemented with col-tags? I would like to pre mark areas with class to affect how they behave (multiple tables on page). Col tags would help with this. Thanks

  5. Mike,
    no it was never. I tried hiding columns by setting the display or visibility style of the col-tag but it didn’t work at all.
    Even if it would work, it would probably break on tables with colspans.

  6. I’ve been trying to create this same effect only toggling columns with a certain class. i.e. hiding all cells in a table with the class “hideMe”. It of course works using the jQuery selector with .hide() and .show() but it’s very slow. Would it be feasible to do something like that with your plugin?

  7. cannot use “saveState: true” (T_T)

  8. Henry: do you have cookies enabled?

  9. Stuart: dou you want to hide only certain cells in a table or entire columns? hiding entire colums is what this plugin is for, but hiding only some and not all cells of a column is not possible.

  10. I’ve found an issue with this plugin.

    If you have a th that is colspan=”2″ and you hide and then show a column that is part of that colspan it screws up the header.

    Email if you want sample code.

    Thanks for the great start of a plugin though.

  11. Thanks for reporting this Chris!
    I’ve fixed the bug, it should work now (v0.2.1). :)

  12. Hi - great plugin. I would vote for putting chList() inside the code (inside toggleColumns()?). Here’s the way I’m trying to use your plugin: I put a little link marked ‘x’ within each column TH so that while a user is looking at a column they can decide to hide it. Elsewhere on the page I use the clickmenu list of column headers for the sole purpose of the user being able to show hidden columns.

    I think this is a reasonable, normal kind of way to use your columnManager, since if the table being viewed is very large (which is why, after all, we need a column manager to help deal with it!), then including a column-hiding ‘x’ in each column can be very helpful.

    Thanks again,
    -Mark

  13. Mark,
    do you mean that adding the column-hiding ‘x’ to each column should be done by the plugin?

    Putting the chList function into the plugin luckily isn’t that complicated.

  14. Hi rm,

    I didn’t mean to be suggesting that, but, yeah; I think it’s a nice addition. Here’s the code I’m using to accomplish it (goes at the beginning of your columnManager function):

    if (settings.headerHideImg) {
    var table = this.get(0);
    var ths = table.rows[0].cells;
    for ( var i = 0; i ‘+settings.headerHideImg+’ ‘;
    $(ths[i]).html(” + link + $(ths[i]).html() + ”);
    }
    }

    Notice that I added ‘headerHideImg’ variable to ’settings’, which expects a value like ”.

    Best,
    -Mark

  15. Hello,

    I’m playing around with your columnManager and tablesorter 2.0.
    To disable sorting of diffrent columns I provide metainfo like in the following example:
    http://tablesorter.com/docs/example-meta-headers.html

    To use this function I have to include jquery.metadata.js. Now every time I try to use columnManager I get following error:
    jquery.metadata.js line 98: tablecol is not defined

    The script is terminated. “tablecol” is id of the table I want to assign columnManager to.

    Is there a way to use columnManager with jquery.metadata.js or have I to look for another solution?

    Thanks in advance.

  16. mark: sorry for my late response! Somehow I forgot to update the page… I’ve included the chList function into $().toggleColumns()

    squig: the metadata plugin seems to doesn’t like the way my plugin stores some data. I’ve “corrected” this. It should work now.

    (in the new v0.2.2)

  17. Hello. First demo with hideInList: [1,4,5] option breaks on/off classes.
    line 575: $li = $(”#” + cmo.listTargetID + ” li:eq(” + (columns[i] - 1) + “)”);
    List contains 2 elements, and id you click 3rd column you get li:eq(2) which is not exists.

  18. sry, originally line 571 Some changes were made, playing around….
    Also have a suggestion. If column header do not have a text() use html(). With image headers i’m getting undefined.

  19. so there are no problems?

    I’ve added your suggestion (v0.2.3). thanks!

  20. Problem still exists. columns[i] - absolute index of columns. ul list contains only columns not in hideInList. So need some changes to

    $li = $(”#” + cmo.listTargetID + ” li:eq(” + (columns[i] - 1) + “)”);

    e.g.

    $li = $("#" + cmo.listTargetID + " li:eq(" + (columns[i]-1-fixedColCount) + ")");

    where fixedColCount - count of columns where this.cMColsVisible[j]==1.
    btw, this.cMColsVisible[j]==1 will not help because of true==1, so need change line 345 like colsVisible[i] = 10, and then fixedColCount - count of columns where this.cMColsVisible[j]==10.

    I’ve made such changes and it works ok.

  21. Damn, now I get it!

    I’ve changed the code (v0.2.4). Please try it out.
    Thank you very much, Yura!

  22. Great! It works :)

  23. How can I create a “show all” button that simply shows all hidden columns instead of toggling on/off ?

    This script lets my users create custom reports before printing…thanks a lot!

  24. maht, until I’ve implemented a showall function (or something like that) you can use the cMColsVisible expando of the table (the one you’re using with the columnManager) to determine the visibility state of the columns and toggle the hidden ones.

    this works for me:

    	$('#showallbutton').click(function(){
    		var t = $('#thetable'),
    			cols = [],
    			vc, i;
    		if ( t.length )
    		{
    			vc = t[0].cMColsVisible;
    			if ( vc.length )
    			{
    				for ( i = 0; i < vc.length; i++ )
    				{
    					if ( !vc[i] )
    						cols.push(i + 1);
    				}
    				$('#thetable').toggleColumns(cols);
    			}
    		}
    	});
    
  25. Hi rw,

    Great plugin.

    Is it currently possible to set the class, for example, on the 3rd item in the target list box (to either “on” or “off”, depending on the visibility state,) when you manually call toggleColumn(3)? The page I’m currently working on uses the target list box to give the user the ability to manually hide specific columns. Doing this causes the class to change on the items in the target list box, which is great. My page also features pre-defined views, whereby clicking on some other link executes a series of toggleColumns to quickly and easily modify the view of the table to something else. Clicking these links do not update the links in the target list box.

  26. Hi again rw,

    I just posted a comment about 5 minutes ago asking a question about modifying the look of the target list box contents when doing a manual call to toggleColumns. I just realized I could send in option params to the toggleColumns call and have since solved my problem

    Thanks,
    – Cam

  27. Hi,

    How can i chain this columnManager plugin with jQuery .fadeOut(”slow”) / .fadeIn(”slow”)?

    I want to achieve a effect that the column toggle with fadeIn/Out before the column disappear.

    Your help will be greatly appreciated.

  28. I hope I’m not misunderstanding you, but toggling the visibility of the columns with a fade effect is not possible as each cell is processed after another (on show/hide). Fading them would look really wierd.

  29. Hi,

    This is effect that i wish to achieve (click a product’s “hide” button):
    http://quicken.intuit.com/compare_products.jhtml

    I modified your code and it works with fadeOut, but then i can’t have the columns that hided before the page load…
    everything is now fadeOut and hide.

    Will be good, if we can have option call for fade_Out_Hide or just hide.

    ————-
    var hideCell = function(cell)
    {
    if ( jQuery.browser.msie )
    {
    (hideCell = function(c)
    {
    // c.style.setAttribute(’display’, ‘none’);
    $(c).fadeOut(”slow”, function(){ c.style.setAttribute(’display’, ‘none’); });
    })(cell);
    }
    else
    {
    (hideCell = function(c)
    {
    //c.style.display = ‘none’;
    $(c).fadeOut(”slow”, function(){ c.style.display = ‘none’; });
    })(cell);
    }
    };

  30. Nice, as long your table has no colspans, it doesn’t look as bad as I thought ;).

    I’ll try to add this as optional behaviour in the next release.

    Thank you!

  31. This is such a handy script. You should toss up a paypal donate or something…

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Syntax Highlighting: You can use [js] .. [/js] and [html] .. [/html] for posting code snippets.