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
Girbson Bijou 8Girbson Bijou 8 

Group by a column in visualforce page

Help to arrange the data in this page. I need tou group the Inventory by Center, only the first center  displays well and the other one are in disorder like in the attached picture.
<apex:page controller="InventorySearchController2" action="{!load}" sidebar="false">
  <apex:sectionHeader title="FOOD FOR THE POOR INVENTORY" subtitle="Group by Distribution Center" 
    description="This page shows how you all the product in stock group by Center"/>

  <apex:repeat value="{!centers}" var="center">

    <apex:pageBlock title="{!center}">
	 
	   <apex:repeat value="{!inventoryItems}" var="inventoryItem"> 
             <apex:outputPanel rendered="{!IF(center=inventoryItem.FFP_Centers__c,true,false)}">
         
		 <tr> 
							 <th>Center</th> 
							 <th>Product</th> 
							 <th>Unit Of Measure </th> 
							 <th>Container</th> 
							 <th>Order Number</th> 
							 <th>On Hand</th>
							 <th>Pending</th> 
							 <th>Available</th> 
							 <th>Purpose</th> 
							 <th>Condition</th> 
							 <th>Age</th> 
							 <th>Comments</th>
                     </tr> 
                      <tr>     
					        <td>{!inventoryItem.FFP_Centers__c } </td/>                        
                            <td>{!inventoryItem.Prod__c}</td/>  
                            <td>{!inventoryItem.UM__c}</td/>  
                            <td>{!inventoryItem.Container__c}</td/>   
                            <td>{!inventoryItem.Number__c}</td/>   
                            <td>{!inventoryItem.On_Hand__c}</td/>  
                            <td>{!inventoryItem.Pending__c}</td/>  
                            <td>{!inventoryItem.Available__c}</td/>  
                            <td>{!inventoryItem.Purpose__c}</td/>  
                            <td>{!inventoryItem.Condition__c}</td/>  
                            <td>{!inventoryItem.Age__c}</td/>  
                            <td>{!inventoryItem.Comments__c}</td/>  
					  </tr>
        </apex:outputPanel>     
    </apex:repeat>  

    </apex:pageBlock>

  </apex:repeat>

</apex:page>


// Controller


public with sharing class InventorySearchController2 { 
public list <Articles_Containers__c> inventoryItems {get;set;} 
public String[] centers {get;set;}  

 public void load() {

inventoryItems =[Select  FFP_Centers__c , Prod__c, UM__c, Container__c, 
Number__c, On_Hand__c,  Pending__c,  Available__c, Purpose__c, Condition__c, 
Age__c, Comments__c FROM Articles_Containers__c  WHERE On_Hand__c >0  AND IsOpened__c = 1 
 ORDER BY FFP_Centers__c Limit 50000];
     
    
Set<String> centerSet = new Set<String>();
    for (Articles_Containers__c ac : inventoryItems)
      centerSet.add(ac.FFP_Centers__c); 
      
      centers = new String[centerSet.size()];
    Integer i = 0;
    for (String center : centerSet) { 
      centers[i] = center;
      i++;
    }
  }
}
User-added image