Using GroupingCollection2 component

  
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        
        import mx.collections.ArrayCollection;
        [Bindable]
        public var myAC:ArrayCollection = new ArrayCollection([
            {category:'Friends', name:'A', email:'j@domain.com'},
            {category:'Friends', name:'B', email:'f@domain.com'},
            {category:'Friends', name:'C', email:'r@domain.com'},
            {category:'Family',  name:'D', email:'z@domain.com'},
            {category:'Family',  name:'E', email:'s@domain.com'}]);
      
    </mx:Script>
    <mx:GroupingCollection2 id="myGC" source="{myAC}">
        <mx:Grouping>
            <mx:GroupingField name="category" />
        </mx:Grouping>
    </mx:GroupingCollection2>
    <mx:AdvancedDataGrid dataProvider="{myGC}" initialize="myGC.refresh()" width="300">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name"  headerText="Contacts" />
            <mx:AdvancedDataGridColumn dataField="email" headerText="Email" />
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

Related examples in the same category

1.	Creating groups in ActionScript
2.	The grouping property is the default MXML property of the GroupingCollection class
3.	Group AdvancedDataGrid with GroupingCollection2

Using GroupingCollection2 component : GroupingCollection2 « Grid « Flex

Related examples in the same category