Data Mapping

You can 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 and you need to define only the column ID. For arbitrary data that do not conform to the default, you might need data mapping.

There are several ways to implement mapping:

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

The map attribute defines which property of the loaded data object needs to be used for this 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>

CSV and JsArray data types

During CSV (JsArray) parsing, its columns are named as data1..dataN. You can use these values as column ids:

webix.ui({
    view:"datatable",
    columns:[
        { id:"data1"  },
        { id:"data2"  }
    ]
});

Related sample:  Loading from an Inline Data source

Alternatively, you can use mapping to define more meaningful names for columns:

webix.ui({
    view:"datatable",
    columns:[
        { id:"url",   map:"#data1#"  },
        { id:"size",  map:"#data2#"  }
    ]
});

Converting values to the native type

When you load data from XML, all values are loaded as strings (in JSON as strings or numbers). This is not suitable for data of different types (objects and date objects, for example).

Mapping allows you to convert values from string to the defined type, e.g. date:

webix.ui({
    view:"datatable",
    columns:[
        { id:"start", map:"(date)#start#" }
    ]
});

Related sample:  Converting Strings to Dates

If the id of the column and the name of the mapped field are the same, 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                          // set value based on data in the incoming dataset              obj.count = obj.cells[0];                                       obj.price = obj.cells[1];                                       // or calculate values on the fly                               obj.total = obj.price * obj.count;                          }                                                           },                                                              columns:[
        { id:"count" },
        { id:"price" },
        { id:"total" }
    ]
});

Read more about Data scheme.

You can collect all column IDs and their corresponding data fields in 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) }
    ]
});