Visualforce TableGrid

<img alt="Deploy to Salesforce" src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/src/main/webapp/resources/img/deploy.png">

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

TableGrid is a free, open-source Force.com 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 s and Standard Related Lists.

Features:

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

Usage Examples

Please see components/tableGrid.component for a detailed description of all attributes. The following examples should give you enough information to get started.

TableGrid in a standalone Visualforce page

This snippet is taken from the sample page pages/tableGridStandalone.page.

    <apex:page showHeader="false" sidebar="false"> 
        <apex:form >
            ...
            <c:tableGrid type="Opportunity" 
                         title="Opportunities"
                         fields="Name,StageName,Amount,CloseDate" 
                         sortBy="Name" 
                         image="/img/icon/hands24.png"
                         sortDescending="true"
                         mode="list"
                         customizeFields="true"
                         customizeFilter="true"
                         pageSize="5" />   
             ...
        </apex:form>
    </apex:page>

TableGrid embedded into Standard Page Layouts

This snippet is taken from the sample page pages/tableGridRelatedList.page and pages/tableGridEmbedded.page

    <apex:page standardController="Account"> 
        <apex:form>
            ...

            <!-- Advanced Related list -->
            <c:tableGrid type="Contact" 
                         fields="Id, Name, Email, Birthdate" 
                         filter="AccountId = `{!Account.Id}`"
                         title="Contacts" 
                         gridPageId="readonly"
                         pageSize="5"
                         mode="list"/>

            <!-- Editable grid with customization turned on -->        
            <c: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"/>  

             ...
        </apex:form>
    </apex:page>

TableGrid as an Advanced Lookup Popup

This snippet is taken from the sample page pages/tableGridAdvancedLookup.page.

<apex:page standardController="Contact">    
    <apex:form>
        ...
        <c:advancedLookup > 
            <apex:inputField value="{!Contact.AccountId}" label="" />
        </c:advancedLookup>
        ...
    </apex:form>
</apex: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 StandardSetController, 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:

• jQuery, the javascript library to make it easy to write javascript.
• jQuery UI, jQuery UI library
• jQuery BlockUI Plugin, the jQuery plugin blocking parts of the UI.
• Apex-Select-Option-Sorting, an Apex sort utility class for SelectOptions