It's possible to define mapping between loaded data and columns of datatable. By default, DataTable will assume that incoming JSON/XML has an attribute with the same name as the column id. So for a well-formed JSON/XML you need to define just the column id.
There are several ways to implement mapping for a custom data format:
1) using the map attribute of a column
2) using the scheme property of Datatable
3) using the map attribute of Datatable for common mapping of all data items
In case of JSON/XML in a custom format, you can use the map attribute of a column. It defines which property of the loaded data object needs to be used for that column in the grid:
Loading from XML
webix.ui({
view:"datatable",
columns:[
{
id:"size",
map:"#cells[0]#", header:"Will use the value from the first cell sub-tag"
},
{
id:"url",
map:"#details#", header:"Will use the value from the details attribute or sub-tag"
}
],
datatype:"xml"
url:"data/data.xml"
});
The code above will correctly show data from XML as in:
<rows>
<item details="http://mysite.com"><cell>15x24</cell><cell>19.02.2008</cell></item>
<item details="http://mysite.com"><cell>10x12</cell><cell>22.02.2008</cell></item>
...
</rows>
During CSV (JsArray) parsing, its columns are named as data1 .. dataN. You can use that values as column's ids
webix.ui({
view:"datatable",
columns:[
{ id:"data1" },
{ id:"data2" }
]
});
Related sample: Loading from an Inline Datasource
or you can use mapping, to define more meaningful names for columns
webix.ui({
view:"datatable",
columns:[
{ id:"url", map:"#data1#" },
{ id:"size", map:"#data2#" }
]
});
When you load data from XML, all values are loaded as strings (in JSON - strings or numbers), but it is not very useful, as we need to work with different types of objects, date objects for example.
The mapping logic allows defining the native type of a value, and during data mapping it will be converted from string to the defined type:
webix.ui({
view:"datatable",
columns:[
{ id:"start", map:"(date)#start#" }
]
});
Related sample: Converting Strings to Dates
If the id of a column and the name of a mapped field are equal, you can shorten the record as follows:
webix.ui({
view:"datatable",
columns:[
{ id:"start", map:"(date)" }
]
});
If all the above doesn't work, you can use the scheme property to define a custom data mapping function:
webix.ui({
view:"datatable",
scheme:{ $init:function(obj){ //obj - data object from incoming data obj.count = obj.cells[0]; // set value based on data in the incoming dataset obj.price = obj.cells[1]; obj.total = obj.price * obj.count; // or calculate values on the fly } }, columns:[
{ id:"count" },
{ id:"price" },
{ id:"total" }
]
});
Data scheme if described in detail separately.
Data can be mapped initially to created aggregated properties that can be later used as column IDs, via the map property of Datatable:
webix.ui({
view:"datatable",
map:{ name:"#firstname# #lastname#", birth:"(date)#birthdate#" }, columns:[
{ id:"name", header:"User name" },
{ id:"birth", header:"Date of birth"}
],
data:[
{ id:1, firstname:"Adam", lastname:"Smith", birthdate:new Date(1985, 1, 1) },
{ id:2, firstname:"Tom", lastname:"Brown", birthdate:new Date(1986, 2, 2) }
]
});
Back to top