{"id":2137,"date":"2016-11-04T11:19:25","date_gmt":"2016-11-04T11:19:25","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=2137"},"modified":"2025-06-10T10:29:32","modified_gmt":"2025-06-10T10:29:32","slug":"apply-fixed-headers-in-visual-force-page-for-large-records","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2016\/11\/04\/apply-fixed-headers-in-visual-force-page-for-large-records\/","title":{"rendered":"Apply fixed headers in Visual Force Page for Large Records"},"content":{"rendered":"

Visualforce page can display a maximum of 1000 records and let us tell you this is not a small number. When all the 1000 records show up on your page, you have to keep scrolling down to see the records appearing at the bottom of your table. Though, by the time you reach the bottom records you have no track of the column headers they correspond to. It just appears to be some blob of data and could be really confusing for the one who is looking at them. Won\u2019t it be good if you have the headers of the table fixed and no matter how much you scroll down or up, they are always there for you.<\/p>\n

There are various work arounds to achieve the fixed headers for table. But the method we are going to discuss is easy as compared to others. First download the zip file for \u201cjqueryfixedheadertable\u201d. Extract it and upload it in static resources of your Salesforce org with the same name. Now, include this script in your VisualForce page.<\/p>\n

\"Including<\/a>

Including static resource file in your code<\/p><\/div>\n

Now, under script tag in VisualForce page write the following code.<\/p>\n

\"JScript<\/a>

JScript function for fixed haeders<\/p><\/div>\n

Based on how you are going to populate the table, be it on commandbutton’s click or through other means, call the \u201cApplyFixHeaders\u201d function on its onclick or oncomplete as per your requirement. Now, for your pageblock table add a property styleclass and its value as \u201cfixheaders\u201d.<\/p>\n

\"Applying<\/a>

Applying styleclass to table<\/p><\/div>\n

Once, you have completed all the above mentioned steps, you can go ahead and test the functionality. In addition to this, if you are dealing with large records you can easily implement a navigation bar at the bottom of the table which would be helpful in navigating the records.<\/p>\n

\"Fixed<\/a>

Fixed header table<\/p><\/div>\n

If you wish to acquire more details on how to customize the columns, their width, how to keep the first column fixed and so on, visit this link Scrollable fixed header table jquery plugin. If you want further source related information to the fixed headers please visit this link- TableFixedHeader.<\/p>\n

About Us<\/strong><\/span>
\nGreytrix<\/a>\u00a0as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.<\/p>\n

Greytrix<\/a>\u00a0has some unique solutions for Cloud CRM such as Salesforce integration with\u00a0Sage Enterprise Management (Sage X3<\/a>),\u00a0Sage Intacct, Sage 100\u00a0<\/a>and\u00a0Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM\u00a0Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development<\/a> and Technical Support<\/a> to business partners and end users.<\/p>\n

Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star app listed on Salesforce AppExchange<\/a>.<\/p>\n

For more information, please contact us at\u00a0salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n

Related Posts<\/span><\/strong><\/p>\n