Data Mapping

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

Using the "map" column attribute

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>

Specificity of CSV and JsArray data types

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#"  }
    ]
});

Converting values to the native type

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)" }
    ]
});

Scheme data mapping

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.

Common mapping for all data items

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
If you have not checked yet, be sure to visit site of our main product Webix js framework and page of datagrid javascript product.