How to use standart components (DataGrid) in Canvas?

Unfortunately, I didn't find any example for Canvas.

How to convert this example from DataGrid - Adobe ActionScript® 3 (AS3 Flash) API Reference

import fl.controls.*;

import fl.containers.*;

import fl.controls.listClasses.*;

import fl.controls.dataGridClasses.*;

import fl.controls.progressBarClasses.*;

import fl.core.UIComponent;

import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();

dp.addItem( { label: "BaseScrollPane", data:BaseScrollPane } );

dp.addItem( { label: "Button", data:Button } );

dp.addItem( { label: "CellRenderer", data:CellRenderer } );

dp.addItem( { label: "CheckBox", data:CheckBox } );

dp.addItem( { label: "ColorPicker", data:ColorPicker } );

dp.addItem( { label: "ComboBox", data:ComboBox } );

dp.addItem( { label: "DataGrid", data:DataGrid } );

dp.addItem( { label: "HeaderRenderer", data:HeaderRenderer } );

dp.addItem( { label: "ImageCell", data:ImageCell } );

dp.addItem( { label: "IndeterminateBar",data:IndeterminateBar } );

dp.addItem( { label: "Label", data:Label } );

dp.addItem( { label: "List", data:List } );

dp.addItem( { label: "NumericStepper", data:NumericStepper } );

dp.addItem( { label: "ProgressBar", data:ProgressBar } );

dp.addItem( { label: "RadioButton", data:RadioButton } );

dp.addItem( { label: "ScrollPane", data:ScrollPane } );

dp.addItem( { label: "Slider", data:Slider } );

dp.addItem( { label: "TextArea", data:TextArea } );

dp.addItem( { label: "TextInput", data:TextInput } );

dp.addItem( { label: "TileList", data:TileList } );

dp.addItem( { label: "UILoader", data:UILoader } );

dp.addItem( { label: "UIComponent", data:UIComponent } );

var cb:ComboBox = new ComboBox();

cb.move(10,10);

cb.setSize(300,25);

cb.prompt = "Select a component to view its styles";

cb.rowCount = 12;

cb.dataProvider = dp;

cb.addEventListener(Event.CHANGE, showStyleDefinition);

addChild(cb);

var dg:DataGrid = new DataGrid();

dg.setSize(425,300);

dg.move(10,50);

dg.columns = [ new DataGridColumn("StyleName"), new DataGridColumn("DefaultValue") ];

addChild(dg);

function showStyleDefinition(e:Event):void {

  var componentClass:Class = e.target.selectedItem.data as Class;

  var styles:Object = componentClass["getStyleDefinition"].call(this);

  trace(styles.toString());

  var styleData:DataProvider = new DataProvider();

  for(var i:* in styles) {

  trace(i + " : " + styles);

  styleData.addItem( { StyleName:i, DefaultValue:styles } );

  }

  styleData.sortOn("StyleName");

  dg.dataProvider = styleData;

}