25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables

March 29, 2012 · 26 comments

by Lars


Most people have turned their back to tables for implementing web page layouts. This is because tables compared to table-less layout beased on CSS Positioning has several disadvantages. But tables are not useless at all! They should just be used to render tabular data as they originally was designed for. By adding a bit of jQuery you will be able to create very useful solutions with html tables that your users will find easy and intuitive to use.



Tables can be useful in many ways but some types of content really stand out when presented using jQuery Slider or jQuery Carousel plugins. Choosing the right tools for the task at hand is important.

PicNet JQuery Table Filter

This plugin adds a row to the section of a table and adds filters that allows real time filtering of tabular data. Please see the home page for full details.




A plugin to sort child nodes by (sub) contents or attributes. Very useful for ordering unordered lists or tables, but works on any type of node. Download it to get documentation and examples.It doesn’t get easier to sort fx. listsbut it is also possible to apply more complex sorting logic:


Graph data from an HTML table using jQuery and flot


Draw graphs from html tables. graphTable() takes up to two objects as arguments: the first is an object with the arguments for graphTable; the second is an object with arguments to be handed off to flot



If you’ve used the .NET Framework, chances are you’ve also used LINQ. The features found in LINQ allow you to work with collections in-memory to query, sort and manage data, much like you would with a SQL command. LINQ also allows you to connect directly to a database to manage records all within your IDE.

jLINQ works like .NET LINQ and lets you use commands to query collections that are in memory. jLINQ copies many of the same commands you find in LINQ like skip or take along with certain aggregate functions like sum.

Floating header plugin


A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by setting the option forceClass to true.



jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.



columnHover lets you highlight whole columns in a table when hovering over them.

Scrollable HTML Table


Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.



DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.


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.


Fixed Header Tables


Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.

Colorize – jQuery Table Plugin


Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.



Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.

jQuery TableRowCheckboxToggle

This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.


Striping Your Tables the OO Way


This demonstartion is an adaptation of a well written snippet of code by Mathew Pennell – “Striping Your Tables the OO Way”



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


With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.jqtables



Simple little plugin to allow selecting of rows (single or multi) in a table.

treeTable 2.0


treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.



Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.

NReco jSquared


jSquared is a jQuery plugin that enables ability to add/remove HTML table columns and rows ‘on-the-fly’. Its functionality is very similar to Google Squared UI and useful for building advanced search interfaces.

Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.




columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.

Table Drag and Drop


Table Drag and Drop 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.



Chromatable allows you to easily create scrolling tables with fixed headers.



uiTableFilter is a plugin that makes filtering table rows very easy.

We have a lot of good articles for you. If you want to make your life a little bit easier and create automated content you should have a look at WP Robot for WordPress. We like to showcase and inspire you with nice things like this  beautiful Epiphone Les Paul vintage Sunburst. Please have a look.

Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.

{ 11 comments… read them below or add one }

cheap custom jerseys May 19, 2011 at 10:45 am

Highly Useful jQuery Plugins Bringing Life back to HTML Tables


Jcoder February 24, 2011 at 4:18 am

Stay away from jExpand!!!
It’s a scam !!


namora February 6, 2011 at 12:06 pm

nice.. tq


Michael Pehl May 16, 2010 at 4:16 pm

Bookmarked :)


Arshad February 7, 2010 at 10:34 am

Good collcetion of table plugins and codes



wespai December 28, 2009 at 8:18 am

thx collect some to



SMiGL December 22, 2009 at 8:35 pm

Good collection


jlopezto December 22, 2009 at 8:09 am

Very very useful. Thanks for this post


Mads December 21, 2009 at 8:20 pm

Where’s jqgrid? Probably the most flexible and advanced table plugin for jquery…


Taha December 21, 2009 at 6:10 am

thanks very unique and useful post. It will help me a lot.


tripwiremag December 21, 2009 at 8:09 am

@Taha, Your welcome. Great that you find it useful!


Leave a Reply

Your email address will not be published. Required fields are marked *

{ 15 trackbacks }

Previous post:

Next post:

Web Analytics