 |
by Nousheen Aquil
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.
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.
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.
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!
uiTableFilter ( Demo | Download )
jQuery plugin for filtering table 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.
NReco jSquared ( Demo | Download )
This plugin allows you to organize advanced search user interface like in Google Squared.
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 )
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.
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.
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.
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.
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.
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.
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 )
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.
TableFilter ( Demo | Download )
TinySort ( Demo | Download )
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of its children.
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.
Fixed Header Tables ( Demo | Download )
a jQuery plugin by Mark Malek:
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.
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.
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.
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.
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.
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.
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!
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.
(ik)