function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Split Collection to create a dynamic table

I am a little stuck with a page I am trying to create.


Basically, I am trying to create a collection of apartment records related to a building parent record. I then want to split this list into the different building levels/floors. Using this data, I want to construct a table on my VF page such that each row represents a floor and each cell represents an individual apartment. 


Any suggestions on where to start with this would be greatly appreciated.


Thanks in advance.


Can the number of apartments vary on each floor (floor 1 has 10 apartment, floor 2 has 15 apartments)??


If yes, how you would like to show the table despite the disparity in number of columns say between row 1 and row2??


Hi - I've done something similar in the past and would recommend that you build out your HTML table within the apex class itself. You can then loop through and get all values for each floor before moving on to the next row. Let me know if you need any more details?


The building will have varying numbers of apartments per floor.

It would be cool if each row could have a different number of cells but not critical.

If (using your example above) floor 1 had the last 5 cells "greyed-out" that would be more than fine.


Thanks for you help with this.


thanks forcedotcom.


If it is not asking too much, could you shoot me a snippet of sample code to matt at prmaustralia dot com dot au?


Thanks in advanced. I appreciate your help!





I am sending a representative/ indicative sample code which show cases how we can attempt to build this dynamic table where both number of rows and also number of columns vary.




<apex:page controller="ApartmentFloorViewController">
 <apex:pageBlock title="Account List">
     <table title="Account List" border="1">
          <td> <b>Account Name</b>  </td>
          <td colspan="2"> <b>Contact List</b>  </td>
       <apex:repeat value="{!accounts}" var="floor">
               <td> {!} </td>
               <apex:repeat value="{!floor.contacts}" var="apt">
                   <td> {!} </td>

   ** here you may have to work on applying CSS etc to make it look more SFDC like.

   ** Also for Table HEADER, apply a dynamic colspan width, by using the MAX no of apartment out of all floor of the building so it can span all columns.



Here is the controller class for same -


public with sharing class ApartmentFloorViewController {

    private List<Account> accs ;
    private List<Contact> contacts;

    public List<Account> getAccounts() {
        List<Account> accLst ;
        if (accs == NULL) {
            accLst = [Select id, name, site, BillingCity, annualRevenue, (Select id, name from Contacts limit 5) from Account limit 10] ;
            accLst = accs ;
        return accLst ;

    public List<Contact> getContacts() {
        if (contacts == NULL) {
            contacts = [select id, name from Contact limit 5] ;
        return contacts ;
    public ApartmentFloorViewController() {


   ** here I have used Account (in place of Floor) and Contact (in place of Apartment under a floor).


   ** IMPORTANT: Create 2 inner classes for capturing Floor and Apartment data. Now bind Floor inner class to the HTML TABLE row.


I picked Account and Contact just to validate the concept quickly.



I am bit late in responding to this thread, but hope this example is useful.


Best Regards