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

Limitations

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 ColumnSelect v0.1 | 4 KB

Downloaded 1234 times since 05/2013

Version History

02/05/2013 Initial release

Discussion

comments powered by Disqus