Smashing Magazine we smash you with the information that will make your life easier. really.

Data Grids with AJAX, DHTML and JavaScript

By Smashing Editorial, May 30th, 2007 in Developer's Toolbox | 111 Comments | Forum

In order to be presented effectively, information needs structure. The more intuitive data structure is designed, the better users can understand the content. Consequently, the data can be scanned and extracted in a more meaningful and systematic way.

Table is a perfect example of a well-structured data presentation, which is easy to analyze and easy to handle. Used for its original purpose - to present data, not to style it -, it can convey ideas effectively. And this is what most of us are actually trying to achieve in the Web.

Furthermore, the user experience can be greatly enhanced with further optional functionalities - such as sorting, filtering and fast editing. What solutions can you use to provide them in your tables?

Few months ago we’ve covered the basics of semantically correct CSS-based tables - among other things, we’ve presented solutions for Zebra tables and few tables with sorting and filtering functionalities; but we’ve missed some important ones.

Now it’s time to get this right and list the rest - 17 free solutions for data grids, developed with AJAX, DHTML and/or JavaScript. In a brief and descriptive overview.

Data Grids in an Overview

1. ExtJs Grid with Expander Rows, Collapse and Force Fit, Framed with Checkbox Selection and Horizontal Scrolling as well as standard Panel features such as framing, buttons and toolbars. (Thanks, Lucian Lature!).

2. dhtmlxGrid shows flexible and solid structure and can be presented in a variety of ways. Numerous skins are available; also complex, paginated table structures can be easily created. The scripts are released under the GPL; support costs money.

3. Phatfusion Sortable sorts the columns in a table and filters its elements. (Thanks, Boris).

4. Mootable Sorting. Shows an example that highlights the table row and column of the cell you are hovering over.

5. Elite Zebra Tables - Zebra tables with sorting functionalities.

Screenshot

6. PHP Live Datagrid, based upon the XAJAX Library. Can be used for large databases, as shown in example containing over 500 pages. The table is paginated and can be browsed from page to page.

Screenshot

7. The Table Kit is based upon the Prototype Framework. The columns can be sorted, selected and the rows can be scaled. A tutorial related to table sorting ith Prototype is also provided.

8. How to paginate, sort and search a table with Ajax and Rails. A comprehensive tutorial explains the basis of sortable tables with Ruby on Rails.

9. Unobtrusive Table Sort Script.

10. Yahoo UI Library’s DataTables. Various examples with various demos in a brief overview. The scripts aren’t necessarily visually appealing, however they deliver some functionalities one won’t find in similar scripts. The example shown below has sorting and editing functionality.

11. Standardista Table Sorting

12. Sortable Tables by WebFX.

13. SortedTable

14. Mootols Table Row & Column Highlighting. Shows an example that highlights the table row and column of the cell you are hovering over.

Data Grids: Templates and Layouts

The following scripts offer basic sorting functionalities and can be used as templates for your projects.

Professional Solutions

Nice to know, quite expensive to have. Professional solutions can be quite expensive, as shown by Active Widgets, (which costs 395,- USD and also includes some further applications) and Editable JavaScript TreeGrid. However, both offer exquisite and quicks solutions. The latter enables you to create huge tables and handle the information efficiently.

Published in Developer's Toolbox, May 30th, 2007
Tags: ajax, data, dhtml, grids, javascript, prototype, ruby, tables

1.

Pavel Ciorici (May 30th, 2007, 10:20 pm)

Nice article!
2.

Credit (May 30th, 2007, 10:20 pm)

I already know that kind of DHTMLXGrids. It’s very impressive, but I nevr try to use it.
3.

Daniel Anderson Tiecher (May 30th, 2007, 10:26 pm)

I wonder where do you guys find all this great articles. Thanks, as usual!
4.

Lucian Lature (May 30th, 2007, 10:58 pm)

And very important, how could you forget about next ExtJS’s grid implementation
Link [extjs.com] ?… Aren’t they just great ?…Please include that in your list!…
5.

Boris (May 30th, 2007, 11:08 pm)

Great list, but you missed that I included in my list of 33 plugins for Mootools (Link [gueschla.com]).
- Mootable, by Owl Watch (Link [joomlicious.com]).
- Sortable Table, by Phatfusion (Link [www.phatfusion.net]).
6.

Sigurd (May 30th, 2007, 11:13 pm)

and what’s about ExtJs Data Grid, it’s very powerfull
7.

Sigurd (May 30th, 2007, 11:47 pm)

You posted sample of grid which is not avaliable for public, only for premium memebers. But soon it should be released. Btw it’s free
8.

Thomas Hansen (May 31st, 2007, 12:14 am)

You also have ours (which actually isn’t a Grid but just the possibility to Ajaxify mostly any ASP.NET controls and thereby build your own 100% the way you want it)
Here’s a couple of samples of it in use:
Link [ajaxwidgets.com]

Link [ajaxwidgets.com]

:)

.t
9.

manugoel2003 (May 31st, 2007, 1:29 am)

sigurd - what do you mean by saying that the sample is not available for public?….. I can see it in action…. maybe u mean that the library is not released for public yet…. let me clarify - current stable release is 1.0.1, completely free to use…. the example was made in ver 2.0, which is still in pre-alpha stage and thus not open to public at this stage
10.

Ryan Scherf (May 31st, 2007, 2:17 am)

Link [www.ryanscherf.net]

I wrote my own long ago. Damn you Mootools!
11.

eka808 (May 31st, 2007, 3:10 am)

usefull ^^ thank’s
12.

Mikk (May 31st, 2007, 3:44 am)

Forgot Nitobi’s grid, which although somewhat buggy at the moment, is still quite good. Link [www.nitobi.com]
13.

Ronny (May 31st, 2007, 4:39 am)

Just what I need, and exactly at the right time :D
14.

Famous Photos (May 31st, 2007, 4:44 am)

nice. 3. is ugly as hell… is any of these working with smarty?
15.

Sikifon (May 31st, 2007, 5:34 am)

I think ExtJS is the best solution !
16.

faizan (May 31st, 2007, 11:43 am)

thank you bro for this nice information. today i learn a new things :)
17.

andregiant (May 31st, 2007, 12:24 pm)

THis is great for Room Booking …– column and row!
18.

Lucian Lature (May 31st, 2007, 12:54 pm)

@manugoel2003 , @sigurd

Jack Slocum (http://www.jackslocum.com/blog/index.php), the author of ExtJs, assured me that the link if open for public, so “It’s ok. The demo is up there for all to see. :)” . Have fun with it!
19.

Sigurd (May 31st, 2007, 4:30 pm)

manugoel2003 Yep, you are right. The Ext 2.0 is not released yet, and grid 2.0 will be included there :)
20.

ondrej zara (May 31st, 2007, 4:43 pm)

To make this list more complete:

OAT Pivot table: Link [demo.openlinksw.com]

OAT Grid: Link [demo.openlinksw.com]
21.

Tony Boyd (June 1st, 2007, 2:54 am)

Under Professional Solutions you should definitely check out SmartClient by Isomorphic Software. Pricey ($1100 developer license) but allows you to drag columns to become rows and rows to become columns and a ton of really nifty stuff.
22.

loops (June 1st, 2007, 3:30 pm)

Thanks for the links. Some of these grids look pretty sweet.
23.

Johnny Khoo (June 3rd, 2007, 7:19 pm)

Nice links. This list is extremely useful. Thanks!
24.

Paul Bidwell (June 5th, 2007, 5:21 pm)

Just what I’ve been looking for!!!
25.

Adam Dempsey (June 5th, 2007, 8:27 pm)

Very informative list thanks, I’ve been looking for something like this but only managed to find a few you mentioned.
26.

weweje (June 16th, 2007, 10:03 pm)

Please don’t forget the best of all
the one that allows you to edit your mysql records inside a webpage
Link [slgrid.senzalimiti.sk]
27.

frosty_yul (October 19th, 2007, 2:54 am)

i’ve been using this datagrid for a while:
Link [www.gurusistemas.com]

with a few customizations, it’s been good to me.
28.

RAKESH PATEL (November 19th, 2007, 9:33 pm)

example 3 of Data Grids in an Overview not properly working in IE version.
29.

Cyrill (January 14th, 2008, 11:50 pm)

Nice review. Being inspired by it I’ve made kind of translation mixed up with my own ideas and opinions about AJAX grids in Russian. It is located Link [cyrill.co.uk] at the moment.

If you have objections against this article being interpreted that way, please let me know.
30.

ramkumar (May 21st, 2008, 9:05 pm)

Hi

i already applyed grid for the table,i need pagination
any idea
31.

jim palmer (September 3rd, 2008, 9:59 pm)

Here’s another one to add to the mix as a jQuery plugin:

Link [www.overset.com]

Animated scrolling of pages and a whole bunch more features. Easily attaches to html tables.

offers: pagination, fixed table-layout, configurable rows to be displayed, natural sort - i.e. human readable - that is fast and supports unicode characters.
32.

dreamer (September 12th, 2008, 7:19 am)

Nice, powerful and beatufill products on display.
I have, however, one question :
Accessibility, any of the above mentioned fullfill accessibility requirements ?
33.

ady (October 2nd, 2008, 5:07 am)

Thanks for useful information

Link [delicious.com]
34.

mana (October 4th, 2008, 10:36 pm)

thanks for these linkes form
35.

Harry (January 15th, 2009, 10:41 am)

Has anyone figured out how to let users pick 2 or more products/datasets, and then display both of the tables related to those products side-by-side.
Link [reviews.cnet.com]
36.

John (January 22nd, 2009, 2:36 pm)

Here are 2 other data grids that use the jQuery AJAX libraries:

1a. Link [www.trirand.com]: This is the one I use and is very good.
1b. Link [trirand.com]
2. Link [groups.google.com]

Both are open source.
37.

Nazia (January 26th, 2009, 12:51 am)

Hi!
How to use ExtJs Grid in my aspx page?
38.

Tibet (March 30th, 2009, 6:49 am)

I come across Link [www.sigmawidgets.com]. It’s worth trying. I love it because you can use it under LGPL license free of charge