Questions regarding a table within a VisualForce

Question

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>

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

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

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

Answer 1

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>
  <apex:column headerValue="Second">
    <apex:input type="number" value="{!row[1]}" />
  </apex:column>
  <apex:column headerValue="Third">
    <apex:input type="number" value="{!row[2]}" />
  </apex:column>
</apex:dataTable>

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.