AdvancedDataGrid with Grouping(A tree table).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="300" >
<mx:Script>
import mx.collections.ArrayCollection;
[Bindable]
private var grocerySalesData:ArrayCollection = new ArrayCollection([
{Grocer:"A", Category:"Fruits", Item:"Apple", Q1:15000, Q2:10000},
{Grocer:"B", Category:"Fruits",Item:"Pineapple", Q1:17000, Q2:15000},
{Grocer:"C", Category:"Meats", Item:"Pork", Q1:43000, Q2:43000}
]);
</mx:Script>
<mx:AdvancedDataGrid id="myAdvancedDG" width="100%" height="100%" defaultLeafIcon="{null}" initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{grocerySalesData}">
<mx:Grouping>
<mx:GroupingField name="Grocer"/>
<mx:GroupingField name="Category"/>
</mx:Grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="GroupLabel" headerText="Grocer/Category"/>
<mx:AdvancedDataGridColumn dataField="Item" headerText="Product(Item)"/>
<mx:AdvancedDataGridColumn dataField="Q1"/>
<mx:AdvancedDataGridColumn dataField="Q2"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
Related examples in the same category