diff --git a/001-Guides/010-Datasources.md b/001-Guides/010-Datasources.md
new file mode 100644
index 0000000..ee65f8b
--- /dev/null
+++ b/001-Guides/010-Datasources.md
@@ -0,0 +1,176 @@
+# Datasources
+
+Multiple components use `datasource` to store their data. It is usually used to store an array of data.
+Those components implements `IDataComponent`
+
+
+For example a listview use a datasource. The xml
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+is translated as this code
+```haxe
+ var ds1 = new haxe.ui.data.ArrayDataSource();
+ ds1.add({text : "Haxe", icon : "icons/logo-haxe.png", id : "item"});
+ ds1.add({text : "Java", icon : "icons/logo-java.png", id : "item"});
+ ds1.add({text : "Javascript", icon : "icons/logo-javascript.png", id : "item"});
+ ds1.add({text : "C++", icon : "icons/logo-cpp.png", id : "item"});
+ ds1.add({text : "PHP", icon : "icons/logo-php.png", id : "item"});
+ ds1.add({text : "C#", icon : "icons/logo-cs.png", id : "item"});
+ ds1.add({text : "F#", icon : "icons/logo-fs.png", id : "item"});
+ ds1.add({text : "OCaml", icon : "icons/logo-ocaml.png", id : "item"});
+ ds1.add({text : "Assembler", icon : "icons/logo-asm.png", id : "item"})
+ lv1.dataSource = ds1;
+```
+
+## Uses of datasources
+
+Datasources are used little bit differently depending on components.
+Most datasources are used to be used in conjunction with item renderers.
+But there are a few exceptions.
+
+
+### Datasources for items to be used by an item renderer
+
+#### Item renderers, a way to render an item stored in the datasource
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+An item renderer is basically a container, a box with components.
+That's why you can do ``
+
+
+Components that combine both an item-renderer and datasource do it this way.
+
+For each item in the datasource
+- The item-renderer will be cloned
+- The cloned component will be added as a component child
+- Something will be done with the info in the item
+
+
+### Dropdown, List, Tables
+- The item is cloned
+- The cloned component is added as a component child
+- Then some values is initialised from the item info
+ ` `
+ It will look for the component with the id 'complete' which is a checkbox and set the value to false, look at the component with the id 'item' and set the value to 'Item1' etc.
+
+### Datasources for option-steppers
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Option steppers only use the datasource as an array of text. The option stepper will change it's value to the previous/next item text when clicked on.
+
+
+### Datasources for canvases
+
+```xml
+
+```
+
+Canvas uses datasource as a way to store drawing actions.
+
+### Datasource events
+
+Datasources as components, also dispatches events. It can dispatch an event when item is added to the datasource, removed, etc.
+
+You must set them by code. You CANNOT set to them in the xml doesn't work for now.
+
+
+### DataSource filtering and sorting
+
+
+
+
+
+
+
+
+## Creating a datasource from code
+
+An advantage of setting a datasource through code instead of xml, is you can have typed datasources. Xml datasources are usually an array of objects.
+
+
+
+Instead of having
+```haxe
+var ds = new ArrayDataSource();
+ds.add(...);
+dd.dataSource = ds;
+```
+You can have
+
+```haxe
+var ds = new ArrayDataSource();
+var ds = new ArrayDataSource<{item:String, quantity:Int}>();
+ds.add(...);
+dd.dataSource = ds;
+```
+
+
+