Data Grids with AJAX, DHTML and JavaScript
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.
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.
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.
Pavel Ciorici
May 30th, 2007 10:20 pmNice article!
Credit
May 30th, 2007 10:20 pmI already know that kind of DHTMLXGrids. It’s very impressive, but I nevr try to use it.
Daniel Anderson Tiecher
May 30th, 2007 10:26 pmI wonder where do you guys find all this great articles. Thanks, as usual!
Lucian Lature
May 30th, 2007 10:58 pmAnd very important, how could you forget about next ExtJS’s grid implementation
http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html ?… Aren’t they just great ?…Please include that in your list!…
Boris
May 30th, 2007 11:08 pmGreat list, but you missed that I included in my list of 33 plugins for Mootools (33 plugins pour Mootools que vous devriez connaitre !).
- Mootable, by Owl Watch (Mootable).
- Sortable Table, by Phatfusion (Sortable Table).
Sigurd
May 30th, 2007 11:13 pmand what’s about ExtJs Data Grid, it’s very powerfull
Sigurd
May 30th, 2007 11:47 pmYou posted sample of grid which is not avaliable for public, only for premium memebers. But soon it should be released. Btw it’s free
manugoel2003
May 31st, 2007 1:29 amsigurd – 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
Ryan Scherf
May 31st, 2007 2:17 amhttp://www.ryanscherf.net/blog/table-row-and-column-highlighting
I wrote my own long ago. Damn you Mootools!
eka808
May 31st, 2007 3:10 amusefull ^^ thank’s
Mikk
May 31st, 2007 3:44 amForgot Nitobi’s grid, which although somewhat buggy at the moment, is still quite good. http://www.nitobi.com
Ronny
May 31st, 2007 4:39 amJust what I need, and exactly at the right time :D
Famous Photos
May 31st, 2007 4:44 amnice. 3. is ugly as hell… is any of these working with smarty?
Sikifon
May 31st, 2007 5:34 amI think ExtJS is the best solution !
faizan
May 31st, 2007 11:43 amthank you bro for this nice information. today i learn a new things :)
andregiant
May 31st, 2007 12:24 pmTHis is great for Room Booking …– column and row!
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!
Thomas Hansen
May 31st, 2007 12:14 amYou 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:
Ajax Calendar Application example
Ajax DataGrid in Ajax Window
:)
.t
Sigurd
May 31st, 2007 4:30 pmmanugoel2003 Yep, you are right. The Ext 2.0 is not released yet, and grid 2.0 will be included there :)
ondrej zara
May 31st, 2007 4:43 pmTo make this list more complete:
OAT Pivot table: http://demo.openlinksw.com/DAV/JS/demo/index.html?pivot
OAT Grid: http://demo.openlinksw.com/DAV/JS/demo/index.html?grid
Tony Boyd
June 1st, 2007 2:54 amUnder 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.
loops
June 1st, 2007 3:30 pmThanks for the links. Some of these grids look pretty sweet.
Johnny Khoo
June 3rd, 2007 7:19 pmNice links. This list is extremely useful. Thanks!
Paul Bidwell
June 5th, 2007 5:21 pmJust what I’ve been looking for!!!
Adam Dempsey
June 5th, 2007 8:27 pmVery informative list thanks, I’ve been looking for something like this but only managed to find a few you mentioned.
weweje
June 16th, 2007 10:03 pmPlease don’t forget the best of all
the one that allows you to edit your mysql records inside a webpage
http://slgrid.senzalimiti.sk
frosty_yul
October 19th, 2007 2:54 ami’ve been using this datagrid for a while:
http://www.gurusistemas.com/indexdatagrid.php
with a few customizations, it’s been good to me.
RAKESH PATEL
November 19th, 2007 9:33 pmexample 3 of Data Grids in an Overview not properly working in IE version.
Cyrill
January 14th, 2008 11:50 pmNice 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 here at the moment.
If you have objections against this article being interpreted that way, please let me know.
ramkumar
May 21st, 2008 9:05 pmHi
i already applyed grid for the table,i need pagination
any idea
jim palmer
September 3rd, 2008 9:59 pmHere’s another one to add to the mix as a jQuery plugin:
http://www.overset.com/2008/08/30/animated-sortable-datagrid-jquery-plugin-jtps/
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.
dreamer
September 12th, 2008 7:19 amNice, powerful and beatufill products on display.
I have, however, one question :
Accessibility, any of the above mentioned fullfill accessibility requirements ?
ady
October 2nd, 2008 5:07 amThanks for useful information
mana
October 4th, 2008 10:36 pmthanks for these linkes form
John
January 22nd, 2009 2:36 pmHere are 2 other data grids that use the jQuery AJAX libraries:
1a. jqGrid main site: This is the one I use and is very good.
1b. jqGrid examples
2. Flexigrid
Both are open source.
Nazia
January 26th, 2009 12:51 amHi!
How to use ExtJs Grid in my aspx page?
Tibet
March 30th, 2009 6:49 amI come across sigma grid. It’s worth trying. I love it because you can use it under LGPL license free of charge
Tim
December 11th, 2009 11:51 amI love Rico from Matt Brown – http://openrico.sourceforge.net/examples/index.html – Great feature set, including filtering, backend frameworks (php, asp), export to html and Excel, and a bunch more features. Check it out!
faisal
April 1st, 2010 3:01 amnice tutorial, thanks for share it, i have tutorial about grid extjs, please check it.
http://defafe.com/?s=grid+panel+extjs
Nokian
April 23rd, 2010 1:04 amI have try all the grid mentioned above, and love the following open source grid
1. jqGrid. this grid has a very good documentation.
2. sigma grid. This grid has most used features and very easy to use. If you a newbie of ajax and try to make a web site with grid, you may try this grid.
3. Nitobi’s grid This grid was not an open source one but seems to be an open source one now.
Rajni Padhiyar
May 20th, 2010 3:49 amNice controls.
Gowtham
December 2nd, 2011 12:46 pmThanks it really helped :) ……