10 jQuery Plugins for HTML Tables

Sam Deering

Some of you might have bumped into these tables long time ago but for those who haven’t yet, here’s the list for you. Most people may have turned their backs to tables for implementing web page layouts because tables compared to table-less-layout-based on CSS positioning has several advantages. But tables are not totally useless! By adding a bit of jQuery you will be able to create very useful solutions with HTML tables that your users will find it easy and intuitive to use… probably still only use them for data though! :P

This is in addition to some previous posts:


1. 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.
PicNet-JQuery-Table-Filter.jpg
Source


2. TinySort


A plugin to sort child nodes by (sub) contents or attributes. It is very useful for ordering unordered lists or tables, but works on any type of node.
TinySort.jpg
Source


3. 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.
Graph-data-from-an-HTML-table.jpg
Source


4. 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.jpg
Source


5. 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 head tag as the header for a table.
floating-header.jpg
Source


6. columnHover


Lets you highlight whole columns in a table when hovering over them.
columnHover.jpg
Source


7. Scrollable HTML Table


A plugin for jQuery able to convert a table into scrollable.
Scrollable-HTML-Table.jpg
Source


8. HeatColor


We have posted heatcolor before but it’s so good. 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.
HeatColor.jpg
Source


9. Fixed Header Tables


Takes valid table HTML and builds a fixed header and scrolling body with optional footer.
Fixed-Header-Tables.jpg
Source


10. NReco jSquared


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.
NReco-jSquared.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.