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