Home > visualforce > How to create a freeze Header/column table with dynamic data in visualforce

# How to create a freeze Header/column table with dynamic data in visualforce

July 1Hits:1

• How do I support scrolling and lock/freeze the header row of a pageBlockTable? 4 answers

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

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 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() {
caption : 'My header is fixed !',
height  : 200
});
});
</script>

<table class="fixme">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<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.

## Related Articles

• ### How to create a freeze Header/column table with dynamic data in visualforce July 1

This question already has an answer here: How do I support scrolling and lock/freeze the header row of a pageBlockTable? 4 answers I have to create a table which gets data dynamically. Its rows and columns are populated dynamically and I am using Pag

• ### Creating a multi-column table with dynamically wide columns from a CSV fileMarch 4

I'm trying to make a multi-column table take dynamic values, read from a CSV file. The current table looks like this and has been formatted manually with tabularx, without any multicolumn package whatsoever. \begin{tabularx}{\textwidth}{|l l X|l l X|

• ### Jquery table with dynamic data [on hold]February 8

I am stumped. I am making a table that loads data from an API. So far, the header loads the information well; however, the data that makes up the rows loads incorrectly as shown here: . Can someone please explain to me why this is so? I think it migh

• ### creating custom content comprising both static and dynamic dataApril 23

I need to create certain pages in my site, some of them relatively simple layout with mostly static content like Contact Us and About Us which I've created as Content Type Page (node). Similarly other content types have a relatively complex layout an

• ### Create linewidth spaced three columned table with column alignmentJune 9

I'm writing a two columned article: \documentclass[10pt, aps, prb, twocolumn]{revtex4-1} I would like to include a table which is as long as 1.\linewidth. The table should consist of three columns, the first two are aligned to the left and the last c

• ### Multi-column table layout the right wayOctober 10

How do I create book-like multi-column table formatting for a long, narrow tables in a preferably elegant way? Should I be thinking of stylesheets, instead of formatting? I guess this is a solved problem, after all. Row expression below is my own, fe

• ### how to create a two column table for differentiating?February 11

I want to compare two types of networks. I have 4 comparison points. How should I create a 2 column table where every of those 4 points for both networks is aligned? --------------Solutions------------- \documentclass[border=3pt]{standalone} \usepack

• ### ListFieldIterator does not create two column TableMay 22

I created a WebPart (SharePoint 2013) which contains a ListFieldIterator to display the fields of a list like the New-/EditForm does. According to all online examples and the default new/edit form of a list, the fields should be aligned in a two colu

• ### Creating a two column table for a math classJanuary 6

I am having trouble creating two column tables. I want to create 2 two column tables side by side, but my code doesn't seem to work: \documentclass{article} \usepackage[english]{babel} \usepackage{array} \begin{document} \title{Example: Exponents} \a

Given some latex code like \section{the first section} some text \section{the second section} some text \section{the third section} some text \section{the fourth section} some text I want to create a TOC as a three-column table, like so: ------------

• ### How to create two column table script?May 28

Is there a way to create a two column table in TextEdit with some way to create new cells by hitting the Return key, as you can do in Word? Alternatively, is there a way to achieve the same effect without the table via. some sort of two column like s

• ### How can I create two column table macro script?June 1

How can I create a two column table in via Macro, and create new cell rows by hitting the Return key (as you can do in Word)? Alternatively, is there a way to achieve the same effect without the table -- but through some sort of two-column like set s

• ### Problem in creating multi column tablesOctober 28

Im trying to create a multicolumn table in LaTex that would look like this: Unfortunately I tried pretty much all the codes for multi row and multi column tables but it never looks even remotely similar. My main problem is to fit the Chronological pe

• ### How to create a hyperlink in a table column using jspdf & jspdf-auto-table library?January 25

How to create a hyperlink in a table column using jspdf & jspdf-auto-table library? Code snippet: function exportTable(title, columns, rows) { var doc = new jsPDF('p', 'pt', 'a3'); doc.autoTable(columns, rows); doc.save(title + ".pdf"); } He

• ### For user defined data, is it better to use a table of tables or dynamically created tables?September 27

In an application that allows users to define their own tables and columns (details of that are not the focus of this question, but imagine a tool that lets users create their own forms and automatically handles storage, just to get the idea) is it b

• ### Word macro: how to replace strings in a text, based on a 2 column-table?October 7

So I have a series of strings that I'd like to search and replace in Word documents. My strings would be displayed as a two-column table. I'd probably create the table with Word, then would convert it manually to TXT, or CSV or whatever would work...

• ### Using LyX, how can I make a 6 column table with the second row having multiple lines of text?November 26

Using LyX, how can I make a 6 column table with the second row having multiple lines of text? I am trying to create the following layout in LyX: I'm using LyX 2.0 for mac. What are ways to accomplish this? --------------Solutions------------- To fill

• ### How can I identify when to create a new table to hold data that can be obtained from a query?March 30

We have a payment table, and agents get commission on payments. Commission is based on a few different factors, such as how long it took to get the payment, so there is some calculations involved when figuring out the commission rate the agent gets,

• ### Creating document with 2 columns but do not spread one column to another in MS WORDApril 17

I want to create document with 2 columns layout. I will fill first columns with article in English and second columns with translated article in another language. So text in column 1 should not go to column 2 if I reach bottom of page. Can anyone hel

• ### CREATE INDEX for long columnsJune 25

I am looking for alternative to create index on long column: create table line ( field_key integer not null, value varchar(4000), ... ); create index key_value_idx on line (field_key, value); results DB2 SQL Error: SQLCODE=-614, SQLSTATE=54008. Docum