by rsoesemann

Flexible and highly customizable Visualforce table grid component. Classic Look and F...

126 Stars 74 Forks Last release: Not found MIT License 71 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Visualforce TableGrid

Deploy to Salesforce

Usage | Know Issues/Todos | Third Party Code | Licence

TableGrid is a free, open-source library, that provides users and developers a highly customizable, native-looking, sortable, filterable, editable Grid Visualforce component. This component can be used as an advanced, highly configurable (by developer and user) replacement of apex:pageBlockTables and Standard Related Lists.

Two instances of Visualforce TableGrid, one read-only and one editable version.


  • Native 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"

Usage Examples

Please see

for a detailed description of all attributes. The following examples should give you enough information to get started.

TableGrid in a standalone Visualforce page

TableGrid in List mode with Customizations turned on

This snippet is taken from the sample page


TableGrid embedded into Standard Page Layouts

Two TableGrid instanced replacing Standard Related Lists in a Standard Page Layout

This snippet is taken from the sample page


        <!-- Advanced Related list -->
        <tablegrid type="Contact" fields="Id, Name, Email, Birthdate" filter="AccountId = `{!Account.Id}`" title="Contacts" gridpageid="readonly" pagesize="5" mode="list"></tablegrid>

        <!-- Editable grid with customization turned on -->        
        <tablegrid type="Opportunity" fields="Name,StageName,Amount,CloseDate" filter="AccountId = `{!Account.Id}`" sortby="Name" sortdescending="true" title="Opportunities" gridpageid="editable" customizefields="true" customizefilter="true" pagesize="5" mode="edit"></tablegrid>  


TableGrid as an Advanced Lookup Popup

TableGrid as an Advanced Lookup Popup

This snippet is taken from the sample page


Known Issues/Todos

  • Performance (loading, partial rerender, select rows,...)
    • Reduce Viewstate
    • Replace ActionSupport with Javascript Remoting
    • Reduce Markup-Size
  • Allow for more than 10.000 result records: For pagination I am using the
    , which seems to have this restriction.
  • Allow to filter also for read-only fields in FilterBuilder without loosing the context-sensitive input fields.
  • Optionally replace pagination with Infinite Scroll.
  • Fix Bugs:
    • FilterBuilder does not clear value field when switching field
    • Save/Delete selected buttons are not activated when checkbox is selected
    • ...

Third-party Code

This library makes use of a number of third-party components:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.