Most of us use the classic HTML Tables to display data in an organised manner. But now you can add style and flexibility to your tables with these wonderful jQuery Plugins for Tables.

1. TablePager

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.

2. TablePagination

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.

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

How to use it?
Use it with default options (colorizes a row)
$('#yourTableId').colorize() ;

4. Column Hover

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

5. Column Manager

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

6. Table Hover

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

7. Table row drag and drop

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.

8. UI Table Filter

Allows table rows to be filtered (made invisible).

9. rowSelect

Simple little plugin to allow selecting of rows (single or multi) in a table.

10. UI Table Edit

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.

11. treeTable

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.

12. tableRowCheckboxToggle

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.

13. NReco jSquared

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.

14. kiketable.rowsizable (aka Grid Row Sizing)

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

15. graphTable: graph data from HTML table using flot

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

16. Readable Tables

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.

17. HeatColor

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.You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work. It can find the min and max values of the desired elements, or you can pass them in manually.

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

19. csv2table

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

20. jQuery table2CSV

This plugin provides conversion from a html table to a csv string. There are two parameter only: callback and delimiter. Delimiter parameter provides which column delimiter should be used in the csv string - default is ",". The callback parameter(a callback function) contains one argument which is the csv string so you can doa nything you want with the generated string.

---

Add this page to your favorite Social Bookmarking websites