30 Amazing jQuery Plugins To Play With Tables

Play with tables and present table data as you wish with these Table Enhancement jQuery Plugins.

graphTable: graph data from HTML table using flot

graphTable provides the ability to graph the data in a simple HTML table using flot.

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 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 setting the option forceClass to true.

HeatColor jQuery Plugin

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.

Readable Tables – jQuery Plugin

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! Has two types of highlighting, simple and complex. Simple just highlights the row; complex will highlight rows, columns and column headings.

kiketable.rowsizable (aka Grid Row Sizing) jQuery Plugin

This plugin, applied to a number of HTML tables, provides the behaviour of resizing their rows by clicking over a “handler/ helper”. I have change the name: kike (my nickname, means, my version, not an official one), table (it remains an html Table), rowsizable (this plugin makes rows to be resizable by their height).

NReco jSquared – jQuery Plugin

jSquared is 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.

tableRowCheckboxToggle jQuery Plugin

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. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it’s considered checked on page load.

treeTable jQuery Plugin

The treeTable plugin allows you to display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.

UI Table Edit jQuery Plugin

Make an html table editable by the user, user clicks on a cell, edits the value, then presses enter or clicks on any cell to save the new value.

rowSelect jQuery Plugin

This rowSelect jQuery Plugin is a Simple little plugin to allow selecting of rows (single or multi) in a table.

UI Table Filter – jQuery Plugin

The UI Table Filter – jQuery Plugin allows table rows to be filtered (made invisible).

Table row drag and drop jQuery Plugin

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.

Table Hover jQuery Plugin

Based on the Column Hover plugin adding support for row highlighting and fixing the current highlight when clicking inside a cell.

Column Manager – jQuery Plugin

Allows to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit (supporting tables with colspans and rowspans).

Column Hover jQuery Plugin

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

Colorize – jQuery Table Plugin

Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

TablePagination – jQuery Plugin

TablePagination is a plugin so that you can auto add a pagination element to the bottom of a html table. There are a variety of settings to customize the elements.

TablePager – jQuery Plugin

Creates pagination for large tables. tablePage hides all rows in the tbody of your table and displays the rows in the current “page” of the table. tablePager also binds events and data to specified elements in the tfoot area of the table for paging and information display.

csv2table jQuery Plugin

This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.

Animated Sortable Data Table jQuery plugin – jTPS

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability.

Table animations in jQuery

If you ever tried to do some animation of tables or table rows with jQuery you will have found that this is not an easy task. The primary reason of animation ‘not working’ in jQuery for these kind of objects is that these elements are not block-level elements. I have come up with one solution to aimate tables using jQuery.

Adding Table Rows With jQuery

Recently I needed a way to click a button and add a new row to a table with an animation using jQuery for people to add new data for a section. Simple right? Well I set up my table with a blank row at the bottom that I hid with CSS, and then when I press a button it clones that row it and puts it at the top with a .slideDown() animation.

Detailsrow – jQuery Plugin

Jquery.detailsrow adds a subrow to each row dynamically which can be toggled on or off. Data is loaded using ajax based on the arguments passed in the post parameters.

Flexigrid for jQuery

A 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 to load the content.

ActsAsTreeTable jQuery Plugin

With this plugin you can display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.

FireScopeGrid jQuery Plugin

FireScope Grid is an open source 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.

BS Table Crosshair – jQuery Plugin

Automatically for each table considers the focus just with assigning an ID to the table.

Alternate – jQuery Plugin

Assign alternating class names to selected elements (such as
or

etc) to allow CSS assignment of colors or other styles of your choice. Excellent plugin for alternating row colors in tables!

imList – jQuery Plugin

imList is a JQuery plugin that began as a way to ajaxally create html tables using JQuery. After creating the table plugin, I realized that I could apply much of the same functionality to any type of list that is displayed on a web page.

grider – jQuery Plugin

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, with very little configuration.