10 jQuery Plugins for HTML Tables

Share this article

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

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

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

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

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week