Hit enter after type your search item

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:

html table columns hide

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:


 

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>

 


 

Using different caption for buttons demo

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:

html table column hide captions

See online demo and code

The markup remains the same as in the first example. Following is the script used:


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:

jQueryl table column hide custom

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:


 

Get the complete code from the demo page.

 

Credit: RayHyde

This div height required for enabling the sticky sidebar