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.
Useful Tables jQuery Plugins
Visualize: Accessible Charts & Graphs from Table Elements ( Demo | Download )
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.
Using jQuery To Manipulate and Filter Data ( Demo | 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.
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.
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.
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.
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.
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.
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.
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.
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.
PicNet Table Filter ( Demo | Download )
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.
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.
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.
DataTables ( Demo | Download )
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.
Ingridd ( Demo | Download )
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.
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.
jqGrid ( Demo | Download )
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.
KeyTable ( Demo | Download )
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.
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.
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.
FLOATING HEADER PLUGIN ( Demo | Download )
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.
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.
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.
Sortable Tables ( Demo | 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).
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.
About the Author
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.