Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mk450Mk450 

freeze columns in lightning component

I want to freeze the columns and also headers for the table in lightning component.
for column freeze tried with positions absolute and overflow hidden but not reflecting.
Please suggest any other solution.
NagendraNagendra (Salesforce Developers) 
Hi,

Please find the sample code below which does the same. 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css"/> 
  <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
    
 <style type='text/css'>
    #container { margin: 10px; overflow: hidden; }
.relativeContainer { position: relative; width: auto; height: 400px; overflow: hidden; border: 1px solid green; }

td { background-color: white; padding: 2px; }

.fixedTB { position: absolute; left: 0px; top: 0px; z-index: 11; right:100px;  }

.leftContainer { position: absolute; left: 0px; top: 52px; height: 350px; overflow: hidden;  }

.rightContainer { position: absolute; left: 165px; top: 0px; width: auto; overflow: hidden; }

.leftSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; }
.topSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; }

.SBWrapper { width: 1100px; height: 250px; overflow: auto; }

  </style>
     <style>
    #disp
    {
        font-family:garmond;
        font-size:13px;
        font-weight:bold
    }
    </style>
    
<script type="text/javascript">
function att(){
  afatt();
}
</script>
<link  rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.css"/>
  <!-- Begin Default Content REMOVE THIS -->
  <table border="0" width="100%">
<tr>
<td width="32%" align="left" style="padding-left:3px;"><apex:image url="{!$Resource.Pratham_logo}" height="58" width="350" /></td>
<td align="center"> <font size="5" face="calibri"><b><font face="candara" color="#019dd6">Pratham Institute - Student Attendance</font></b></font></td>
<td align="right" width="33%" style="padding-right:15px;"><apex:image url="{!$Resource.PACE_logo}" height="55" width="250" /></td>
</tr></table> 

<apex:form id="frm">
<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $('.SBWrapper').scroll(function () {
        var rc = $(this).closest('.relativeContainer');
        var lfW = rc.find('.leftSBWrapper');
        var tpW = rc.find('.topSBWrapper');
        
        lfW.css('top', ($(this).scrollTop()*-1));
        tpW.css('left', ($(this).scrollLeft()*-1));        
    });
});

});
</script>
<apex:actionFunction name="afsaveOnly" action="{!SaveOnly}" status="addRowStatus1" reRender="frm"/>
<apex:actionFunction name="afcancel" action="{!Cancel}" status="addRowStatus1" reRender="frm"/>
<apex:pageMessages />
 <apex:pageBlock title="Students Attendance">
<apex:outputPanel >
 <div id="container">
   <div class="relativeContainer">
       <!-- Fixed Column for both scroller -->
       <div class="fixedTB">
           <table border="1" width="164px" cellspacing="1" cellpadding="0" height="52px" >
               <tr>
                   <td width="40px">Roll No.</td>
                  <td width="50px"> Student Name</td>
                  <td width="40px">Biometric Id</td>
              </tr>
           </table>
       </div>       
       <div class="leftContainer">          
           <!-- Fixed Column for horz scroller -->
           <div class="leftSBWrapper">
               <table border="1" width="100px" cellspacing="1" cellpadding="0">
                    <apex:repeat value="{!oppTask}" var="stu">
                   <tr>
                   <td width="100px" height="50px"><apex:outputText value="{!stu.St.Student_Id__c}"/>  </td>
                   <td width="80px" height="50px">
              <apex:outputText value="{!stu.st.First_name__c} {!stu.st.Middle_name__c} 
              {!stu.st.Last_name__c}"/>
             </td>
             
             <td width="80px">
              <apex:outputText value="{!stu.st.Biometric_Id__c}"/>
             </td>
     
                        </tr></apex:repeat>
                                   </table>
            </div>
        </div>    
        <div class="rightContainer">
            <div class="topSBWrapper">
                <table border="1" width="1400px" cellspacing="1" cellpadding="0" align="center">
                   <tr>
                       <apex:repeat value="{!attdates}" var="cur_date">
                 <td><apex:outputText value="{0,date,dd'/'MM}">
       <apex:param value="{!cur_date}" /> 
     </apex:outputText>
<!--                     <apex:outputText value="{0, date, d MMM yyyy}">                    <apex:param value="{!cur_date}" />                 </apex:outputText>--> </td>
                 </apex:repeat>
                       <td><apex:outputText value="Total Attendance out of {!No_of_days}"/></td>
                       
                   </tr>
                </table>
            </div>
            <div class="SBWrapper">
                <table border="1" width="1100px" cellspacing="1" cellpadding="0" align="center" >
                  <apex:repeat value="{!oppTask}" var="stu">
                   <tr>
                      <apex:repeat value="{!stu.Att}" var="key">
                 <td align="center" height="50px">
             <apex:outputText value="{!if(stu.Att[key], 'P', 'A')}" rendered="{!NOT(edit_mode)}" style="width:40%"></apex:outputText>
             <apex:inputCheckbox value="{!stu.Att[key]}" rendered="{!edit_mode}"/>
             </td>
         </apex:repeat>
                <td width="80px" height="50px"><apex:outputtext value="{!stu.AttTotal}"></apex:outputtext></td>
                   </tr>    
                    </apex:repeat>
                  
                </table>
            </div>
        </div>
    </div>
</div>

Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra
Mk450Mk450
Please suggest for lightning component.not vf page