Nousheen Aquil November 15th, 2010

Useful jQuery Plugins to Enhance HTML Tables

This post contains 40 varieties of functional jQuery tables plugins that let you achieve the maximum functionality and flexibility that you cannot get with the classic ways of using HTML tables. With the right jQuery plugin, you can create dynamic tables in which users can identify and sort out all the sections they want. These plugins will help you in creating user friendly and dynamic tables with ease. [fblike]

Useful Tables jQuery Plugins

Visualize: Accessible Charts & Graphs from Table ElementsDownload ) 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.

Screenshot

Using jQuery To Manipulate and Filter Data ( Download ) 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 tutorial, author will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Screenshot

TableRowCheckboxToggle ( Demo | Download ) It 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.

Screenshot

Tablesorter ( Demo | Download ) 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.

Screenshot

Grider ( Demo | Download ) 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.

Screenshot

Tablify - Fancy Tables ( Demo | Download ) Tablify is a cross-browser JQuery plugin built to extremely simplify beautifying of standard HTML tables. Its advanced configuration options allow all the styles to be completely redesigned according to the website look and feel. Comes with 3 default styles, and 5 more styles in supplied extension.

Screenshot

Creating a “Filterable” Portfolio with jQuery ( Demo | Download ) If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, you can learn how to make “filtering by category” a little more interesting with just a little bit of jQuery.

Screenshot

Table Drag and Drop JQuery plugin ( Demo | Download ) Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

Screenshot

List Reorder ( Demo | Download ) List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.

Screenshot

ENHANCED TABLE, JQUERY-UI THEME ROLLER READY ( Demo | Download ) Author have written this jquery plug-in to improve basic usability for a common html table element, which can be the foundation for a larger control or functions applied to the table. This includes the ability to navigate through the rows of a the table by using either the mouse or the keyboard and select one or many rows.

Screenshot

DRAGTABLE ( Demo ) Maybe you want to sort the columns ascending/descending by clicking into the table-head. No problem! Use a handle to drag the rows.

Screenshot

Table Pagination ( Demo | Download ) This jQuery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

Screenshot

ColumnHover ( Download ) A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

Screenshot

uiTableFilter ( Demo | Download ) jQuery plugin for filtering table rows:

Screenshot

PicNet Table Filter ( Demo ) The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

Screenshot

NReco jSquared ( Demo | Download ) This plugin allows you to organize advanced search user interface like in Google Squared.

Screenshot

HeatColor ( Demo | Download ) 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.

Screenshot

Expand table rows with jQuery - jExpand plugin ( Demo | Download ) 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.

Screenshot

DataTables ( Demo | Download ) DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Screenshot

Scrollable HTML table plugin for jQuery ( Demo | Download ) This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary.

Screenshot

Flexigrid ( Demo | Download ) Lightweight but 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.

Screenshot

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

Screenshot

IngriddDownload ) Datagrids don't have to be difficult to use anymore - say Hi to Ingrid! Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

Screenshot

jQuery ColumnManager plugin ( Download ) A jQuery-plugin that toggles the visibility of table columns as well as supports the tables with colspans and rowspans.

Screenshot

FireScope Grid ( Demo | Download ) FireScope Grid is an open source (GNU Public License, v2) jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used. Included in the plugin is a navigation bar that is automatically appended at the beginning or end of a table that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.

Screenshot

jqGrid ( Demo | Download ) jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

Screenshot

TableFilter ( Demo | Download )

Screenshot

TinySort ( Demo | Download ) TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of its children.

Screenshot

Table Drag and Drop JQuery plugin ( Demo | Download ) 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.

Screenshot

Fixed Header Tables ( Demo | Download ) a jQuery plugin by Mark Malek:

Screenshot

KeyTable ( Demo | Download ) KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

Screenshot

TableEditor ( Demo | Download ) TableEditor 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.

Screenshot

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

Screenshot

jGridEditor ( Demo | Download ) This jQuery plugin allow you to add on-the-flight cell editing functionality in your table You may configure it to perform AJAX queries and returning changed content or error messages.

Screenshot

HTML Table to CSV ( Demo | Download ) This is a small JQuery utility which allows you to export any HTML table as CSV file. It's a very handy tool to use specially during development of reporting projects. It is also useful when you have some 3rd party JQuery table search plugin attached to your table.

Screenshot

FLOATING HEADER PLUGIN ( Demo ) 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 the settings forceClass and markingClass.

Screenshot

kiketable.rowsizable ( Demo | Download ) This plugin, applied to a number of HTML tables, provides the behaviour of resizing their rows by clicking over a handler/ helper.

Screenshot

Animated table sort ( Demo | Download ) This plugin allows you to animatedly sort a table based on a column's s, or on the content/value of a child/descendant element within those s. The various s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Screenshot

READABLE TABLESDownload ) A little plugin to highlight rows and columns on tables making them easier to use if you have large amounts of data... So something small for something large!

Screenshot

pfSelect - click drag select for huge datasets ( Demo | Download ) This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class "selectable") and doesn't calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.

Screenshot

Sortable Tables ( Download ) jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).

Screenshot

jQuery Thead - Visible table headers ( Demo | Download ) The jQuery Thead plugin simplifies the navigation in tables that have lots of rows and require scrolling. It enforces the visibility of the table header and ensures that the column names are always accessible for the user.

Screenshot

(ik) [fblike]

Nousheen Aquil

Nousheen Aquil is a web graphic designer. She loves photography, drawing and painting. She also is a contributing member of WebdesignCore , a platform that focuses on free web resources and inspiration for designers and developers.

18 comments

  1. Thank you for this wonderful article! It has been extremely insightful. I wish that you will continue posting your knowledge with us.

  2. jqGrid is by far the best grid component. It supports trees, many types of edits, sorting, dragging, etc.

    Check my site, it’s all built using jqGrid tables.

Leave a Reply

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