It appears that people generally do not like horizontal scrolling. This creates a design dilemma for presenting information in multi-column tables. A possible alternative is to hide and show groups of columns with a tab design. This code lets you
- Define and create tabs for groups that can contain any number of columns from any location in the table.
- Let users select their own group of columns. The Select Columns tab pop-ups up a list of all the columns with a checkboxes.
- Click a row to display a pop-up with all the data in that row.
View Working Example
HTML
Tabs
- The custom ‘columns’ attribute contains a comma delimited list of the columns that will appear when that tab is clicked.
- The class “activeTab” applies a style to the selected tab
- The ‘tabSelCols’ id is used to capture the click on the Select Columns tab and display the pop-up list of all columns
1: <ul id="colTabs">
2: <li class="activeTab" columns="0,1,2,3,6" >Column Group 1</li>
3: <li columns="0,7,8,9,10" >Column Group 2</li>
4: <li columns="0,11,12,13">Column Group 3</li>
5: <li columns="0,14,15,16">Column Group 4</li>
6: <li id="tabSelCols" columns=''>Select Columns</li>
7: </ul>
Select Column Pop-up
1: <div id="selectColumns" class="popSelectCol">
2: <div class="popTitle">
3: <span style="float:left">Select Columns to View</span>
4: <span id="closePop">X</span></div>
5: <div id="colList"> </div>
6: <div align="center">
7: <button id="btnShow">Show</button></div>
8: </div>
Row Details Pop-up
1: <div id="rowDetails" class="popSelectCol">
2: <div class="popTitle">Details</div>
3: <div id="details"> </div>
4: <div align="center"><button id="btnClose">Close</button></div>
5: </div>
jQuery
Hide and Show the Columns Groups
This code will add a column specific class to the <td> tag in each column. We can then reference the class to hide and show the <td> tags.
1: $('#tabTable tr').each(function() {
2: $(this).find('td').each(function(i){
3: tag = 'c' + i;
4: $(this).addClass(tag);
5: })
6: })
This code find the comma separated list of column numbers in the default tab and displays them when the page loads.
1: var colNums = $('.activeTab').attr('columns');
2: $('#tabTable').hide().showColumns(colNums);
This code initially hides all the columns and then shows only the columns that are passed in the array ‘colids’.
1: $.fn.showColumns = function(colids) {
2: $('#tabTable td').addClass('elHide');
3: var colShow = colids.split(',');
4: for(i=0; i<colShow.length; i++) {
5: var thisCol = colShow[i];
6: $('.c' + thisCol).removeClass('elHide'); }
7: $('#tabTable').show();
8: }
This code change the active tab style and passes the array of column numbers to the above function to show the columns that belong to the group.
1: $('#colTabs li').live('click',function() {
2: $('#colTabs li').removeClass('activeTab');
3: var colNums = $(this).attr('columns');
4: $('#tabTable, #selectColumns, #rowDetails').hide();
5: $(this).addClass('activeTab').showColumns(colNums);
6: })
Select Column Popup
This code creates the pop-up based on the column heading labels.
1: $('#tabSelCols').click(function() {
2: var popList = "<ul>";
3: var chkbox = "<li><label><input type='checkbox'>";
4: $('#tabTable tr:first td').each(function() {
5: var colName = $(this).text();
6: popList = popList + chkbox + colName + "</label></li>"
7: })
8: $('#colList').html(popList);
9: $('#selectColumns').slideDown(300);
10: })
This code displays the selected columns
1: $('#btnShow').click(function() {
2: var chkSelected = '';
3: $('#colList input:checked').each(function(i) {
4: var checkStatus = $(this).attr('checked');
5: chkSelected = chkSelected + i + "," ;
6: $('#tabTable').hide().showColumns(chkSelected);
7: $('#selectColumns').slideUp(300);
8: })
9: })
Show All Data in a Row
This code gets the column heading labels and the text in each <td> tag for the selected row.
1: $('#tabTable tr').live('click',function() {
2: var colLabels = [];
3: var rowData = [];
4: var tbl = $(document).rowDetails(2);
5: $('#details').html(tbl);
6: $('#tabTable tr:first td').each(function(e) {
7: colLabels[e] = $(this).text();
8: })
9: $(this).children().each(function(e) {
10: rowData[e] = $(this).text();
11: })
12: $('#rowValues tr').each(function(e) {
13: $(this).children(':first').text(colLabels[e] + ':');
14: $(this).children(':eq(1)').text(rowData[e]);
15: })
16: $('#rowDetails').slideDown(300);
17: })
18:
This code builds a 2 column table. The first column contains the column heading labels and the second the text in the selected column.
1: $.fn.rowDetails = function(cols) {
2: var tblRow = $('#tabTable tr:first td');
3: var rows = tblRow.length;
4: var tblTag = "<table cellpadding=3 cellspacing=0 border=0 id=rowValues>";
5: var colTags = "";
6: var rowTags = "";
7: var grid = " ";
8: for(c=0; c<cols; c++) {
9: colTags = colTags + '<td> </td>';
10: }
11: for(r=0; r<rows; r++) {
12: rowTags += '<tr>' + colTags + '</tr>'
13: }
14: grid = tblTag + rowTags + '</table>';
15: return(grid); }
In a future post I hope to provide the code to view details for selecting multiple rows. This would be good for a side by side comparison.
To use this code it would be best to download the example, replace the table element and update the style to match your site styles.
Thanks to GENERATEDATA.COM for the data that contained in the example
I hope you find this interesting.
