I need to create what would essentially be a 15 column / 5 row table in a VisualForce page with individual fields and labels in the cells. Some of the rows would be headers, and some of the columns would be field labels. The individual fields within the cells would be input fields.

What is the best way to approach this ? I'm looking into block tables (?) but most of the online documentation I'm finding is regarding tables which are being populated with lists produced by queries. I don't want lists. I only want fields to be in each of the cells, just like a spreadsheet.

Thank you for any input.

The table I am attempting to create would be this type of format (I am attempting to show individual cells below. The "|"represents the end of a column.

firstheader | secondheader

field label1 | field1__c | sidelabelA | fieldA__c |

field label2 | field2__c | field labelB | fieldB__c |

field label3 | field3__c | field labelC | fieldC__c |

Here's what the VF would look like :

<apex:dataTable value="{!object__c}" var="pitem" rowClasses="odd,even"> 
       <apex:column headerValue="">
       <apex:outputLabel>Row1 Label :  </apex:outputLabel>

       <apex:column headerValue="P">
       <apex:outputfield value="{!pitem.Probability__c}"/>&nbsp;

       <apex:column headerValue="S">   
       <apex:outputfield value="{!pitem.Severity__c}"/>

       <apex:column headerValue="C">
       <apex:outputfield value="{!pitem.Control__c}"/>                          


The best option for you is going to largely depend on your data structure. Because you are making a table I am assuming that you have a list of lists, list of maps, or list of SObjects structure somewhere in your controller. This is required to serve as the rows for your table. If you are currently using 5 variables, one to represent each row, I would highly suggest placing them in a single list variable instead. This will make future changes much easier.

Once you have the data you want to display in the table, all you need to provide Visualforce is two iterators. The first will iterate on your rows and the second will iterate on your columns. Consider the following variable:

List<List<Integer>> cells = new List<List<Integer>>{
  new List<Integer> {1, 2, 3},
  new List<Integer> {4, 5, 6}

// List display representation:
//  [0][1][2]
//  [4][5][6]

You could use the native <apex:pageBlockTable /> or <apex:dataTable /> as the row iterator, combined with <apex:column /> as your column iterator. This would look something like:

<apex:dataTable value="{!cells}" var="row">
  <apex:column headerValue="First">
    <apex:input type="number" value="{!row[0]}" />
  <apex:column headerValue="Second">
    <apex:input type="number" value="{!row[1]}" />
  <apex:column headerValue="Third">
    <apex:input type="number" value="{!row[2]}" />

The difference between the two table types is the styling applied. If you would like more control, you can build a standard HTML table using <apex:repeat /> tags to iterate over your rows and your columns.

  • thank you very much for the input. I am not completely sure if we are talking about the exact same type of data representation here. I'm a little confused. I have edited my original post to try and represent the data table which I am trying to create. I tried my best to show a table configuration with the "|" representing the end of a column. What would be the best approach to that type of format ? – Zoom_v Nov 12 '15 at 19:10
  • 1
    I think see what you are saying now. Correct me if I am wrong, but you have a single list of fields (or a wrapper with a field/label pair) in your controller and you want to display a grid with 2 field/label pairs to a row? Is it always the case that all rows have the same number of columns? – dsharrison Nov 12 '15 at 19:17
  • Ok - I've figured it out. I updated my original post to show what the VF page would look like. It's not 100% done yet - I will still add a bunch more columns and rows (and row labels), but I'm sure you get the idea. Think of it as almost like a matrix report (with labels on the left). I think my needs are much more static than your solution. Essentially, I could have accomplished everything I need with a Page Layout if we could just put about 10 columns into a Page Layout section - and put static column headers in. Thank you again. I really appreciate the input. – Zoom_v Nov 12 '15 at 19:32
  • Great! I am glad you were able to figure this out. Having more static requirements ALWAYS makes things easier and the solution in your post looks good. – dsharrison Nov 12 '15 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.