VisualForce - Data Table - Floating Headers

Question

I can't figure out if the Script itself isn't working or if I am doing something else wrong with my visualforce page. My goal is to get the table headers to stay visible but every single approach I have tried doesn't work.

Here is the current plugin I am trying: https://github.com/Pexlify/floating-headers-in-Visualforce-PageBlockTable

I originally had the table as a pageblocktable but chnaged it to DataTable in attempt to get this to work. Here is my visualforce page (stripped down):

<apex:page controller="controller_LicensingUpdateGrid" sidebar="false">
    <script src="{!URLFOR($Resource.jQuery)}"></script>
    <script src="{!URLFOR($Resource.StickHeader)}"></script>
    <script type="text/javascript">
        $.noConflict();
        jQuery(document).ready(function() {
            stickHeader('licenseTable', 'headerClass');
        });
    </script>
    <style>
***styles removed***
        #section {
        width:100%;
        float:left;
        padding:10px;
        }
        .dateFormat{
        visibility:hidden;
        }
        .mytable{
        color:purple;
        width:100%;
        }
        .mytable tr:hover{
        background-color:#D8BFD8;
        }
        .mytable td {
        padding: 1px;
        text-align: center;
        }
        .mytable th {
        padding: 1px;
        text-align: center;
        background-color:purple;
        color:White;
        }
    </style> 
    <apex:form id="theForm" style="background-color:purple;">

***Code removed***

        <div id="section">
            <apex:pageBlock id="LicenseList" tabStyle="License__c" >
                <apex:pageMessages />

                <apex:datatable value="{!TheLicenses}" var="lic" id="licenseTable" styleclass="mytable">

                    <apex:column headerValue="License" headerClass="headerClass" >
                        <apex:outputlink target="_blank" value="/{!Lic.Id}">{!Lic.Name}</apex:outputlink>
                    </apex:column>
                    <apex:column headerValue="License #">
                        <apex:inputField value="{!Lic.License_Number__c}"/>
                    </apex:column>
                    <apex:column headerValue="Exp Date">
                        <apex:inputfield value="{!Lic.Expiration_Date__c}"/>
                    </apex:column>
                    <apex:column headerValue="Perpetual?">
                        <apex:inputcheckbox value="{!Lic.Perpetual__c}"/>
                    </apex:column>
                    <apex:column headerValue="Status">
                        <apex:outputtext escape="false" value="{!Lic.Status_Icon__c}" />
                    </apex:column>
                    <apex:column headerValue="Allstate">
                        <apex:inputcheckbox value="{!Lic.AllState_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Aflac">
                        <apex:inputcheckbox value="{!Lic.AFLAC_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="BM">
                        <apex:inputcheckbox value="{!Lic.Boston_Mutual_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Guardian">
                        <apex:inputcheckbox value="{!Lic.Guardian_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Hartford">
                        <apex:inputcheckbox value="{!Lic.Hartford_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Humana">
                        <apex:inputcheckbox value="{!Lic.HUMANA_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Lincoln">
                        <apex:inputcheckbox value="{!Lic.Lincoln_Financial_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Manhattan">
                        <apex:inputcheckbox value="{!Lic.Manhattan_Life_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Metlife">
                        <apex:inputcheckbox value="{!Lic.MetLife_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="TransA">
                        <apex:inputcheckbox value="{!Lic.TransAmerica_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="TrustMark">
                        <apex:inputcheckbox value="{!Lic.Trustmark_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Unum">
                        <apex:inputcheckbox value="{!Lic.UNUM_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Voya">
                        <apex:inputcheckbox value="{!Lic.VOYA_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Zurich">
                        <apex:inputcheckbox value="{!Lic.Zurich_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="5Star">
                        <apex:inputcheckbox value="{!Lic.X5_Star_Appointment__c}"/>
                    </apex:column>

                </apex:datatable>
            </apex:pageBlock>
***Code Removed***
        </div>
    </apex:form>
</apex:page>

FYI, i do realize that I only have the headerClass attribute set on the one column. This was intentional as I am trying to get it to work on one first before copying to all columns. — Matt M
– Matt M, Commented Sep 5, 2018 at 20:33

Naval Sharma · Accepted Answer · 2018-09-12 06:21:53Z

Here is the working example. I have made some changes in the CSS and table structure which you can refer for your solution.

<apex:page standardController="Account">

  <style>
   #section {
    width:100%;
    float:left;
    padding:10px;

    }
    .dateFormat{
    visibility:hidden;
    }
    .mytable{
    color:purple;
    width:100%;

    }
    .mytable tr:hover{
    background-color:#D8BFD8;
    }
    .mytable td {
    padding: 1px;
    text-align: center;
    }
    .mytable th {
    padding: 1px;
    text-align: center;
    background-color:purple;
    color:White;
    }
    .tableContent {
        height: 300px;
        overflow-y: scroll;
    }
 </style>
 <div id="section">
  <apex:form>
        <apex:pageBlock id="LicenseList" tabStyle="Account" >
            <apex:pageMessages />
            <div class="tableHeader">
                <table class="mytable">
                    <tbody>
                        <tr> 
                            <th style="width: 50%"> Id</th>
                            <th style="width: 50%"> Name</th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tableContent">
                <apex:datatable value="{!Account.Contacts}" var="lic" id="licenseTable" styleclass="mytable">

                    <apex:column width="50%">
                        <apex:outputlink target="_blank" value="/{!lic.Id}">{!Lic.Name}</apex:outputlink>
                    </apex:column>
                    <apex:column style="width: 50%">
                        <apex:inputField value="{!Lic.Name}"/>
                    </apex:column>
                </apex:datatable>
            </div>
        </apex:pageBlock>
     </apex:form>     
</div>

Gil Grencho · Accepted Answer · 2018-09-11 10:00:10Z

0

table tbody, table thead
{
    display: block;
}

table tbody 
{
   overflow: auto;
   height: 100px;
}

table {
    width: 350px; /* can be dynamic */
}

th
{
    width: 75px;
}

found this answer, and it might work, since apex tables are rendered as plain html

JS fiddle

answered Sep 11, 2018 at 10:00

Gil Grencho

2261 silver badge7 bronze badges

Add a comment |

Stack Exchange Network

VisualForce - Data Table - Floating Headers

2 Answers 2

You must log in to answer this question.

Hot Network Questions

VisualForce - Data Table - Floating Headers

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions