To customize data content and specify which data will be presented in DataTable and how, you can use templates. Data templates are set in the related column by attribute template.
By #value# you can refer to the data property specified for the column. It can be especially useful when you define a common template for several columns.
You can read about templates syntax in article Templates.Syntax.
Specifying data template for a specific column
grid = new webix.ui({
view:"datatable",
...
columns:[
{ id:"title", header:"Film title", template:"<strong>#title#</strong>",
{ id:"year", header:"Release year" , template:"at #year#",}
]
});
Related sample: Using string templates
Templates can be used for presenting almost any content in DataTable ( anything which can be done through HTML - can be placed in DataTable's cell) such as: images, links, numbers, string, dates.
Content | Example of template |
---|---|
strings |
|
images |
|
links |
|
You can set custom template for a column by presenting the template attribute as a function (function accepts raw object and returns the result string).
grid = new webix.ui({
view:"datatable",
columns:[
{id:"title", header:"Film title"},
{id:"votes", header:"Votes", template:function(obj){ return obj.votes/1.2547}};
],
...
})
Related sample: Converting strings to dates
For more on styling, read article Styling
You can use both template and format attributes for the same column. In such case column will format data first, and will use it in template after that.
grid = new webix.ui({
view:"datatable",
columns:[
{id:"votes", header:"Votes", format:webix.i18n.numberFormat,
template:"no more than #value#"}
],
...
})
You can insert any custom html to the row elements, which gives an easy way for adding buttons or similar controls to Datatable's rows
grid = new webix.ui({
view:"datatable",
columns:[
{id:"votes", header:"Votes", template:"#value#
<input type='button' value='Show details' class='details_button'>'"}
],
on_click:{
details_button:function(id, ev){
//will be called on button click
some_custom_method(id.row, id.column);
}
}
...
})
Related sample: Datatable: Custom Handler
Through the template you can define common elements for the cells belonging to one and the same column, namely:
You can define additional common elements within the component type.
webix.ui({
view:"datatable",
...
columns:[
{ id:"ch1", header:"", template:"{common.checkbox()}"},
{ id:"ra1", header:"", template:"{common.radio()}"}
]
});
Related sample: Checkbox and radio in DataTable
Learn more about checkboxes and radios in a separate article - Checkbox and Radio in DataTable
webix.ui({
view:"datatable",
...
columns:[
{ id:"edit", header:"", template:"{common.editIcon()}"},
{ id:"trash", header:"", template:"{common.trashIcon()}"}
]
});
You can set built-in template via a function:
webix.ui({
view:"datatable",
...
columns:[
{ id:"ra1", template:function(obj, common, value, config){
return common.radio(obj, common, value, config);
}},
{ id:"trash", header:"", template:function(){
return common,editIcon();
}}
]
});
As you can see, common.checkbox() and common.radio() functions take four parameters: