1

I have to create a table which gets data dynamically. Its rows and columns are populated dynamically and I am using Pageblocktable. Now I have to freeze its header and first column. Can anyone help me.

Thank you Suja

0

1 Answer 1

0

Are you looking for a Pageblocktable/Visualforce approach / Is it ok if you can go HTML/Jquery way. I used Jquery http://www.tablefixedheader.com/documentation/

The only problem is : You cannot use standard style sheet and header( you will have set them off since the salesforce style sheets messes the stylesheets we load, it would be awesome if someone can help me on how to use standard style sheets and use the css over and not mess the page).

See the code and pic below:

From the link above download the CSS/JS and upload it to static resources and name them Fixed_Header_Css/Fixed_Header (or) whatever you like, but reference the same in your page.

From http://jqueryui.com/ download the Jquery CSS/ Jquery JS and name them Jquery_Latest/Jquery_Latest_css (or) whatever and reference in your code.

<apex:page controller="scrollbar_table" showHeader="false">
<apex:includeScript value="{!URLFOR($Resource.Jquery_Latest)}"/>
<apex:includeScript value="{!URLFOR($Resource.Fixed_Header)}"/>
<apex:stylesheet value="{!URLFOR($Resource.Fixed_Header_Css)}"/>
<apex:stylesheet value="{!URLFOR($Resource.Jquery_Latest_css)}"/>

<script type="text/javascript">
   var j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('.fixme').fixheadertable({
            caption : 'My header is fixed !',
             height  : 200
        });
    });
</script>


<table class="fixme">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
           <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
           <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
    </tbody>
</table>

</apex:page>

Controller:

public class scrollbar_table {

    public List<account> getAccount_val() {
        return [select id,name from account limit 20];
    }

}

Output:

By adjusting the height property in the script tag in the vf page you can control the width of the table and scrollbar.

enter image description here

Not the answer you're looking for? Browse other questions tagged .