How to Freeze Column and Header using Visualforce Page

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>

<br/><br/>

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

<select onchange=”freezeColChange();” id=”freezeColSel”>

<option value=”0″ selected=”selected”>None</option>

<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/>

<table id=”accTable” class=”display” cellspacing=”0″ width=”100%”>

<thead style=”background-color:green;color:white;”>

<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>Type</th>

<th>SLA</th>

<th>Number of Locations</th>

</thead>

<tbody>

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

<tr>

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

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

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

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

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

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

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

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

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

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

</tr>

</apex:repeat>

</tbody>

</table>

</body>

</html>

<script type=”text/javascript”>

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:

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.

<table id=”accTable” class=”display” cellspacing=”0″ width=”100%”>

<thead style=”background-color:green;color:white;”>

<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>Type</th>

<th>SLA</th>

<th>Number of Locations</th>

</thead>

<tbody>

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

<tr>

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

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

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

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

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

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

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

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

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

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

</tr>

</apex:repeat>

</tbody>

</table>

Table with Account Details

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.

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

<script type=”text/javascript”>

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>

Data-Table

Include script and style:

    <script type=”text/javascript”>

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>

<select onchange=”freezeColChange();” id=”freezeColSel”>

<option value=”0″ selected=”selected”>None</option>

<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.

Related Links:

https://merfantz.com/blog/dynamically-remove-table-column-based-on-header-name/

Author Bio

Tech Blogger
+ Recent Posts
Tags: