General, Tools

All About Tables – jQuery Plugin

Jun 21, 2009 insic 25 Comments

jQuery Table plugins

Yes HTML table tag is not recommended in designing your websites anymore but it is still very useful especially in displaying a tabular data. In this article I will be featuring a list of jQuery plugins that are utilizing the html table tag.

1. uiTableEdit

A jQuery plugin for making tables editable by users. A user clicks on a cell, edits the value, then presses enter or clicks on any cell to save the new value.

Sample Code

2. Flexigrid

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.

Features:

  • 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)
  • Paging
  • Show/hide columns
  • Toolbar
  • Search
  • Accessible API

Sample Code

3. Table Drag and Drop JQuery plugin

Drag and drop table rows to reorganise data. onDragStart and onDrop config options allow you to integrate this with Ajax calls to update the server.

Sample Code

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. 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 for ROWSPAN and COLSPAN on TH elements
  • 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

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

Options defaults values:

Getting csv string and sends it with ajax:

6. jQuery table search

This plugins adds a search feature in a table element. The select box is filled with all column headers names(this way the user can select on which column the search is going to be executed).

The texts and messages of errors(data not found and empty field) can be customized.

All fields are inserted into a div above the table, using this id: “table-search-container”

If esc key is pressed when the input field is focused, all the rows will be displayed again.

The error messages are displayed bellow the fields, in a span tag with a class called “table-search-error-message”

The ignore array(option param) is used to ignore search in specified columns, just insert the text of the column header to ignore that column on the select box(not case sensitive)

Default option values:

Usage

Simple usage with defaults parameters:

Setting error messages:

Setting the fields label:

Ignores column called “Name”:

The table structre should contain thead(with th) and tbody sections as bellow:

7. csv2table

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

8. Detailsrow

Dynamically add more info to your table
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. The post parameters vary from row to row based on defined attributes in the html like ID or URL.

9. Ingrid

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.

More information and plugin demo here

10. jqGrid – jQuery Grid Plugin

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.

Sample Code:

More information and example can be found here.

11. DataTables

Im sorry to all DataTables fan for not including this awesome plugin. Thank you for letting me know this tool. I have take some time looking at this plugin and I found it awesome. So for those who dont know it yet you better try it.

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

Some Features

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Fully internationalisable
  • It’s free!
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Extensive plug-in support Sorting, type detection, API functions and pagination
  • Fully themeable by CSS
  • Solid documentation

That’s all I found promising. If you want to recommend another plugin related to above list, drop me a comment.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • arnold

    thanks! this might be helpful someday…

  • http://asiangirlnextdoor.blogspot.com/ Katty

    FlexiGrid is seems powerful :) Nice article

    • rockey

      ya this really nice

  • http://desizntech.info Kawsar Ali

    Some useful stuff here. Not all tables are evil ! Good post

  • http://www.designstudio16.com saurabh shah

    So finally new post on Insic blog .. cool ! :)
    really like the post insic … nice post …

  • Pingback: The Technology Post for June 22nd, 2009 - Jason N. Gaylord's Blog

  • Pingback: The Technology Post for June 22nd, 2009 | rapid-DEV.net

  • Pingback: I love .NET! » Blog Archive » The Technology Post for June 22nd, 2009

  • Scrunch

    How about datatables?

    http://www.datatables.net

    IMHO it’s the best :)

  • awake

    leigeber’s table sorter is pretty sick also… (it’s not jquery based but it’s extremely light)

    http://www.leigeber.com/2009/03/table-sorter/

  • http://www.jsxtech.com Jaspal Singh

    I love jquery, wonderful jquery stuff, thanks for sharing.

  • http://farinspace.com Dimas

    Flexigrid is awesome, very nice demo. What’s your favorite insic?

  • http://www.djoh.net/inde Djoh

    And once again datatable is missing !

    http://www.datatables.net is simply the greatest (jQuery) plugin for tables. So many features are there !

    Anyway, I’m just advertising for a tool that I’m using. Every day. :)

  • http://blog.insicdesigns.com insic2.0

    To all dataTables fan I have updated my post added datatables in the list. Thanks for letting me know this awesome plugin

  • Pingback: All About Tables – jQuery Plugin | INSIC 2.0 Web Development & Design Blog | Squico

  • http://www.angrysam.com David Levin

    JQuery is awesome. Thanks for the recommendation of “Data Tables”. I do wish there was a plugin that would allow drag and drop sorting just like Netflix uses on their queue page.

  • http://denbagus.net denbagus

    nice information …thank you

  • http://wwebz.com wwebz

    Hey Thanks for sharing..last night i had fire around 200 google query for data grid with jquery…and today i got your post somebody posted in twitter….Thanks

  • http://night-fairy-tales.com/ SM

    Helpful post. Thanks

  • http://www.gameranx.com/ Atul Kash

    Nice alternative! Will give it a shot very soon. Thanks for sharing!

  • Pingback: 網站製作學習誌 » [Web] 連結分享

  • http://www.dzinestand.com/ shawn

    Nice Post..This is really helpful for me.Great one man.Thanks for good post.

  • http://www.iphone4case.tv/ James

    Brilliant! Took me 3 days to find this jQuery plugin. Any thoughts about the loading time of the page?

  • http://www.iphone-4g-case.net Gray

    This is an awesome plugin

  • http://www.uciama.com uciama

    the plugin made my wp blog so sleek