ColumnSelect - Table Column Select Plugin for jQuery

ColumnSelect is a lightweight and customizable jQuery plugin that adds select boxes to column headers to choose which column to show.

How it works

The plugin replaces column header texts with select boxes populated with column header texts as options. By selecting an option from a select box loads the corresponding column's data.

Features

auto-detect table headers ("th" or "td")
multi table support
optional and customizable "Please select" text
customizable number of columns to show
offset number of columns
show or hide same options in select boxes
customizable max option text length
title tags for options if header text is longer then user-defined max option text length
customizable "more" string
keep or discard inline or external cell styles

Limitations

works only with tables with no rowspan or colspan
only "on" type event handlers are preserved
"uniqueColumns" feature fails in IE7 and below ("disabled" state of option tags are unsupported)

Usage

Include jQuery and ColumnSelect.js to the header, then specify tables using jQuery selectors to be modified by ColumnSelect:

$(document).ready(function() {
    $('table.myTable').ColumnSelect({
    // options goes here
    });
});

Options

Available ColumnSelect parameters:

$('div.content table').ColumnSelect({
    columnsToApply: 2, // number of columns to add select boxes. Default: 2
    columnOffset: 1, // number of columns to skip from the left. Default: 1
    pleaseSelectText: 'Choose one...', // text to show as first option in select boxes. If empty, current column header text is used. Default: empty
    emptyCells: true, // show empty cells on page load if pleaseSelectText is set. Default: false
    maxOptionTextLength: 20, // maximum text length in select options. Default: 50
    extraTextString: " (...)", // extra text indicator if text is longer than maxOptionTextLength. Default: " (...)"
    uniqueColumns: false, // enable selecting the same column more than once. Default: false
    keepCellStyles: true, // keep or discard cell styles on change (css classes and inline styles). Default: true
});

Demos

Table without ColumnSelect:

first column	1	2	3	4	5
1	1	2	3	4	5
2	2	4	6	8	10
3	3	6	9	12	15
4	4	8	12	16	20

ColumnSelect demo 1: default usage

first column	1	2	3	4	5
1	1	2	3	4	5
2	2	4	6	8	10
3	3	6	9	12	15
4	4	8	12	16	20

$('table.demo1').ColumnSelect({
    columnsToApply: 2,
    uniqueColumns: false,
    keepCellStyles: true
});

ColumnSelect demo 2: custom "Please select" text, 2 columns offset, unique columns

first column	1	2	3	4	5
1	1	2	3	4	5
2	2	4	6	8	10
3	3	6	9	12	15
4	4	8	12	16	20

$('table.demo2').ColumnSelect({
    columnsToApply: 3,
    columnOffset: 2,
    uniqueColumns: true,
    pleaseSelectText: "Select one...",
    emptyCells: true
});

License

ColumnSelect is free. You can use, distribute and modify as you like it. The author is not liable for any damages arising from its use.

Disclaimer

ColumnSelect is provided "as is" and "with all faults." The developer makes no representations or warranties of any kind concerning the safety, suitability, lack of viruses, inaccuracies, typographical errors, or other harmful components of ColumnSelect. There are inherent dangers in the use of any software, and you are solely responsible for determining whether ColumnSelect is compatible with your equipment and other software installed on your equipment. You are also solely responsible for the protection of your equipment and backup of your data, and the developer will not be liable for any damages you may suffer in connection with using, modifying, or distributing ColumnSelect.

Download

ColumnSelect weighs 9.1 KB uncompressed and 3.1 KB minified.

Download v0.1 | 4 KB

Downloaded 1744 times since 05/2013

Version History

02/05/2013 Initial release

ColumnSelect Table Column Select Plugin for jQuery