Grids in Visualforce pages

Question

Has anyone tried using Grids in VF pages using jquery plugins or any other libraries. I am looking at an library plugin which provides an excel like UI.

The basic idea is to have custom object fields displayed as a grid and allow users to edit and save it.

Does anybody has suggestions on which libraries are best suited to SF env and which are best avoided..

Here are few i had come across..

InGrid

Jquery Sheet

SlickGrid

jqGrid

But havent seen any implementation of these in VF pages, if somebody has any experience with the above libraries (Or any other libraries) or know about some tutorials to implement them it could be a great starting point

Answer 1

I did exactly what you are describing and cannot speak highly enough about slickgrid. It is performant, flexible, and pretty easy to work with. We were able to implement a spreadsheet that could display thousands of rows, with about 90 columns per row, capable of inline editing, and real time collaboration via streaming api.

Here is a demo from Dreamforce 2012 showing off what we built

Answer 2

I did a implementation of Datatables @ VF . Initially it was bit troublesome but actually managed to convert the same into a component. You can have a look at the same here http://blogforce9.blogspot.in/2013/11/pageblocktableenhanceradv-yet-another.html

Answer 3

A while ago I have built a configurable Visualforce TableGrid component. I recently made it open source on Github.

• Native Salesforce.com Look And Feel
• Works as Standalone table grid or as an embedded replacement for Related List
• Works as replacement for Standard Lookup popups with
• Works for Standard and Custom SObjects
• Spreadsheet-like Cell-Editing
• Delete Muliple records
• Pagination with cutomizable page size
• Filter Builder UI to let users filter records
• Field Selection UI to let users customize columns
• Each user`s customizations can be auto-saved in a "database-cookie"

Feel free to use, share and improve ;-)