When I was working for the last client, I had to make a table sortable. I knew I saw a jQuery plugin do that somewhere but I didn’t know exactly where so I started searching. In my search, I’ve discovered a lot of jQuery plugins that did that and besides this action, a lot of them who would improve the functionality of a regular table making it dynamic and more efficient. I’m sharing these plugins here with you, 28 of them and hope they’ll be useful for your current or future web projects.
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. It has many useful features including:
- Multi-column sorting
- Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
- Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via widget system
- Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Small code size
- Variable length pagination
- On-the-fly filtering
- Multi-column sorting with data type detection
- Smart handling of column widths
- Display data from almost any data source
- Scrolling options for table viewport
- Fully internationalisable
- jQuery UI ThemeRoller support
- Rock solid – backed by a suite of 1400+ unit tests
- Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
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.
Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.
- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON[new])
- Show/hide columns
- Toolbar (new)
- Search (new)
- Accessible API
- Many more
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.
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.
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.
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.
A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!
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.
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.
Simple little plugin to allow selecting of rows (single or multi) in a table. Add an attribute on the row to move values into the attached input element.
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.
This plugin allows you to organize advanced search user interface like in Google Squared.
- This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing rows by clicking over a “image handler”.
- Based mostly in CSS.
- FAST, non-intrusive (with DOM), and for HUGE tables (intranet applications, as well as for internet)
- Slide animation for IE.
This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.
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.
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 that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability.
TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.
MooTables are created from standard html tables, with this syntax: new MooTable ( element, options );
Because they are made from standard tables, they degrade nicely.