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 1 – among other things, we’ve presented solutions for Zebra tables2 and few tables with sorting and filtering functionalities3; 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 Grid4 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!).

Screenshot5

2. dhtmlxGrid6 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.

Screenshot7

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

Screenshot10

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

Screenshot12

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 Kit13 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 Prototype14 is also provided.

Screenshot15

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

Screenshot17

9. Unobtrusive Table Sort Script18.

Screenshot19

10. Yahoo UI Library’s DataTables20. 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.

Screenshot21

11. Standardista Table Sorting22

Screenshot23

12. Sortable Tables24 by WebFX.

Screenshot25

13. SortedTable26

Screenshot27

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

Screenshot29

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 Widgets33, (which costs 395,- USD and also includes some further applications) and Editable JavaScript TreeGrid34. However, both offer exquisite and quicks solutions. The latter enables you to create huge tables and handle the information efficiently.

Screenshot35

Footnotes

  1. 1 http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
  2. 2 http://www.alistapart.com/articles/zebratables/
  3. 3 http://friedcellcollective.net/js/SortedTable/examples.html
  4. 4 http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html
  5. 5 http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html
  6. 6 http://dhtmlx.com/docs/products/dhtmlxGrid/
  7. 7 http://dhtmlx.com/docs/products/dhtmlxGrid/
  8. 8 http://www.phatfusion.net/sortabletable/index.htm
  9. 9 http://gueschla.com/2007/04/16/33-plugins-pour-mootools-que-vous-devriez-connaitre/
  10. 10 http://www.phatfusion.net/sortabletable/index.htm
  11. 11 http://joomlicious.com/mootable/
  12. 12 http://joomlicious.com/mootable/
  13. 13 http://www.millstream.com.au/upload/code/tablekit/
  14. 14 http://tetlaw.id.au/view/blog/table-sorting-with-prototype/
  15. 15 http://www.millstream.com.au/upload/code/tablekit/
  16. 16 http://dev.nozav.org/rails_ajax_table.html
  17. 17 http://dev.nozav.org/rails_ajax_table.html
  18. 18 http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited
  19. 19 http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited
  20. 20 http://developer.yahoo.com/yui/datatable/
  21. 21 http://developer.yahoo.com/yui/datatable/
  22. 22 http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting
  23. 23 http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting
  24. 24 http://webfx.eae.net/dhtml/sortabletable/demos.html
  25. 25 http://webfx.eae.net/dhtml/sortabletable/demos.html
  26. 26 http://friedcellcollective.net/js/SortedTable/examples.html
  27. 27 http://friedcellcollective.net/js/SortedTable/examples.html
  28. 28 http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php
  29. 29 http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php
  30. 30 http://www.mochikit.com/examples/ajax_tables/index.html
  31. 31 http://www.pascarello.com/sortTable/
  32. 32 http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=sortable_table
  33. 33 http://www.activewidgets.com/grid/
  34. 34 http://www.treegrid.com/TreeGrid4_6/Html/EJSTreeGrid.html
  35. 35 http://www.activewidgets.com/grid/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Nice article!

    0
  2. 2

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

    0
  3. 3

    Daniel Anderson Tiecher

    May 30, 2007 10:26 pm

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

    0
  4. 4

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

    0
  5. 5

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

    0
  6. 6

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

    0
  7. 7

    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

    0
  8. 8

    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

    0
  9. 9

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

    I wrote my own long ago. Damn you Mootools!

    1
  10. 10

    usefull ^^ thank’s

    0
  11. 11

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

    0
  12. 12

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

    0
  13. 13

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

    0
  14. 14

    I think ExtJS is the best solution !

    0
  15. 15

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

    0
  16. 16

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

    0
  17. 17

    @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!

    0
  18. 18

    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

    -1
  19. 19

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

    -1
  20. 20
  21. 21

    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.

    0
  22. 22

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

    0
  23. 23

    Nice links. This list is extremely useful. Thanks!

    0
  24. 24

    Just what I’ve been looking for!!!

    0
  25. 25

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

    0
  26. 26

    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

    0
  27. 27

    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.

    0
  28. 28

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

    0
  29. 29

    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.

    1
  30. 30

    Hi

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

    0
  31. 31

    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.

    0
  32. 32

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

    0
  33. 33

    Thanks for useful information

    0
  34. 34

    thanks for these linkes form

    0
  35. 35

    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.

    1
  36. 36

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

    0
  37. 37

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

    0
  38. 38

    I 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!

    0
  39. 39

    nice tutorial, thanks for share it, i have tutorial about grid extjs, please check it.

    http://defafe.com/?s=grid+panel+extjs

    0
  40. 40

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

    0
  41. 41

    Rajni Padhiyar

    May 20, 2010 3:49 am

    Nice controls.

    0
  42. 42

    Thanks it really helped :) ……

    0

↑ Back to top