8 Ajax Data Controls and Effects to Work with Tables
Hi fellow reader, I browsed various projects that deals with HTML tables and data control. These a neat to achieve spreadsheet like experience for your users in web projects.
1. jqGrid
by Tony Tomov
jqGrid
jqGrid SubGrid
jqGrid is a plugin fro jQuery, it supports Json, XML and Javascript Array datatypes.
Features :
- Basic Search engine
- In place data editing
- Themes
- SubGrids
- Integration with jQuery UI Datepicker
- And more, just check out the demos
Ressources :
2. Tablecloth
by Alen Grakalic
Tablecloth
Table cloth is a great tool to ease your users browsing wide dataset by adding different colors on their precise coordinates in the table.
Features :
- Lightweight
- Unobtrusive
- Configurable highlighting of rows and columns or both
- Highlight on click
- Custom CSS
Ressources :
3. YUI Library DataTable Control
by Yahoo! Inc
YUI DataTable Control
Sample Data :
YAHOO.example.Data = {
bookorders: [
{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
{id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
{id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
{id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
]
}
The All in One great DataControl component for YUI Library.
The DataTable control provides a simple yet powerful API to display screen-reader accessible tabular data on a web page. Notable features include sortable columns, pagination, scrolling, row selection, resizeable columns, and inline cell editing.
Features :
- Column Keys Usage
- Progressive Enhancement of Markup
- Accessibility Features
- Custom Cell Formatting
- Nested Column Headers
- Basic Column Sorting
- Advanced Column Sorting
- Pagination
- Scrolling
- Adjusting the Render Loop Size
- Row and Cell Selection
- Column Selection
- Row, Cell and Column Highlighting
- More Column APIs
- Inline Cell Editing
- And a lot more in examples
Ressources :
4. FlexiGrid for jQuery
by Paulo P.Marinas
FlexiGrid
FlexiGrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.
Features :
- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON)
- Paging
- Show/hide columns
- Toolbar
- Search
- Accessible API
Ressources :
5. Preloading Data with Ajax and JSON
by Ryan Campbell
Demo Page
An Old but extensive and still good actual that describe how to preload your data to enhance your application usability.
Ressources :
6. dhtmlxGrid
by DHTMLX Ltd.
dhtmlxGrid
dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. The gridview component is easy-to-use and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources, including XML, JSON, CSV, JS array, and HTML table. Since v1.6 grid data can be loaded from custom XML format.
Editions :
- Standard – available for free download (to use under GPL).
- Professional – contains additional features (with examples) which are not present in Standard edition. Delivered under Commercial and Enterprise licenses.
Features Pro Edition :
- Loading XML from String
- Frozen columns
- Smart Rendering
- Paginal Output extension
- Merged cells
- Simultanious Update of Database (dhtmlxDataProcessor)
- Clipboard support
- Export\Import from CSV
Ressources :
7. treeTable
by Ludo van den Boom
ActsAsTreeTable - Displaying a directory structure.
treeTable is a plugin for jQuery, the ‘Write Less, Do More, JavaScript Library’. With this plugin you can display a tree in a table, i.e. a directory structure or a nested list. Why not use a list, you say? Because lists are great for displaying a tree, and tables are not. Oh wait, but this plugin uses tables, doesn’t it? Yes. Why do I use a table to display a list? Because I need multiple columns to display additional data besides the tree.
Features:
- Unobtrusive
- Branches collapsing and expanding
- Unlimited tree depth
Ressources:
8. Ext.ux.Livegrid
by Thorsten Suckow-Homberg
Livegrid Drag & drop
Livegrid Sorting and Options
The Ext.ux.Livegrid component is a user extension that’s build upon the Ext JS Framework and more specificaly extends Ext.grid.GridPanel. The component allows to read chunks of data from an underlying storage (common use case: a database) without the need of paging. Means: You can virtually display and scroll through a large amount of data – the grid will only render the data that comes into the viewport and will request new data for displaying if the user reached a specific cursor position/row index.
Ressources:
See Also:
Well , that closes the collection! I hope it will help you make the right choice for you next and current projects !
Nice Site layout for your blog. I am looking forward to reading more from you.
Tom Humes
Thank you Tom. I currently thinking about a custom design :)
Hi,
good list.
Before mentioning the ux.Livegrid, you could mention the awesome GridPanel that comes standard with the Ext framework, and which livegrid steals most things from. It does a better job that most of the other ones listed on the page.
http://extjs.com/deploy/dev/examples/grid/paging.html
Hi Ben,
I guess I should have dugg a bit more to find this one, my bad! Anyway, thank you for your feedback. GridPanel is now mentioned thanks to you !
@Nicolas Crovatti
No problemo. The Ext framework can be a bit of a learning curve at first but it’s really worth learning. Very professionally done. Worth considering for any big ajax heavy project. (Disclaimer: no I don’t work for Ext :)
@Ben ux.Livegrid does not steal, it extends the core functionality of the wonderful Ext.grid.GridPanel.
Nicolas, if you keep the Livegrid in your list, please update the link to the project home. It’s now http://www.ext-livegrid.com.
Keep up the good work
Regards
Thorsten
@Ben
I already worked with ExtJS a few month ago while trying to find out what was the best suited Javascript template engine for a project. I found it very clean and well implemented.
I will definitly look at it again soonish to see what have been the new enhancements in the past year or so.
@Thorsten Suckow-Homberg
Hello Thorsten,
I’m glad to see you here! I will leave liveGrid and add due reference to Ext.grid.GridPanel.
Cheers :D
Post updated! Thanks guys :)
@Thorsten Suckow-Homberg
Hi, yes, sorry I didn’t mean to use such strong word.. my apologies. what I meant is that a lot of the core functionality that people might find attractive in Livegrid (the look, editing, column sorting, etc) is in fact already available in the core GridPanel it extends.
What about dojo.grid?
@wagner
Hello Wagner,
I don’t know the Dojo framework at all. That make it difficult to me to state about the quality of dojo.grid implementation. But if you can, Shiny readers and I will be glad and grateful to read from you about it’s key features!
Virtual space, players look for the existence of its own sense l2 adena of
This comment was originally posted on Smashing Apps
[…] Read More […]
This comment was originally posted on Smashing Apps
[…] Go here to wager the original: 23 Ultimate Collection Of Useful Ajax Tutorials & Resources … […]
This comment was originally posted on Smashing Apps
[…] Read more […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources (tags: ajax javascript resources) […]
This comment was originally posted on Smashing Apps
Why is everything slanty?
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources – Opensource, Free and Useful Onlin… […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources […]
This comment was originally posted on Smashing Apps
[…] Două situri cu nume asemănător dar fără vreo legătură între ele au publicat articolele: 23 Ultimate Collection Of Useful Ajax Tutorials & Resources (SmashingApps, 16 martie) şi 70 New, Useful AJAX And JavaScript Techniques (SmashingMagazine, 8 […]
This comment was originally posted on Smashing Apps
http://www.megaupload.com/?d=3BW3SN3I
This comment was originally posted on Smashing Apps
This is Raman from Hire Wordpress Experts.com, I am here to offer you offer you free consultation for your wordpress blogs. Please get back to me with your queries and I would be happy to solve them. In return I just need a small link to my website in your blogroll. I look forward to hear from you.
Thanks
Raman Ladhani
http://hirewordpressexperts.com
info@hirewordpressexperts.com
This comment was originally posted on Smashing Apps
This is Raman from Hire Wordpress Experts.com, I am here to offer you offer you free consultation for your wordpress blogs. Please get back to me with your queries and I would be happy to solve them. In return I just need a small link to my website in your blogroll. I look forward to hear from you.
Thanks
Raman Ladhani
http://hirewordpressexperts.com
info@hirewordpressexperts.com
This comment was originally posted on Smashing Apps
check http://www.dialusername.com/
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources @ SmashingApps Excellent collection of AJAX Tutorials (tags: json resources tutorial javascript webdev webdesign) […]
This comment was originally posted on Smashing Apps
[…] 23 Ultimate Collection Of Useful Ajax Tutorials & Resources … […]
This comment was originally posted on Smashing Apps
thanksss youre adminss
This comment was originally posted on Smashing Apps
yourrr adminss good
This comment was originally posted on Smashing Apps