jQuery HTML Table Toolbox

April 13th, 2010

By Paul Andrew

In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more. Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. Yes, we loved it even more.

But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Thankfully, CSS came to the rescue, and HTML tables were duly dumped on the web design scrap heap. Tables were finally relegated to the position it was originally introduced for: Presenting tabular data.

Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. This is were jQuery comes in, the every day web design super-hero.

In this article we present a collection of jQuery plugins and tutorials to help you get more out of your HTML tables. With the seemingly endless power of jQuery you can sort columns horizontally or vertically, have a fixed header, search the contents, paginate a large table, drag and drop multiple columns or even a plugin to make your table scrollable. You will find them all below accompanied by a quality selection of tutorials that will help you take things further.

It’s time to follow in love with HTML tables all over again!

jQuery Table Plugins

Flexigrid – Web 2.0 Javscript Grid for jQuery
Flexigrid is a lightweight but feature rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
Similar in concept with the Ext Grid but built using jQuery, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

jQuery HTML Table Toolbox

Chromatable JQuery Plugin
Chromatable is plugin that allows a large and detailed HTML table to have a fixed header, meaning that when the user scrolls down, the header follows them and stays in a fixed position.

jQuery HTML Table Toolbox

Ingrid, the jQuery Datagrid
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your HTML tables.
Ingrid Demo.

jQuery HTML Table Toolbox

With the JQTreeTable plugin you can easily set which column from a HTML table to take the treeview effect, as well as setting which parents are initially collapasabile.
You have a highlight option can be set so that the rows change colour on hover, there is also dynamic striping of the rows, and there is also a state variable, which sets whether to keep the collapsed or expanded state.

jQuery HTML Table Toolbox

Scrollable HTML table
The Scrollable HTML table jQuery code can be used to convert ordinary HTML tables in into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, then you include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table. Nice and easy.
Scrollable HTML table Demo

jQuery HTML Table Toolbox

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. It allows you to adopt Excel like cell navigation and it gives you features such as editing of a table without requiring a mouse.
You simply navigate to the cell you wish to edit and hit return.

jQuery HTML Table Toolbox

The graphTable plugin lets you take a simple HTML table and turn the data in it into a graph using flot.

graphTable Demo

jQuery HTML Table Toolbox

The DataTables plugin is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Features include: Variable length pagination, on-the-fly filtering, ulti-column sorting with data type detection, smart handling of column widths, display data from almost any data source and much more.

jQuery HTML Table Toolbox

jqGrid Plugin
jqGrid is an Ajax-enabled jQuery plugin that offers solutions for representing and manipulating tabular data. Since the grid is a client-side solution, loading data dynamically through Ajax callbacks can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.
jqGrid Demos

jQuery HTML Table Toolbox

Visualize: Accessible Charts & Graphs from Table Elements
Visualize is a plugin that can scrape data from an HTML table and generate charts using the HTML 5 Canvas element. This plugin is particularly useful because the data for the visualization already exists in the page in a structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

jQuery HTML Table Toolbox

Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features: It can make simple operations defined in the headers, add a row count to the table, summaries for average (avg), sum (sum), maximum (max) and minimum (min) and also works nicely with Ruby on rails nested forms.

jQuery HTML Table Toolbox

Adding Functionality to Tables

Table Drag and Drop
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

jQuery HTML Table Toolbox

Table Pagination
TablePagination is a plugin so that you can auto add a pagination element to the bottom of a HTML table with a variety of settings to customize the elements.

jQuery HTML Table Toolbox

tableRowCheckboxToggle generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or CSS classes in the script.

jQuery HTML Table Toolbox

BS Table Crosshair Plugin
The BS Table Crosshair Plugin automatically highlights the cell that you hover over giving a 'crosshair' effect by simply assigning an ID to the table.

jQuery HTML Table Toolbox

This small plugin provides conversion from a HTML table to a CSV string. There are two parameter only: callback and delimiter.
The delimiter parameter provides which column delimiter should be used in the csv string and the callback parameter(a callback function) contains one argument which is the csv string so you can do anything you want with the generated string.

Colorize is a jQuery plugin that can add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column upon hover. You can colorize as many table rows or columns as you want. A repeat mouse click will revert the row/column to the original background color.

jQuery HTML Table Toolbox

jExpand is an ultra lightweight plugin that will make your tables expandable. Very useful for business apps, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

jQuery HTML Table Toolbox

columnHover is a plugin that highlights the entire column in a table while hovering over them and it even supports colspans and rowspans.

jQuery HTML Table Toolbox

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range.
You can bind a collection of elements such as table rows, divs or list members to Heatcolor and let it do the work.

jQuery HTML Table Toolbox

Fixed Header Table
This is yet another jQuery plugin to provide fixed headers for tables. It differs from the othere in that it does not require any odd html table semantics. It just needs a TABLE tag with THEAD and TBODY to work its magic.

jQuery HTML Table Toolbox

Table Search & Filtering Plugins

This is not the most powerful plugin you could find nor does it offer much configurability, what it does it give is an easy to install simple and basic table filtering feature.

jQuery HTML Table Toolbox

uiTableFilter is a small plugin for filtering (hiding) table rows based on their text contents.

jQuery HTML Table Toolbox

Tablesorter 2.0
tablesorter is a plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without having to refresh the page. It can successfully parse and sort many types of data including linked data in a cell and even has support for multi-column sorting.

jQuery HTML Table Toolbox

PicNet Table Filter
This jQuery plugin adds real time Google-like column filtering capabilities to a regular HTML table.
Currently the picnet.table.filter.js only supports two kinds of filters. The first and default is 'text' which just produces a text box for context sensitive text matches. The second is 'ddl', this produces a drop down list that allows the selection of a single item within that list.

jQuery HTML Table Toolbox

jQuery tinysort
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

jQuery HTML Table Toolbox

LiveFilter 1.1
LiveFilter is a very lightweight plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is well documented and designed in a way in which it is very easy to understand for designers to use and install.

jQuery HTML Table Toolbox

jQtablesearch is a plugin for filtering large data sets with user input by searching through tables, lists, etc, very very quickly.

jQuery HTML Table Toolbox

This is a jQuery plugin that adds a simple search widget in a HTML table element.

jQuery Live Editing

TableEditor – Flexible in place editing of TableSorter
The TableEditor plugin provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

jQuery HTML Table Toolbox

This jQuery plugin allow you to add on-the-fly cell editing functionality in your HTML table.
You may configure it to perform AJAX queries and to return dynamic content or error messages.

jQuery HTML Table Toolbox

jQuery Table Tutorials

jQuery Table Manipulation
This tutorial covers one of the most common tasks performed with tabular data and that is sorting. In a large table, being able to rearrange the information that you're looking for is invaluable. Unfortunately, this helpful operation is one of the trickiest to put into action, this tut will show you how.

jQuery HTML Table Toolbox

Drag, drop and sort table rows with jQuery
This tutorial shows you how to add controls to a table that when clicked can move a table row (TR element), up and down within a table.

jQuery HTML Table Toolbox

Displaying and sorting/paging tabular data using the JQuery tablesorter plugin, and query objects
One of the more repetitive tasks a server side developer encounters is displaying the results from a query. This is traditionally in the format of a table that displays the rows of data, along with any other functionality, such as paging controls and sortable headers. This detailed tutorial into using the excellent TableSorter Plugin.

jQuery HTML Table Toolbox

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
On Crazy Egg's pricing table when you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place – There is a number of impressive things happening within this small area. Using CSS, jQuery, and images in clever ways, this thorough tutorial will show you how to recreate these tabular effects.

jQuery HTML Table Toolbox

Click Table Row to Trigger a Checkbox Click
This tutorial explains how to toggle a checkbox within a table row when the user clicks anywhere within the row.
This technique can be implemented with other elements as well, such as clicking on a containing element to trigger the click of an element inside it.

jQuery HTML Table Toolbox

Table Striping Made Easy
The concept of this tutorial is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

jQuery HTML Table Toolbox

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, you will go over four techniques: hover effects, zebra rows, filtering, and sorting.

jQuery HTML Table Toolbox

Resourceful Reading

Tags: , ,

40 comments for „jQuery HTML Table Toolbox
  1. Pablo Lara H on April 13th, 2010 at 3:05 am

    Incredible useful. Thanks.

  2. piyanistll on April 13th, 2010 at 3:41 am

    very usefull thanks lot

    • vivek on January 3rd, 2011 at 2:40 pm

      Hey nice name… unique one

  3. HD Guy on April 13th, 2010 at 4:25 am

    Great resource. I’ll make good use of these in the near future

  4. Patrick Hilker on April 13th, 2010 at 4:58 am

    Very nice list, thank you!

  5. Jordan Walker on April 13th, 2010 at 5:01 am

    Excellent round up of tables that utilize jQuery.

  6. sushilshirbhate on April 13th, 2010 at 5:36 am

    Excellent round up of tables that utilize jQuery.

  7. Lena Tailor on April 13th, 2010 at 5:55 am

    Very Cool collection of jQuery sample you have here.Very essential to us web designers.

  8. Jane Cook on April 13th, 2010 at 8:08 am

    superb list….nice informative post

  9. Chad R. Smith on April 13th, 2010 at 1:20 pm

    This is a really great collection! I thought it was going to be something about how HTML5 is removing the table tag or something. Instead I stumbled upon this treasure. I still use tables in areas where I either get lazy or have tabular data. I’ve used it in a few places on but that’s mainly because I got lazy and wanted to get back to building API’s into the system to help programmers access other API’s faster.

    Just bookmarked this bad boy, nice collection. This is why I love Noupe!

  10. designfollow on April 13th, 2010 at 2:58 pm

    thank you for the great post.

  11. Necrokeeper on April 14th, 2010 at 12:32 am

    Just what I need for my current project, thanks a lot !

  12. bunda on April 14th, 2010 at 1:16 am

    thank you
    I hope someday can implemented some tips in my blog

  13. Tutorial Lounge on April 14th, 2010 at 3:34 am

    really helping stuff for web designers and developers as well, because you sharing some latest techniques. thanks

  14. Saad on April 16th, 2010 at 1:24 am

    thanks a lot guy..really cool stuff. have been looking for it from long time….loved the Flexigrid and Crazy Eggs especially. got so much idea for my next project. thx :)

  15. Ajaxdude on April 16th, 2010 at 5:36 am

    great list , thanks so much

  16. Felix Nagel on May 16th, 2010 at 6:07 am

    Perhaps you would like to take a look on my accessible sorted table Widget compatible with jQuery UI CSS?


  17. Gaurav Bhutt on May 25th, 2010 at 1:19 am

    hi bunda maar le meri bund

  18. Michael Pehl on May 27th, 2010 at 2:39 pm

    Very cool collection. Will be useful for me very soon :)

    Thanks for sharing :)

  19. Pankaj on August 18th, 2010 at 2:25 am

    Great resource. I’ll make good use of these in the near future

  20. shantesh on August 28th, 2010 at 12:02 am

    awesome collection..very useful

  21. Suzan Gheewala on October 26th, 2010 at 7:26 am

    I would like to be a volunteer writer in your website would that be okay?

  22. Mary J. Lorenzo on November 17th, 2010 at 6:45 am

    I am attempting to add your website’s Rss to my own feed reader but it is not working effectively, you could wish to check it out to ensure its working effectively.

  23. Brett Widmann on December 4th, 2010 at 8:08 pm

    This is an excellent set of tables. Thanks for sharing!

  24. prajeeth on December 9th, 2010 at 7:50 am

    excellent collection kudoos to the one behind

  25. Sarfraz Ahmed on December 15th, 2010 at 8:59 am

    I have also put up one jQuery plugin for styling tables:

  26. tcarnevale on December 16th, 2010 at 11:40 pm

    An incredibly thorough and useful resource.


  27. testosterone supplements on January 18th, 2011 at 8:40 am

    This blog is extremely cool! How did you make it .

  28. Joel Newsom on February 15th, 2011 at 8:02 pm

    There is clearly a lot to realize about this. I believe you made various nice points in features also.

  29. Atom on April 15th, 2011 at 12:10 pm

    Good list. I am looking for another feature, but still like what I saw.

  30. Manikandan on August 19th, 2011 at 12:52 pm

    Hi … I need to create a table using jquery with adjustable columns (other than flexigrid)… I couldn’t find the link for INGRID here.. please help me , if yuo know…

    If possible, give the link……….thanks…

  31. Mani on September 20th, 2011 at 8:44 am

    hi ….
    I am in need of create a data grid using jquery with single row with empty text boxes …
    if i enter submit button or tab key , add another row .

    Is that possible ?
    plz help me out from this problem ….


  32. Grego on November 10th, 2011 at 8:39 am

    WOW…! Nice collection. Will incorporate into apps currently being developed. Thanks.

  33. Dipaks on January 18th, 2012 at 6:59 am

    Thanks for sharing!

  34. kimo on March 1st, 2012 at 7:29 pm

    Thanks your this beautiful post

  35. Rafael on March 15th, 2012 at 7:26 am

    Great collection. Thanks for it. Bookmarked.

  36. umesh shejole on October 3rd, 2012 at 7:35 am

    Like to use HTML tables in website work………

  37. leonardo on November 21st, 2012 at 2:31 pm

    very nice this post, thank you so much.
    one strong hug here the brazil

  38. John on February 22nd, 2013 at 4:59 am

    Its an awesome information. I would surely like to use it in practice.