Show / hide HTML table columns by jQuery: 3 demos
How to show / hide table columns
The simple and nice jQuery based plug-in, hide_columns, can be used for allowing the users to show or hide the HTML table columns in your website.
The integration process is quite simple for using this plug-in in any table. You just need to add the jQuery library along with JS file of the plug-in. (Find the link at the bottom for downloading the plug-in or download from the demo pages below).
If you simply want to enable the users to hide the columns, just initiate the plug-in in the <script> section. The plug-in will add a cross “button” in each column’s header.
If you want to display buttons to show the hidden columns then simply add a <div> with a specific class as shown in the demo below.
A demo of hide / show HTML table columns
In this demo, a few rows of a table in HTML are created by using plug-in style file. The table is assigned an ID which is called in the jQuery code section. Have a look at the demo:
See online demo and code
To set up this plug-in along with table style, follow these instructions:
Include the CSS file of the plug-in in the <head> section for the table style. It also defines the cross button style. If you want to use your own style, you may omit this.
In the <head> section, Bootstrap CSS is used for buttons:
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/hide_cols/hide_cols.css”>
The markup contains the <table> HTML markup along with a div for buttons:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<div class="hide-cols"> <table class="demotbl" id="show-hide-cols"> <tr> <th>Product ID</th> <th>Name</th> <th>Quality</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Product 1</td> <td>Good Quality</td> <td>500 Items</td> </tr> <tr> <td>2</td> <td>Product 2</td> <td>Good Quality</td> <td>500 Items</td> </tr> <tr> <td>3</td> <td>Product 3</td> <td>Good Quality</td> <td>800 Items</td> </tr> <tr> <td>4</td> <td>Product 4</td> <td>Good Quality</td> <td>500 Items</td> </tr> <tr> <td>5</td> <td>Product 5</td> <td>Good Quality</td> <td>500 Items</td> </tr> <tr> <td>6</td> <td>Product 6</td> <td>Good Quality</td> <td>500 Items</td> </tr> </table> <div id="show"></div> </div> |
Just above the </body> closing tag, place the jQuery and hide_columns.js file which is followed by initiating the plug-in in <script> section:
<script src=”http://code.jquery.com/jquery-1.12.4.min.js”></script>
<script src=”js/hide_cols/hide_cols.js”></script>
1 2 3 4 5 |
<script> $("#show-hide-cols").hideCols(); </script> |
In above example, you saw buttons appeared as you hide a column by pressing the cross button in each column. The button caption is general i.e. columns 1, column 2, column 3 etc.
In pro apps, you would want to use more descriptive captions according to the column names so that the user easily understands if he or she want to display it back.
See the following demo, where unhideColumn option of the plug-in is used with the custom caption:
See online demo and code
The markup remains the same as in the first example. Following is the script used:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $("#show-hide-cols").hideCols({ hideColumn: '×', // this creates the × character unhideColumn: 'Display product column', unhideAll: 'Display All Product Info' }); </script> |
Although, this is still limited or incomplete. I would prefer displaying the exact column names that are hidden as button captions. Hopefully, the developer of the plug-in will think about a solution about this in future updates.
A demo of show/hide columns with your custom CSS
In this example, the table is created with custom CSS rather than using plug-in’s CSS. So, the reference to the plug-in CSS is removed in the <head> section for this demo. You may also use your own button style rather than using the Bootstrap’s CSS. Have a look:
See online demo and code
Following is the CSS used in the <style> section while the markup and the script are the same as in above example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<style> /*Using CSS for table*/ .demotbl { border: 0px solid #69899F; } .demotbl th{ padding:15px; color:#fff; text-shadow:1px 1px 1px #568F23; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 3%, rgb(139,198,66) 52%, rgb(158,217,41) 88% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px; } .demotbl td{ width:100px; padding:10px; text-align:center; vertical-align: top; background-color:#DEF3CA; border: 1px solid #BED3AB; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; color:#666; text-shadow:1px 1px 1px #fff; } .hide-cols .closeWrap { width: 100%; height: 100%; position: relative; padding: 15px 0 5px; } .hide-cols .hide-col { background: #408080; -webkit-border-radius: 0 0 0 50%; -moz-border-radius: 0 0 0 50%; border-radius: 0 0 0 30%; width: 30px; height: 22px; line-height: 20px; color: #fff; border: 0 none; position: absolute; right: 10px; top: 2px; font-weight: normal; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } </style> |
Get the complete code from the demo page.
Credit: RayHyde