Advertisement

Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table.

But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, filter and manipulate your data in table.

1. DataTables

DataTables is very powerful jQuery plugin which offer a lot of features. For example, you can have on-the-fly filtering, ajax auto-loading of data, pagination, sorting columns, highlight sorted columns, extensive plug-in support, themeable by CSS or jQuery UI ThemeRoller and also a complete documentation.
jQuery DataTables plugin

2. uiTableFilter

uiTableFilter is a jQuery plugin for filtering table rows. The author shows a detailed example on how to implement the filter function for your table together with the plugin.
jQuery uiTableFilter

3. Scrollable HTML Table

Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.
Scrollable HTML table plugin for jQuery

4. Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. It supports multi-column sorting, cross-browser and easily extensible via its widget system.
jQuery Tablesorter plugin

5. Flexigrid

Flexigrid is a lightweight Web 2.0 Javascript Grid for jQuery. It has a lot of cool features such as theming, paging, toolbar, search, sortable, ajax loading data source, resizable columns, height and width.
flexigrid

6. 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.
jQuery HeatColor plugin

7. JQTreeTable

With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.
JQTreeTable

8. Ingrid

Ingrid is yet another jQuery Datagrid plugin. It has features like column resizing, paging, sorting, row and column styling and more. The author’s website provide great documentation on how to get started with this plugin.
Ingrid

9. jQuery ColumnManager plugin

columnManager is a jQuery plugin that able to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. This is a very tiny and lightweight plugin which is only 3.6kb packed.
jQuery Column Manager plugin

10. jQuery treeTable

jQuery treeTable is similar with JQTreeTable, which is able to display a tree in a table. This plugin keeps the HTML documents clean and will degrade nicely when Javascript is disabled in the browser.
jQuery treeTable plugin

11. CSV2Table

CSV2Table will load a CSV file and creates a table with contents from the CSV files.
CSV2Table

12. Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.
Table Pagination

13. jQuery TableRowCheckboxToggle

This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.
jQuery TableRowCheckboxToggle Plugin

14. Table Drag and Drop jQuery plugin

This simple plugin allows user to reorder rows within a table usingd rag and drop. Individual rows can be marked as non-draggable and/or non-droppable.

15. uiTableEdit

uiTableEdit is another cool jQuery able plugin from Greg Weber, the author for uiTableFilter. uiTableEdit will makes the tables editable by users.