Smashing Magazine we smash you with the information that will make your life easier. really.
Data Grids with AJAX, DHTML and JavaScript
May 30th, 2007 in Developer's Toolbox | 72 Comments
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.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Pavel Ciorici (May 30th, 2007, 10:20 pm)
Nice article!
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.
Daniel Anderson Tiecher (May 30th, 2007, 10:26 pm)
I wonder where do you guys find all this great articles. Thanks, as usual!
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!…
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]).
Sigurd (May 30th, 2007, 11:13 pm)
and what’s about ExtJs Data Grid, it’s very powerfull
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
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
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
Ryan Scherf (May 31st, 2007, 2:17 am)
Link [www.ryanscherf.net]
I wrote my own long ago. Damn you Mootools!
eka808 (May 31st, 2007, 3:10 am)
usefull ^^ thank’s
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]
Ronny (May 31st, 2007, 4:39 am)
Just what I need, and exactly at the right time :D
Famous Photos (May 31st, 2007, 4:44 am)
nice. 3. is ugly as hell… is any of these working with smarty?
Sikifon (May 31st, 2007, 5:34 am)
I think ExtJS is the best solution !
faizan (May 31st, 2007, 11:43 am)
thank you bro for this nice information. today i learn a new things :)
andregiant (May 31st, 2007, 12:24 pm)
THis 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!
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 :)
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]
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.
loops (June 1st, 2007, 3:30 pm)
Thanks for the links. Some of these grids look pretty sweet.
Johnny Khoo (June 3rd, 2007, 7:19 pm)
Nice links. This list is extremely useful. Thanks!
Paul Bidwell (June 5th, 2007, 5:21 pm)
Just what I’ve been looking for!!!
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.
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]
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.
RAKESH PATEL (November 19th, 2007, 9:33 pm)
example 3 of Data Grids in an Overview not properly working in IE version.
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.