How to Freeze Column and Header using Visualforce Page

September 15, 2023
Tech Blogger
Merfantz Developments, Salesforce Developments Tutorial
0

Description:

Create a custom Visual force page that displays data in a table with several columns. It would be beneficial for users to have the ability to “freeze” or “lock” specific columns while scrolling through the data, ensuring that important information remains visible as they navigate the table.

Source Code with Controller:

FreezeColumn.vfp

<apex:page sidebar=”true” Controller=”AccountDetailsController”>

<apex:includeScript value=”https://code.jquery.com/jquery-1.11.1.min.js”/>

<apex:includeScript value=”https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js”/>

<apex:includeScript value=”https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js”/>

<apex:stylesheet value=”https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css”/>

<apex:stylesheet value=”https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css”/>

<html>

<body>

<apex:outputText >Freeze Columns Starting From: </apex:outputText>

<option value=”1″ >Account Id</option>

<option value=”2″ >Account Name</option>

<option value=”3″ >Number of Employees</option>

<option value=”4″ >Website</option>

<option value=”5″ >Annual Revenue</option>

</select>

<br/>

<th>Account Id</th>

<th>Account Name</th>

<th>Number of Employees</th>

<th>Website</th>

<th>Phone</th>

<th>Annual Revenue</th>

<th>Industry</th>

<th>Number of Locations</th>

</thead>

<tbody>

<apex:repeat value=”{!accounts}” var=”acc”>

<tr>

<td>{!acc.NumberOfEmployees}</td>

<td>{!acc.Website}</td>

<td>{!acc.Phone}</td>

<td>{!acc.AnnualRevenue}</td>

<td>{!acc.Industry}</td>

<td>{!acc.NumberofLocations__c}</td>

</tr>

</apex:repeat>

</tbody>

</table>

</body>

</html>

var table;

$(document).ready( initializeDataTable());

function initializeDataTable(){

var freezeColIdx = $( “#freezeColSel” ).val();

table = $(‘#accTable’).DataTable( {

scrollY: “300px”,

scrollX: true,

scrollCollapse: true,

paging: false

} );

new $.fn.dataTable.FixedColumns( table, {

leftColumns: freezeColIdx

} );

}

function freezeColChange(){

table.destroy();

initializeDataTable();

}

</script>

<style>

th, td { white-space: nowrap; }

div.dataTables_wrapper {

width: 900px;

margin: 0 auto;

}

</style>

</apex:page>

Using Controller to fetch records:

AccountDetailsController.apxc:

public with sharing class AccountDetailsController

{

public List<Account> accounts { get; set; }

public AccountDetailsController()

{

// Query for Account records and store them in the ‘accounts’ variable

accounts = [SELECT Name,Type,Industry,Website,Phone,SLA__c,NumberofLocations__c, Description, AnnualRevenue, NumberOfEmployees, Rating, Site, CreatedDate, LastModifiedDate FROM Account];

}

Freeze Column Final Output:

Code Explanation:

FreezeColumn.vfp

<apex:page sidebar=”true” Controller=”AccountDetailsController”>

<!–Include a table plug-in for jquery and css–>

<html>

<body>

<!–Include table and your custom code–>

</body>

</html>

</apex:page>

Add table to display account details:

To Display account details like Account’s Id , Name , Phone No , Industry , Annual Revenue, etc. You can also use this for standard(Contact, Opportunity…) and custom object based on your requirement.

<th>Account Id</th>

<th>Account Name</th>

<th>Number of Employees</th>

<th>Website</th>

<th>Phone</th>

<th>Annual Revenue</th>

<th>Industry</th>

<th>Number of Locations</th>

</thead>

<tbody>

<apex:repeat value=”{!accounts}” var=”acc”>

<tr>

<td>{!acc.NumberOfEmployees}</td>

<td>{!acc.Website}</td>

<td>{!acc.Phone}</td>

<td>{!acc.AnnualRevenue}</td>

<td>{!acc.Industry}</td>

<td>{!acc.NumberofLocations__c}</td>

</tr>

</apex:repeat>

</tbody>

</table>

Using Controller to fetch records:

AccountDetailsController.apxc:

public with sharing class AccountDetailsController

{

public List<Account> accounts { get; set; }

public AccountDetailsController()

{

// Query for Account records and store them in the ‘accounts’ variable

accounts = [SELECT Name,Type,Industry,Website,Phone,SLA__c,NumberofLocations__c, Description, AnnualRevenue, NumberOfEmployees, Rating, Site, CreatedDate, LastModifiedDate FROM Account];

}

Add Libraries for Data table and CSS:

I’ve included all the required libraries and CSS files in FreezeColumn.vfp. I recommend saving and managing these files as Static Resources and using this method for referencing them in your project.

<apex:includeScript value=”https://code.jquery.com/jquery-1.11.1.min.js”/>
<apex:includeScript value=”https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js”/>
<apex:includeScript value=”https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js”/>
<apex:stylesheet value=”https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css”/>
<apex:stylesheet value=”https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css”/>

var table;

$(document).ready( initializeDataTable());

function initializeDataTable(){

var freezeColIdx = $( “#freezeColSel” ).val();

table = $(‘#accTable’).DataTable( {

scrollY: “300px”,

scrollX: true,

scrollCollapse: true,

paging: false

} );

new $.fn.dataTable.FixedColumns( table, {

leftColumns: freezeColIdx

} );

}

</script>

Include script and style:

function freezeColChange(){

table.destroy();

initializeDataTable();

}

</script>

<style>

th, td { white-space: nowrap; }

div.dataTables_wrapper {

width: 900px;

margin: 0 auto;

}

</style>

<apex:outputText >Freeze Columns Starting From: </apex:outputText>

<option value=”1″ >Account Id</option>

<option value=”2″ >Account Name</option>

<option value=”3″ >Number of Employees</option>

<option value=”4″ >Website</option>

<option value=”5″ >Annual Revenue</option>

</select>

Conclusion:

By implementing this Freeze Column functionality, you empower users to have more control over how they interact with the data, making it easier for them to analyze, compare, and extract valuable insights. It not only enhances the usability of your application but also contributes to a more efficient and productive workflow.