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

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. Want more post like this one?

• 120+ Javascript, Ajax, jQuery Mega Toolbox
• 60+ Must Have jQuery Toolbox
• Toolkit with 6 Awesome jQuery User Interface components

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

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.

TinySort

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:

$(”li”).tsort();
$(”ul#people>li”).tsort();
$(”ul#people>li”).tsort(”img”,{order:”desc”,attr:”alt”});

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

jLINQ

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

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

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

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

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

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

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

JQTreeTable

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

rowSelect

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

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

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

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

uiTableFilter

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.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.