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

Data Grids with AJAX, DHTML and JavaScript

Advertisement

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!).

Img-02 in Data Grids with AJAX, DHTML and JavaScript

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.

Dhtmlxgrid in Data Grids with AJAX, DHTML and JavaScript

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

Img-00 in Data Grids with AJAX, DHTML and JavaScript

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

Img-04 in Data Grids with AJAX, DHTML and JavaScript

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

Elite in Data Grids with AJAX, DHTML and JavaScript

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.

Xajax in Data Grids with AJAX, DHTML and JavaScript

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.

Tablekit in Data Grids with AJAX, DHTML and JavaScript

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.

Ruby in Data Grids with AJAX, DHTML and JavaScript

9. Unobtrusive Table Sort Script.

Fredec in Data Grids with AJAX, DHTML and JavaScript

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.

Yahoo in Data Grids with AJAX, DHTML and JavaScript

11. Standardista Table Sorting

Standardista in Data Grids with AJAX, DHTML and JavaScript

12. Sortable Tables by WebFX.

Webfx in Data Grids with AJAX, DHTML and JavaScript

13. SortedTable

Tables06 in Data Grids with AJAX, DHTML and JavaScript

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

Img-01 in Data Grids with AJAX, DHTML and JavaScript

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.

Activew in Data Grids with AJAX, DHTML and JavaScript

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading ... Loading ...

Tags: , , , , , ,

Advertising
  1. 1
    Pavel Ciorici
    May 30th, 2007 10:20 pm

    Nice article!

  2. 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. 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. 4
    Lucian Lature
    May 30th, 2007 10:58 pm

    And 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!…

  5. 5
    Boris
    May 30th, 2007 11:08 pm

    Great 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).

  6. 6
    Sigurd
    May 30th, 2007 11:13 pm

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

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

  9. 9
    Ryan Scherf
    May 31st, 2007 2:17 am

    http://www.ryanscherf.net/blog/table-row-and-column-highlighting

    I wrote my own long ago. Damn you Mootools!

  10. 10
    eka808
    May 31st, 2007 3:10 am

    usefull ^^ thank’s

  11. 11
    Mikk
    May 31st, 2007 3:44 am

    Forgot Nitobi’s grid, which although somewhat buggy at the moment, is still quite good. http://www.nitobi.com

  12. 12
    Ronny
    May 31st, 2007 4:39 am

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

  13. 13
    Famous Photos
    May 31st, 2007 4:44 am

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

  14. 14
    Sikifon
    May 31st, 2007 5:34 am

    I think ExtJS is the best solution !

  15. 15
    faizan
    May 31st, 2007 11:43 am

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

  16. 16
    andregiant
    May 31st, 2007 12:24 pm

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

  17. 17
    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!

  18. 18
    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:
    Ajax Calendar Application example

    Ajax DataGrid in Ajax Window

    :)

    .t

  19. 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. 20
    ondrej zara
    May 31st, 2007 4:43 pm

    To 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

  21. 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. 22
    loops
    June 1st, 2007 3:30 pm

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

  23. 23
    Johnny Khoo
    June 3rd, 2007 7:19 pm

    Nice links. This list is extremely useful. Thanks!

  24. 24
    Paul Bidwell
    June 5th, 2007 5:21 pm

    Just what I’ve been looking for!!!

  25. 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. 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
    http://slgrid.senzalimiti.sk

  27. 27
    frosty_yul
    October 19th, 2007 2:54 am

    i’ve been using this datagrid for a while:
    http://www.gurusistemas.com/indexdatagrid.php

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

  28. 28
    RAKESH PATEL
    November 19th, 2007 9:33 pm

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

  29. 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 here at the moment.

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

  30. 30
    ramkumar
    May 21st, 2008 9:05 pm

    Hi

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

  31. 31
    jim palmer
    September 3rd, 2008 9:59 pm

    Here’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.

  32. 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. 33
    ady
    October 2nd, 2008 5:07 am

    Thanks for useful information

  34. 34
    mana
    October 4th, 2008 10:36 pm

    thanks for these linkes form

  35. 35
    John
    January 22nd, 2009 2:36 pm

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

  36. 36
    Nazia
    January 26th, 2009 12:51 am

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

  37. 37
    Tibet
    March 30th, 2009 6:49 am

    I come across sigma grid. It’s worth trying. I love it because you can use it under LGPL license free of charge

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job