Data Grids with AJAX, DHTML and JavaScript

• By Vitaly Friedman
• May 30th, 2007
• Ajax, JavaScript
• 42 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.

• Sortable Ajax Tables in JSON and XML with MochiKit
• JavaScript Sortable Table
• DHTMLGoodies

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.