Nov 15

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.

Jquerytable32 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable110 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable10 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable16 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable29 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable42 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable2 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable3 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable4 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable5 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable61 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable7 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable8 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable9 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable23 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable11 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable12 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable13 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable14 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable15 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable17 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable18 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable19 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable20 in Useful jQuery Plugins to Enhance HTML 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.

Jquerytable21 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable22 in Useful jQuery Plugins to Enhance HTML Tables

TableFilter ( Demo | Download )

Jquerytable24 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable25 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable26 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable27 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable28 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable30 in Useful jQuery Plugins to Enhance HTML Tables

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

Jquerytable31 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable33 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable34 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable35 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable36 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable37 in Useful jQuery Plugins to Enhance HTML Tables

READABLE TABLES ( Demo | Download )
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!

Jquerytable38 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable39 in Useful jQuery Plugins to Enhance HTML Tables

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).

Jquerytable41 in Useful jQuery Plugins to Enhance HTML Tables

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.

Jquerytable40 in Useful jQuery Plugins to Enhance HTML Tables

(ik)

Tags: ,

15 Responses, Add Comment +

  1. Who Knows 15 November 2010

    Nice seems useful :)

  2. Ryan 15 November 2010

    I really like Datatables, it does about everything you need with tables. I highly recommend it!

  3. everlearner 15 November 2010

    Awesome.
    I really appreciate the plugins developers.
    Also thanks you very much the author for this collections.

  4. Simon 15 November 2010

    Great list, point for Flexigrid and jqGrid, which is an absolute leader in “enhancing tables”, very powerful and easy to customize – I’ve used it in many projects, including IzzyHelp for clear listing of support tickets.

    Good work :)

  5. GamingForever 15 November 2010

    That’s some very great information!

  6. Curtis Scott 15 November 2010

    +1 for Datatables! I really like Visualize also. Great round up, thanks for sharing!

  7. anschauung 15 November 2010

    I’ve used a lot of these, and I consider Datatables to be the best by far. It does nearly everything all the other entries do, except for Visualize.

  8. queenlife 16 November 2010

    Really informative

  9. Candace 16 November 2010

    Very Nice

  10. Sahan 16 November 2010

    Thanks a lot for the roundup.

  11. Paul 16 November 2010

    Although it’s not a jquery plugin, but this javascript grid has very powerful features: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

  12. Gus Guynup 19 November 2010

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

  13. dave 23 November 2010

    Thanks for the post, after reading the comments im gonna try using datatables. Thanks again.

  14. Thomas 3 December 2010

    The “Tablesorter” http://tablesorter.com/docs/#Demo is really cool!

  15. Insucons 1 April 2011

    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.

Trackbacks

Leave a Reply

Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!